MAC 로컬 서버에 SSL 인증된 https 도메인 Nginx로 10분만에 적용하기
목차 펼치기
머리말
머리말
로컬 서버에도 https를 사용하면, API 호출 보안성을 향상시키고 운영 환경과 일관성을 유지할 수 있으며, 브라우저 보안 경고를 방지하고 실제와 유사한 환경에서 개발할 수 있다. 이 글에서 SSL 인증서를 생성하고 Nginx를 이용해 설정하는 방법을 확인할 수 있다.
작업 목표
작업 목표
설명의 예시를 위해 임의로 설정한 작업 목표는 다음과 같다.
localhost:3000에
local.treefeely.com도메인 및 SSL 적용
localhost:3030에
local.weezip.treefeely.com도메인 및 SSL 적용
Nginx 실행
Nginx 실행
이 단계에서는 Homebrew 패키지 관리자를 통해 SSL 프록시를 구현하기 위한 Nginx를 설치하고 실행할 것이다.
Homebrew 설치
Homebrew 설치
1$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2$ brew --version에서 제공해주는 스크립트를 통해 설치할 수 있다. 만약 이미 설치가 되어 있다면, 이 단계를 넘어갈 수 있다.
1$ brew --version
2zsh: command not found: brew
3
4$ echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc
5$ source ~/.zshrcHomebrew를 설치했음에도 불구하고
command not found오류가 발생한다면, Homebrew 경로를 추가하는 것으로 해결할 수 있다.
Nginx 설치
Nginx 설치
1$ brew install nginx
2$ brew services start nginx // Check localhost:8080Homebrew를 통한 Nginx 설치
설치한 Homebrew 패키지 관리자를 통해 Nginx 설치 완료 후 서비스를 시작하면,
localhost:8080에서 다음과 같은 환영 메시지를 볼 수 있다.
Nginx 실행 후 확인할 수 있는 페이지
Nginx 경로 확인
Nginx 경로 확인
1$ nginx -V 2>&1 | grep -o '\-\-conf-path=\(.*conf\)' | cut -d '=' -f2
2
3/opt/homebrew/etc/nginx/nginx.confNginx 설정 파일 경로 확인
이 명령어를 통해 Nginx의 설정 파일 경로를 찾을 수 있다. 일반적으로
/opt/homebrew/etc/nginx경로인 것을 확인할 수 있지만, Homebrew 설정에 따라 달라질 수 있다.
SSL 인증서 생성
SSL 인증서 생성
이 단계에서는 Nginx가 설치된 경로로 이동해서 인증서를 저장할
/ssl폴더를 생성한 후,
mkcert명령어를 통해 SSL 인증서를 생성할 것이다.
1$ brew install mkcertmkcert가 설치되어있지 않다면 Homebrew를 통해 설치해준다.
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도 같이 추가했다.
1$ mkcert *.treefeely.com localhost 127.0.0.1 필요하다면 와일드카드(*)를 사용해 특정 도메인의 모든 서브 도메인이 해당되게 할 수도 있다.
인증서를 생성하면 두 개의
.pem파일이 생성된다. 이 파일명은 인증서를 생성할 때 사용한 도메인의 이름과 개수에 따라 달라지는데, 이후 Nginx 설정에 사용된다.
Nginx 설정
Nginx 설정
이 단계에서는 생성한
.pem파일들로 Nginx의 설정을 변경해 HTTPS 프록시를 구현할 것이다.
1$ sudo vi /opt/homebrew/etc/nginx/nginx.conf터미널에서 Nginx 설정 파일인
nginx.conf를 수정 권한으로 연다.
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 재시작
Nginx 재시작
1$ brew services restart nginxNginx 설정을 변경했으니 재시작해서 반영되도록한다.
Host 등록
Host 등록
이 단계에서는 웹 브라우저에서 특정 도메인이 로컬 서버로 전달되도록 설정할 것이다.
1$ sudo vi /etc/hostshosts파일을 수정 권한으로 연다.
1127.0.0.1 local.treefeely.com
2127.0.0.1 local.weezip.treefeely.com파일의 아래에 위 내용을 설정하려는 도메인에 맞춰 수정한 후 추가한다. 이제 웹 브라우저에서 https로 로컬 서버에 접근하는 것을 확인할 수 있다.
번외.
번외.
MSW 라이브러리에서 SSL certificate error 이슈
MSW 라이브러리에서 SSL certificate error 이슈
DOMException: Failed to register a ServiceWorker: An SSL certificate error occurred when fetching the script
SSL 인증서에서 정상적으로 인증되지 않는 도메인에서 MSW 워커가 동작할 경우 발생할 수 있는 이슈다.
필자의 경우에는 MSW 라이브러리를 사용해서 목업 데이터로 테스트를 진행하는 환경에서
SSL 인증서 생성 시 포함시키지 않은 도메인으로 로컬 서버의 도메인을 변경했을 때 발생했다. 웹 동작 상에 이슈는 없으나 워커가 정상적으로 동작하지 않으며, 개발자도구의 콘솔 창에서 오류 내용을 확인할 수 있다.