[Nginx] Nginx로 https 설정하기

회사에서 금융인증서 테스트를 위해 https로 접근을 해야 했다. 보안을 위해 http로는 접근이 되지 않았다. 하지만 그동안 local 에서 개발을 진행할 때는 http로 밖에 웹사이트를 열지 않았기 때문에, 추가 설정이 필요하였다.

 

Nginx 설치

 

 

이를 위해선 먼저 Nginx가 필요하다. 로컬에서 설정하면 배포 환경과 동일하게 테스트 가능하다.

brew install nginx

 

 

SSL 인증서 생성

mkcert를 통해 브라우저에서 SSL 인증서 경고 없이 HTTPS 사용이 가능하다.

 

brew install mkcert

mkcert -install

mkcert local.test.com

 

마지막 명령어에는 사용할 도메인으로 입력해준다.

local.test.com 은 로컬 테스트용 도메인으로 host 파일에 미리 세팅을 해두었다.

각각 설정에 맞게 입력하면 된다.

 

그러면 총 2개의 파일이 생긴다.

local.test.com.pem → SSL 인증서 파일

local.test.com-key.pem → 개인 키 파일

 

nginx에서 쓸 것이기 때문에, 기존 파일의 경로를 nginx 폴더 안쪽으로 이동해 주었다.

cd /opt/homebrew/etc/nginx
mkdir ssl

sudo mv local.test.com.pem /opt/homebrew/etc/nginx/ssl/local.test.com+1.pem
sudo mv local.test.com-key.pem /opt/homebrew/etc/nginx/ssl/local.test.com+1-key.pem

 

 

Nginx 파일 수정

nginx.conf 파일을 먼저 연다 (위치는 각각 다를 수 있다)

vi /usr/local/etc/nginx/nginx.conf

 

conf 파일 안에 server 블록을 추가해 준다. 기존 거는 그대로 두어도 된다. 포트도 다르기 때문에!

http {
    server {
        listen 443 ssl;
        server_name local.test.com;

        ssl_certificate         /opt/homebrew/etc/nginx/ssl/local.test.com+1.pem;
        ssl_certificate_key     /opt/homebrew/etc/nginx/ssl/local.test.com+1-key.pem;

        location / {
            proxy_pass http://{본인IP}:3000;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

 

proxy_pass 에 본인 IP를 넣어 준다.

밑에도 나오지만 나는 React 프로젝트의 Webpack에 IP로 실행되게 했기에 IP로 넣었다.

'/'로 오는 요청은 모두 해당 경로로 전달된다.

 

Nginx 재시작

sudo nginx -t
sudo nginx -s reload

 

 

참고) webpack 파일

나의 경우, React와 webpack으로 돌아가는 프로젝트였다.

devServer에 IP를 넣어서 local은 IP를 입력해서 실행하였다.