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

작성 : 2023-07-27수정 : 2023-07-27

목차 펼치기


머리말

https 프로토콜로만 호출 가능한 API를 사용해서 개발이 필요하거나, localhost가 아닌 별도의 도메인을 통해 개발 서버를 띄워야 하는 경우가 있다. 물론 꼭 필요하지 않아도 그냥 localhost가 싫어서 적용할 수도 있다. 읽는 데는 1분, 처음부터 적용하는 데는 10분도 걸리지 않으니 가볍게 적용해보자.

물론 많은 삽질이 있었지만…


SSL 인증서 도메인 적용하기

0. 요구사항

  • localhost:3000

    local.treefeely.com

    도메인 및 SSL 적용

  • localhost:3030

    local.weezip.treefeely.com

    도메인 및 SSL 적용


1. Nginx 설치

우선 Nginx를 설치해야 한다. 설치가 되어 있다면 2번으로 넘어가자.

bash
1$ brew install nginx
2$ brew services start nginx // install check (localhost:8080)
3
4$ nginx -V 2>&1 | grep -o '\-\-conf-path=\(.*conf\)' | cut -d '=' -f2 // check path
5
6$ brew services restart nginx // nginx restart

Nginx 설치 및 확인


설치 후

localhost:8080

으로 이동했을 떄 아래와 같은 화면이 뜬다면 성공적으로 설치된 것이다.



2. SSL 인증서 생성

  1. nginx가 설치된 경로로 이동한 후 인증서를 저장할

    /ssl

    폴더를 생성한다.

  2. mkcert

    명령어로 인증서를 생성한다.

  3. localhost

    ,

    127.0.0.1

    을 포함해서 인증서를 적용하려는 도메인을 공백으로 구분하여 나열해준다.

    typescript
    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

    SSL 인증서 생성

  4. {file}.pem

    ,

    {file}-key.pem

    이라는 두 파일이 생성된다. 파일명은 인증서 만들 때 사용한 도메인의 이름과 개수에 따라 달라진다. 이 파일들은 이후 Nginx 설정에 사용한다.


3. nginx.conf 설정

  1. vi에서

    nginx.conf

    파일을 수정 가능하게 연다.

    bash
    1$ sudo vi /opt/homebrew/etc/nginx/nginx.conf
  2. http 안에 아래 server 데이터를 입력한다. 특히

    ssl_certificate

    ssl_certificate_key

    에 위에서 생성한 인증서를 등록하는데,

    SSL 인증서 키의 경로를 잘 맞추어 입력

    해야한다.

    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}

    /opt/homebrew/etc/nginx/nginx.conf 파일 설정


4. Nginx 재시작

plain text
1$ brew services restart nginx

nginx 설정을 변경했으니 재시작한다.


5. host 등록

plain text
1$ sudo vi /etc/hosts

MAC OS의 hosts 파일을 수정해서 도메인이 로컬 IP 주소에 매핑되도록 설정해준다.

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


번외.

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

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

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

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

했을 때 발생했다.

웹 동작 상에 이슈는 없으나 워커가 정상적으로 동작하지 않으며 개발자도구의 콘솔 창에서 다음과 같은 로그를 확인할 수 있다.

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

해당 이슈로 구글링을 해보면 Chrome 실행을 아래 커맨드로 실행하면 된다는 글이 있다.

bash
1/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir=/tmp/foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://local.dev.barodev.com:5000

처음에는 다시 SSL 인증서를 만들지 않고 위 커맨드로 크롬 브라우저를 실행시켜서 사용해봤으나, 역시나 아무래도 불편해서 결국 SSL 인증서를 다시 만들어서 Nginx.conf를 수정하여 재시작했다. 해당 도메인이 정상적으로 인증되면서 이슈는 해결되었다.



Contact Me

All Icons byiconiFy