MAC 로컬 서버에 SSL 인증된 https 도메인 Nginx로 10분만에 적용하기

작성 : 2023-07-27수정 : 2024-03-28

목차 펼치기

머리말

로컬 서버에도 https를 사용하면, API 호출 보안성을 향상시키고 운영 환경과 일관성을 유지할 수 있으며, 브라우저 보안 경고를 방지하고 실제와 유사한 환경에서 개발할 수 있다. 이 글에서 SSL 인증서를 생성하고 Nginx를 이용해 설정하는 방법을 확인할 수 있다.


작업 목표

설명의 예시를 위해 임의로 설정한 작업 목표는 다음과 같다.

  • localhost:3000

    local.treefeely.com

    도메인 및 SSL 적용

  • localhost:3030

    local.weezip.treefeely.com

    도메인 및 SSL 적용


Nginx 실행

이 단계에서는 Homebrew 패키지 관리자를 통해 SSL 프록시를 구현하기 위한 Nginx를 설치하고 실행할 것이다.


Homebrew 설치

javascript
1$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2$ brew --version
Homebrew 공식 홈페이지

에서 제공해주는 스크립트를 통해 설치할 수 있다. 만약 이미 설치가 되어 있다면, 이 단계를 넘어갈 수 있다.


javascript
1$ brew --version
2zsh: command not found: brew
3
4$ echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc
5$ source ~/.zshrc

Homebrew를 설치했음에도 불구하고

command not found

오류가 발생한다면, Homebrew 경로를 추가하는 것으로 해결할 수 있다.


Nginx 설치

bash
1$ brew install nginx
2$ brew services start nginx // Check localhost:8080

Homebrew를 통한 Nginx 설치

설치한 Homebrew 패키지 관리자를 통해 Nginx 설치 완료 후 서비스를 시작하면,

localhost:8080

에서 다음과 같은 환영 메시지를 볼 수 있다.


 Nginx 실행 후 확인할 수 있는 페이지

Nginx 실행 후 확인할 수 있는 페이지


Nginx 경로 확인

bash
1$ nginx -V 2>&1 | grep -o '\-\-conf-path=\(.*conf\)' | cut -d '=' -f2
2
3/opt/homebrew/etc/nginx/nginx.conf

Nginx 설정 파일 경로 확인

이 명령어를 통해 Nginx의 설정 파일 경로를 찾을 수 있다. 일반적으로

/opt/homebrew/etc/nginx

경로인 것을 확인할 수 있지만, Homebrew 설정에 따라 달라질 수 있다.


SSL 인증서 생성

이 단계에서는 Nginx가 설치된 경로로 이동해서 인증서를 저장할

/ssl

폴더를 생성한 후,

mkcert

명령어를 통해 SSL 인증서를 생성할 것이다.


javascript
1$ brew install mkcert
mkcert

가 설치되어있지 않다면 Homebrew를 통해 설치해준다.


bash
1$ cd /opt/homebrew/etc/nginx
2$ mkdir ssl
3$ cd ssl
4$ mkcert local.treefeely.com local.weezip.treefeely.com localhost 127.0.0.1

이후 인증서를 생성할 경로로 이동하는데, 여기서는 nginx가 설치된 경로 내에

ssl

폴더를 만들어서 진행했다.

mkcert

명령어로 SSL 인증서를 생성하면서 https를 적용할 도메인을 공백으로 구분하여 나열한다. 로컬 서버에도 제공해주기 위해

localhost

127.0.0.1

도 같이 추가했다.


bash
1$ mkcert *.treefeely.com localhost 127.0.0.1 

필요하다면 와일드카드(*)를 사용해 특정 도메인의 모든 서브 도메인이 해당되게 할 수도 있다.


인증서를 생성하면 두 개의

.pem

파일이 생성된다. 이 파일명은 인증서를 생성할 때 사용한 도메인의 이름과 개수에 따라 달라지는데, 이후 Nginx 설정에 사용된다.


Nginx 설정

이 단계에서는 생성한

.pem

파일들로 Nginx의 설정을 변경해 HTTPS 프록시를 구현할 것이다.


bash
1$ sudo vi /opt/homebrew/etc/nginx/nginx.conf

터미널에서 Nginx 설정 파일인

nginx.conf

를 수정 권한으로 연다.


plain text
1http {
2	...
3
4	server {
5	    listen       443 ssl;
6	    server_name  local.treefeely.com;
7	
8	    ssl_certificate      /opt/homebrew/etc/nginx/ssl/local.weezip.treefeely.com+3.pem;
9	    ssl_certificate_key  /opt/homebrew/etc/nginx/ssl/local.weezip.treefeely.com+3-key.pem;
10	
11	    ssl_session_cache    shared:SSL:1m;
12	    ssl_session_timeout  5m;
13	
14	    ssl_ciphers  HIGH:!aNULL:!MD5;
15	    ssl_prefer_server_ciphers  on;
16	
17	    location / {
18	        # root   html;
19	        # index  index.html index.htm;
20	        proxy_temp_path /tmp;
21	        proxy_http_version 1.1;
22	        proxy_set_header Upgrade $http_upgrade;
23	        proxy_set_header Connection 'upgrade';
24	        proxy_set_header Host $host;
25	        proxy_pass http://127.0.0.1:3000;
26	    }
27	}
28
29	server {
30	    listen       443 ssl;
31	    server_name  local.weezip.treefeely.com;
32	
33	    ssl_certificate      /opt/homebrew/etc/nginx/ssl/local.weezip.treefeely.com+3.pem;
34	    ssl_certificate_key  /opt/homebrew/etc/nginx/ssl/local.weezip.treefeely.com+3-key.pem;
35	
36	    ssl_session_cache    shared:SSL:1m;
37	    ssl_session_timeout  5m;
38	
39	    ssl_ciphers  HIGH:!aNULL:!MD5;
40	    ssl_prefer_server_ciphers  on;
41	
42	    location / {
43	        # root   html;
44	        # index  index.html index.htm;
45	        proxy_temp_path /tmp;
46	        proxy_http_version 1.1;
47	        proxy_set_header Upgrade $http_upgrade;
48	        proxy_set_header Connection 'upgrade';
49	        proxy_set_header Host $host;
50	        proxy_pass http://127.0.0.1:3030;
51	    }
52	}
53}

Nginx SSL Proxy 설정

http

내에

server

설정을 추가한다. 여기서는 두 개의 도메인을 설정하는 것이 목표이므로 2개의

server

를 추가했다. 올바른 SSL 인증서, Key 경로와 함께 로컬 서버와 설정하려는 도메인을 환경에 맞게 수정해야한다.


  • server_name

    : 설정 도메인

  • ssl_certificate

    : 생성한 SSL 인증서 경로

  • ssl_certificate

    : 생성한 SSL 인증서 Key 경로

  • location.proxy_pass

    : 로컬 서버 origin


Nginx 재시작

plain text
1$ brew services restart nginx

Nginx 설정을 변경했으니 재시작해서 반영되도록한다.


Host 등록

이 단계에서는 웹 브라우저에서 특정 도메인이 로컬 서버로 전달되도록 설정할 것이다.


plain text
1$ sudo vi /etc/hosts
hosts

파일을 수정 권한으로 연다.


bash
1127.0.0.1       local.treefeely.com
2127.0.0.1       local.weezip.treefeely.com

파일의 아래에 위 내용을 설정하려는 도메인에 맞춰 수정한 후 추가한다. 이제 웹 브라우저에서 https로 로컬 서버에 접근하는 것을 확인할 수 있다.


번외.

MSW 라이브러리에서 SSL certificate error 이슈

DOMException: Failed to register a ServiceWorker: An SSL certificate error occurred when fetching the script

SSL 인증서에서 정상적으로 인증되지 않는 도메인에서 MSW 워커가 동작할 경우 발생할 수 있는 이슈다.

필자의 경우에는 MSW 라이브러리를 사용해서 목업 데이터로 테스트를 진행하는 환경에서

SSL 인증서 생성 시 포함시키지 않은 도메인으로 로컬 서버의 도메인을 변경

했을 때 발생했다. 웹 동작 상에 이슈는 없으나 워커가 정상적으로 동작하지 않으며, 개발자도구의 콘솔 창에서 오류 내용을 확인할 수 있다.


해당 이슈로 구글링을 해보면,

크롬 실행을 특정 커맨드로 실행

하면 된다고 해서 진행해봤으나, 아무래도 불편해서 새로 SSL 인증서를 생성해서 해결되도록 했다.

Wanna get in touch?

All Icons byiconiFy