https 적용 - boostcampwm-2022/web33-Mildo GitHub Wiki

✂️ 분배된 이슈

  • https 적용(#32)

🚩 구현 목표

  • Mildo에 https 적용하여 사용자 위치 추적 기능 구현

🍀 세부 목표

  • domain 구매
  • ssl 인증서 구매
  • nginx에 https 적용
  • 네이버 지도 api, 네이버 Oauth 주소 변경
  • 서버 요청을 proxy 설정

🖥️ 구현 내용

도메인 적용하기

  • godaddy에서 [mildo.live](http://mildo.live) 도메인 구매 완료

  • godaday에서 [mildo.live](http://mildo.live) 도메인 dns 연결을 우리 ip 118.67.143.49로 설정

    • 내 제품 - dns 레코드

    다운로드.png

  • 배포 서버의 nginx에서 도메인 적용

    • /etc/nginx/sites-enabled/default.conf에서 server name을 아래와 같이 적용

      nginx.PNG

    • 네이버 지도 api에서 도메인을 허용 후 nginx 재시작하면 도메인 적용

      캡처.PNG

  • 어김없이 cors에러 발생

    • 백엔드의 .env의 client url을 도메인으로 변경하여 해결
    • https 적용 후 다시 변경해야해서 github actions secret을 일단 냅둠

    cors 에러.PNG

  • ip 주소에서 도메인으로 리다이렉트 시키지 않으면 ip 주소로도 접속이 되고 ip 주소에서는 cors에러가 계속 발생하므로 리다이렉트 시켜줘야함

    • /etc/nginx/sites-enabled/default.conf에서 server{} 를 새로 하나 아래와 같이 만든다

      리다이렉트.PNG

https 적용하기

  • letsencrypt ssl 인증서를 받기 위한 certbot 설치
    • 우분투에 인증서를 받기 위한 certbot은 여러 개가 있는데 그냥 아래거 사용함
$ sudo add-apt-repository ppa:certbot/certbot
$ sudo apt-get install python-certbot-nginx

  • sudo certbot --nginx -d 자신의도메인 입력하면 뭐 또 입력하라고 나오는데 대충 동의하고 인증서 설치

    • 설치 경로는 /etc/letsencrypt/live/www.mildo.live/ 인증서 pem과 key pem 다 들어 있음

  • /etc/nginx/sites-enabled/default.conf에서 기존 http 연결을 아래와 같이 설정하여 https 연결로 바꾸기

  • 프로토콜이 달라 Mixed Content 에러 발생

    • https에서 http로 요청하면 에러가 발생하니 proxy 설정을 해줘야함

    cors2.PNG