[TIL] 도메인 적용 방법 + HTTP에서 HTTPS로 전환 방법 [Nginx, 내도메인한국, Zerossl]

개요

https://develop-706.tistory.com/29

Vue + Nginx : EC2에 배포하기

 

지난 포스팅으로 AWS - EC2 위에 제가 만든 Vue 프로젝트를 배포한 바 있습니다.

해당 포스팅에서는 인증서 보안이 걸려있지 않아 HTTP 로 배포가 되었으며,

고유적인 도메인 또한 없어 IP 를 치고 들어가야하는 불편함이 있었습니다.

 

해당 포스팅에서는 지난번 포스팅에 이어, 내도메인한국 사이트 + zerossl 을 통해서 도메인을 생성한 후 

해당 도메인을 배포한 저의 EC2 에 적용해보겠습니다.

 

 

1. 내도메인 한국에서 도메인 생성

내도메인 한국 바로가기

https://xn--220b31d95hq8o.xn--3e0b707e/

 

 

 

먼저 해당 사이트에 접속해서, 원하는 도메인을 생성합니다 !

저는 test-domain-706com.kro.kr 이라는 도메인을 생성하고, 후에 나오는 보안코드 인증을 거쳐 도메인을 생성하겠습니다.

 

이제 하단과 같은 창이 뜬다면 성공입니다! 

저희가 채워야 할 내용은,  아래 빨간 네모들 임을 기억하시면 됩니다!

 

 

 

여기까지 따라오셨으면, 잠시 내도메인 한국 사이트는 미뤄두고 

 

Zerossl 사이트로 가서, 인증서를 발급해야합니다.

 

Zerossl 사이트 바로가기

https://zerossl.com/

 

해당 사이트에서 회원가입 및 로그인을 마치셨다면 New Certificate 에서 인증서를 발급받아봅시다!

 

1. 이전에 내도메인한국에서 받았던 도메인 이름 입력.

2. 만일 앞에 www를 쓸 것이면, www 안붙은것 삭제. 

   - 저는 www 를 안쓸 것 이기 때문에 뒤에 www가 붙은것을 삭제하겠습니다!

 

- 과금을 하지 않게 하기 위해 1년 (PRO가입) 이 아닌, 3개월짜리 인증서를 선택해서 발급!

 

- 한 계정당 3개까지 무료가 가능한 Free 선택!

 

그 이후에는 딱히 과금과 크게 신경쓸 것이 없으니 넘어가시면 됩니다! 

 

 

CName 발급

해당 창까지 넘어왔다면 성공입니다!

이제 DNS (CNAME) 을 클릭해서 Name 과 Point To 를 "복사" 해주시면 됩니다! 

해당 내용이 [ 내도메인한국 ] 의 도메인 설정으로 들어갈 내용입니다.

 

 

내도메인한국으로 다시 돌아와서. 

아까 적용하다가 잠시 미뤄뒀던 DNS 파트에서 IP와 함께, 해당 NAME 과 Point To 내용을 채워야합니다.

내용을 채웠으면 [ 수정하기 ] 를 누르고 , zerossl 에서 인증서 발급을 완료 합시다!

 

Zerossl - Certificate zip 파일 다운로드 

내도메인한국 수정 및 적용이 완료되었으면 zerossl 에서 진행을 마무리 하시면 됩니다! 

무난히 적용이 된 후 next step 을 누르셨다면, Certificate 를 다운로드 할 수 있는 창까지 이동이 될 것 입니다.

여기서 Certificate zip 파일을 다운받아주세요!  (zerossl 은 이제 닫으셔도 됩니다.)

 

도메인이 잘 적용되었는지 확인

SSL 인증서는 아직 적용이 되지 않았지만, 도메인이 잘 적용되었는지 확인하려면, 

도메인을 적용했던 IP의 서버를 키고, 포트번호를 입력해서 실험해보시면 됩니다.

 

저는 3000번대로 vue project 를 실행시켰더니 잘 적용이 된 것을 확인해볼 수 있었습니다.

중간에 Invalid Host header 이슈 발생 및 해결

이슈

 

처음 도메인을 vue project에 적용해봤을때 해당 Invalid Host header 이슈를 마주할 수 있었습니다.

문제는 webpack-dev-server가 호스트 검사를 추가했기 때문에 발생합니다.

 

vue.config.js 구성에 

allowedHosts : "all" 을 추가하시면 해결가능합니다!

 

다만, 어차피 nginx에서 HTTPS 로 전환시킬 것이기 때문에, 잠깐 확인용으로만 쓰시고 다시 설정은 지워주셔도 됩니다!

 

 

Invalid Host header 가 떠도, 잘 적용이 되었다고 판단하셔도 좋습니다.

 

 

Nginx 로 Https 적용하기

다운받은 Zip 파일 내용 확인

다운받은 압축폴더를 압축 해제하게 되면 다음과 같은 3개의 파일을 확인할 수 있을텐데, 

여기서 저희가 nginx 에게 인증서를 적용시킬 파일이므로, 해당 파일들을 잘 보관해주세요!

 

EC2 에 접속하여 Nginx 폴더로 접근 후 인증서 옮기기 ( /etc/nginx )

저는 [ Moba-Xterm ] 이라는 프로그램을 사용해서, 드래그앤 드랍으로 옮겼으나,

각자 편한 방법으로 (scp, putty, filezilla 등) 해당 /etc/nginx 폴더로 해당 인증서들을 옮겨주세요.

 

 

sites-availabel - default 파일 수정

아마 default 파일에는 80 포트로 들어올 때에 대한 내용만 있을텐데, 

하단에 443 포트로 들어올때의 내용을 80 포트쪽 server { 내용 } depth에 맞게 적용시키면 됩니다.

 

해당 내용은 

443 포트로 들어왔으며 ( Https:// ) 

본인 도메인 명을 치고 들어왔을 때 

 

ssl 로 적용시켰음을 인증하는 내용입니다.

 

그 외 하단은 제가 이전 프로젝트에 적용시켰던

vue project 에서 활용한 내용임으로 필요하신 분만 활용하시면 됩니다!

 

ssl 적용의 핵심은 주석 코드 기점으로 위 쪽 입니다.

 

server {
#   listen 443 ssl;
  listen 443;
  listen [::]:443;
  server_name  test-domain-706com.kro.kr;
  
  ssl on;
  ssl_certificate      certificate.crt;
  ssl_certificate_key  private.key;
  

# 하단은 vue project를 띄우기 위한 내용들

#  root /var/www/html/dist;
#  index index.html index.htm index.nginx-debian.html;

#  location / {
#	try_files $uri $uri/ /index.html;
#  }

# 하단은 /backend 로 요청주소를 보내줬을 때 프록시를 통해 요청을 보내주는 내용들

#  location /backend {
#	rewrite ^/backend(.*)$ $1 break;
#	proxy_pass 백엔드 IP 주소;
#	proxy_set_header Upgrade $http_upgrade;
#	proxy_set_header Connection 'upgrade';
#	proxy_set_header Host $host;
#  }
}

 

 

설정이 바뀌었으니 nginx 재실행 

오탈자 및 설정 확인
nginx -t


nginx 재실행
systemctl restart nginx

 

 

EC2 에 보안그룹 설정 (인바운드 규칙 추가)

마지막으로 EC2 보안그룹에서 인바운드 규칙 HTTPS : 443 포트를 허용해주시면 됩니다

 

 

보안그룹까지 설정되었다면 HTTPS 설정 완료!