Intro

---

따라잡기

시행착오가 많았던지라 이 포스팅에서 누락된 환경 설정들은 제 이전 포스팅을 참고해주세요
https://velog.io/@jinvicky/macmini-nginx
https://velog.io/@jinvicky/port-forwarding-ddns-cors
https://velog.io/@jinvicky/purchase-apply-domain
https://velog.io/@jinvicky/nginx-config-loccal-domain

아래 포스팅에서 재도전해서 성공했습니다.
📃 windows 환경에서 local https 테스트 https://velog.io/@jinvicky/zerossl-windows-local-https

도메인 레코드 변경하기

---

저번 포스팅에서 DDNS 설정에 문제가 있다는 힌트를 얻었습니다.
곰곰이 생각해 보다가 스치듯이 맨 처음에 도메인 설정할 때 따라했던 블로그가 생각났습니다.

🍯 개발자 준생 https://blog.naver.com/cjs0308cjs/223369504454

(캡처 문제 시 삭제하겠습니다. 이 블로그 도움 진짜 많이 되었어요)

도메인 구입부터 설정을 이 블로그를 보면서 했는데 이 와일드카드 설정을 당시에 이해 못해서 www 라는 호스트명만 등록했는데 저도 아래처럼 다시 추가하고 퇴근했습니다. (시간이 좀 걸리기도 해서 몇 시간 냅뒀습니다)

저의 총 도메인 레코드는 이렇습니다.

@ 은 루트 도메인에 DDNS를 적용할 수 있습니다. jinvicky.shop으로 접근할 수 있습니다.
* 은 서브 도메인을 지원합니다. www.jinvicky.shop로도 접근 가능하게 합니다.

@ 의 경우 유형이 ALIAS입니다. 케이알호스팅 문의게시판을 찾아보았더니 ALIAS 유형을 사용하려면 클라우드 네임서버를 적용해야 하네요.

네임서버를 기본에서 호스팅케이알 Cloud로 변경해줍니다. (과금 없는 무료 변경입니다)

변경된 화면입니다.

한숨 자고 일어나서 nginx 설정을 다 밀고 기본 화면부터 다시 시작합니다.

Nginx 설정

맨 처음은 이전 포스팅 nginx.conf 에서 시작합니다.
그냥 ssl 파일 경로는 누구나 아는 Downloads 폴더에 넣었습니다.

 ssl_certificate      /Users/namgungjin/Downloads/ssl/certificate.crt;
 ssl_certificate_key  /Users/namgungjin/Downloads/ssl/private.key;

brew가 좀 시원찮다

분명히 테스트 다 되는 config를 복붙했는데? 반영이 안되는 것 같다는 생각에 brew services 명령어 대신 sudo nginx 를 사용했더니 화면이 뜨기 시작합니다.

sudo nginx -s reload

오 https://locahost로 접속했더니 화면이 뜹니다.🎉

redirect 설정

http로 접속했을 때 https로 리다이렉트하는 설정을 추가합니다. jinvicky.shop을 사용하시는 도메인을 바꿔주세요

location / {
            return 301 https://jinvicky.shop$request_uri;
}

이제 http://localhost로 접근하면 https://jinvicky.shop으로 이동합니다.

Front-End, Back-End 프로젝트 리버스 프록시 설정

기존 프로젝트들의 리버스 프록시 설정을 추가합니다.
설정 순서가 조금 덜 정리되었지만 proxy_pass와 헤더를 필요에 따라 참고해서 조합합니다.

location / {
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;

            proxy_set_header Host $host;

            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header X-Real-IP $remote_addr;
        }

location /api {
            proxy_pass http://localhost:8080;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_cache_bypass $http_upgrade;
		}       

이제 드디어 ssl이 적용된 제 웹사이트를 만났습니다.

전체 nginx.conf 본문을 올립니다.

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
        root html;

        location / {
            return 301 https://jinvicky.shop$request_uri;
        }

        location ~^/.well-known/pki-validation {
            allow all;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    server {
       listen       443 ssl;
       server_name  jinvicky.shop;

       ssl_certificate      /Users/namgungjin/Downloads/ssl/certificate.crt;
       ssl_certificate_key  /Users/namgungjin/Downloads/ssl/private.key;

       ssl_session_cache    shared:SSL:1m;
       ssl_session_timeout  5m;

       ssl_ciphers  HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers  on;

        location / {
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;

            proxy_set_header Host $host;

            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header X-Real-IP $remote_addr;
        }

        location /api {
            proxy_pass http://localhost:8080;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_cache_bypass $http_upgrade;
        }

    }

}

ssl은 제가 만든 폴더입니다. 꼭 certificate.crt 파일 내용 합치기를 먼저 해야 합니다.

쿠키 테스트

사실 이 모든건 다 쿠키 테스트를 위해서였습니다(??!)
제가 쿠키와 ssl에 한 10일 이상 소모한 것 같지만 이 썰은 다음에 풀고 before & after를 공개합니다.

Before

기존 http://jinvicky.shop에서는 쿠키가 새로고침 시 사라지는 이슈가 있었습니다.

응답 헤더에 hover 했을 때 뜨는 경고창 내용을 보면

Set-Cookie header was blocked because it was not sent over a secure connection and would have overwrittten a cookie with the Secure attribute;

전 대충 https 환경이 아니라 그렇구나로 이해했습니다. 쿠키의 secure 옵션의 있/없 여부 상관없이 그냥 쿠키가 새로고침하면 사라져요. 이 때쯤 또 구질구질한 로컬호스트에서는 안 그랬는데? 말이 나옵니다 🥲

After

더 이상 새로고침을 해도 쿠키가 사라지지 않습니다.

또한 Set-Cookie 헤더 옆에 있던 경고 아이콘이 말끔히 사라졌습니다.

이 경고 아이콘을 제대로 볼 생각조차 못했다가 동료가 발견해준 덕분에 ssl도 앞당겨서 진행하고 쿠키 확인도 했습니다.

https://velog.io/@dionisos198/스프링-프론트-쿠키가-사라지는-현상-정리
🤔 위 블로그는 쿠키 이슈를 다르게 해결했지만 이 블로그에서 경고 아이콘을 없애기 위해 노력했던데? 저 경고 아이콘를 없애면 쿠키가 유지되지 않을까?

Outro

---

아 정말 힘들었어요..... 진짜로... ssl 인증서만 롤백하고 반복하고 롤백하고 반복하고 플로우 파악하겠다고 그림 수십개 그리고 안된다고 짜증도 엄청 내고ㅋㅋㅋㅋㅋ 때려칠까 돈 주고 사버려? 고민하다가 가격 때문에 음...하고 다시 블로그 찾고...

앞으로 zerossl 무료 플랜 좀 쓰다가 달에 10달러 내고 basic 플랜으로 갈아탈 것 같아요.
(ssl 바꿔서 그거 또 적응/적용하는 것도 일이니 그냥 이거 돈 주는 게 시간 세이브)

근데 전 개발하고 그리는 것, 뭔가를 만들어내는 행위 자체가 너무 즐겁고 행복합니다.
실패하더라도 뭔가를 하나 만들어봤다는 창작 경험을 좋아하고 그 경험들이 너무 좋았어서 남겨두고자 블로그를 작성합니다.

읽어주셔서 감사합니다.

jinvicky
Front-End, Back-End Developer / SD Illustrator
✉️ Email: jinvicky@naver.com
💻 Github: https://github.com/jinvicky
🍏 Blog: https://velog.io/@jinvicky/posts
🌟 Website: https://jinvicky.shop