저는 모든 과정을 mac에서 진행했습니다.
다른 os는 과정이 조금 다른 것으로 알고 있습니다.
그 점 참고해주세요!

1. Nginx 준비✨

Nginx 설치

nginx가 설치되어있지 않다면 터미널에 다음 명령어를 입력하여 설치해야 합니다.

brew install niginx

Nginx로 클라이언트 프로젝트 띄우기

nignx를 설치하면 아래와 같은 경로에 여러 파일들이 생깁니다.

cd /usr/local/etc/nginx

nginx.conf 파일을 수정하고 저장해줍니다.

server {
        listen       8080;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   {nginx로 띄울 프로젝트의 build파일 절대경로};
            index  index.html index.htm;
            try_files $uri $uri/ /index.html =404;
        }

nginx로 프로젝트를 띄워보겠습니다.

brew services start nginx

만약 화면이 정상적으로 나오지 않으면 localhost 옆에 포트번호 8080으로 수정하면 정상적으로 나옵니다.

2. 도메인 준비🖥

도메인 발급

SSL 인증서를 적용하기 위해서 도메인이 필요합니다. 도메인이 없다면 준비해주세요.
저는 연습을 위해 무료 도메인을 발급받아 사용했습니다. 검색하면 무료 도메인을 발급받을 수 있는 사이트들이 몇 개 있습니다. 저는 내도메인.한국이란 곳에서 발급받아 연습했습니다.

도메인을 nginx에 연결

cd /usr/local/etc/nginx/nginx.conf

nginx.conf 파일을 수정하고 저장해줍니다.

server {
        listen       8080;
        server_name  {발급한 도메인을 입력};

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   {nginx로 띄울 프로젝트의 build파일 절대경로};
            index  index.html index.htm;
            try_files $uri $uri/ /index.html =404;
        }

3. SSL 인증서 발급📝

Cerbot 설치

Let's Encrypt SSL 인증서 발급은 Certbot을 사용하기 때문에 Certbot을 설치해야 합니다.

brew install certbot

인증서 받기

터미널에 아래와 같은 명령어를 입력하면 인증서 파일들이 생깁니다.

certbot certonly --manual --preferred-challenges=dns --email {your email} --server https://acme-v02.api.letsencrypt.org/directory --agree-tos --domain {your domain} --work-dir {work dir path} --config-dir {config dir path} --logs-dir {logs dir path}

저는 여기서 많이 헤맸는데 이 블로그의 도움을 많이 받았습니다. 맥에서는 명령어 옵션들을 하나하나 적어서 실행하면 잘 되더라구요.

도메인 TXT 인증

인증서를 받고 나면면 아래 처럼 DNS TXT를 줍니다.DNS TXT를 설정하기 위해 내가 구입한 도메인 관리 서비스로 들어갑니다(그냥 도메인 구입한 곳으로 들어가면 설정같은걸 하는 페이지가 있습니다). 도메인 관리 화면에서 서브 도메인에 certbot에서 만들어낸 서브 도메인명(_acme-challenge)를 입력하고 레코드 타입은 TXT로 선택합니다. 그리고 레코드 값 부분에 { DNS TXT }를 넣어줍니다.

Please deploy a DNS TXT record under the name
_acme-challenge. {your domain} with the following value:

{DNS TXT}

Before continuing, verify the record is deployed.

이 과정이 정상적으로 진행됐는지 확인하고 싶으시면 이 사이트에서 확인할 수 있습니다. 저도 검색으로 발견했습니다ㅋㅋ. Hostnames or IP addresses에 도메인을 입력하고 Type을 TXT로 맞춘 후에 Dig 버튼을 누르면 값이 정상적으로 오는지 확인할 수 있습니다.

4. Nginx와 SSL 인증서 연결🔗

ssl_dhparam 발급받기

한 줄씩 터미널에 입력해주세요.

sudo tcsh
cd {dhparam.pem파일이 저장될 경로 이력(--config-dir에 써준 경로와 같은 경로로 하는게 편합니다.)}
openssl dhparam -out dhparam.pem 2048

입력했던 경로로 이동하여 확인해보면 dhparam.pem파일이 있는 것을 확인할 수 있습니다.

Nginx.conf 수정

이제 --config-dir에 적었던 경로로 이동하면 인증서 파일(cert.pem, chain.pem, fullchain.pem, privkey.pem)들이 있는 것을 확인 할 수 있습니다. nginx에서 이 파일들을 찾을 수 있도록 nginx.conf를 수정해야 합니다. 이 코드는 OpenSSL과 nginx의 버전에 따라 조금씩 다르기 때문에 각 버전에 맞는 코드를 입력해야 합니다. 이 사이트를 이용하면 버전에 맞는 코드를 쉽게 찾을 수 있습니다.

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    ssl_certificate {fullchain.pem파일의 절대경로};
    ssl_certificate_key {privkey.pem파일의 절대경로};
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m; 
    ssl_session_tickets off;

    ssl_dhparam {dhparam.pem파일의 절대경로};

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;

    add_header Strict-Transport-Security "max-age=63072000" always;

    ssl_stapling on;
    ssl_stapling_verify on;

    ssl_trusted_certificate {chain.pem파일의 절대경로};

    resolver 127.0.0.1;
}

위의 사이트를 통해 찾은 코드를 nginx.conf에 넣어주고 {중괄호} 부분을 자신에게 맞는 정보로 수정하여 저장합니다.

5. Nginx에 SSL 적용 확인🎉

> brew services restart nginx

nginx를 reload한 후 사이트에 들어가게 되면 SSL이 적용되어 https가 된 상태를 확인할 수 있습니다.

---

맥, 리눅스, 윈도우 셋 다 세팅하는게 조금씩 달라서 삽질을 좀 했네요ㅠㅠㅠ
이번에 삽질하면서 다시 느꼈지만 블로그에 글을 적어주시는 분들 최곱니다.
모든 블로거분들 다 감사합니다✧｡٩(ˊωˋ)و✧*｡.