본문 바로가기

Front/Vue.js

[Vue.js] AWS(Ubuntu)에 HTTPS로 배포하기

안녕하세요? "태민"입니다.

지난 시간에는 Vue.js를 HTTP로 배포하는 방법을 알아봤다면

오늘은 HTTPS로 배포하는 방법을 알려드리고자 합니다.

우선 시작하기 전에

 

2020/04/30 - [Front] - [Front] SSL, HTTPS가 뭐지?

 

[Front] SSL, HTTPS가 뭐지?

안녕하세요? 개발자 "태민"입니다. 지금 개발중인 프로젝트에서 [KAKAO MAP API]를 사용하고 있습니다. 그런데 위치권한과 API를 사용하는데에 HTTPS 환경에서만 가능하다고 합니다. 그래서 HTTPS는 무엇이고, HTT..

dev-taem.tistory.com

이 글을 읽으신다면 내용이 좀 더 이해가 잘 될 것 같습니다.

 

5. 무료 인증서 발급받아 HTTPS 적용하기

우리는 Lets's Encrypt 에서 무료 인증서를 발급받을 겁니다! 

하지만 발급과정이 복잡할 수 있는 사용자를 위해 발급을 자동화해주는 프로그램이 있습니다.

바로 certbot 입니다.

$ sudo apt-get update
$ sudo apt-get install software-properties-common 
$ sudo add-apt-repository universe
$ sudo add-apt-repository ppa:certbot/certbot  #입력 후 Enter
$ sudo apt-get update
$ sudo apt-get install python-certbot-nginx 

그리고 다시 default(/etc/nginx/sites-available/default)파일의 설정을 바꿔줍니다.

server { 
    server_name {{도메인이름}}
     
    location / { 
      root /var/www/html/dist/; 
      index index.html
      try_files $uri $uri/ =404; 
    } 
}

** 참고로 아마존에서 자동으로 발행되는 AWS public DNS으로는 인증서 등록을 할 수 없습니다 **

 

$ sudo certbot --nginx -d {{도메인이름}}

명령어 입력 후, [이메일입력] -> [A] -> [Y] 을 입력하여 약관동의를 한다면

선택창이 뜨게 되는데 1을 선택하면 리다이렉트하지 않고, 2를 선택한다면 리다이렉트 됩니다.

(저는 2를 선택했습니다.)

 

그러면 자동적으로 default가 SSL 정보와 함꼐 갱신됩니다.

(인증서 관련 파일은 /etc/letsencrypt/live/[도메인이름] 에 저장되어 있습니다.)

$sudo service nginx restart

를 통해 다시 nginx를 실행시켜준다면 https로 뷰를 실행 시킬 수 있습니다!

 

 

 

안녕하세요!

저는 초보 개발자 "태민"입니다.

사실 우분투나 뷰에 익숙하신 분들은 그리 큰 내용이 아니라고 생각할 것 같습니다.

하지만 처음 다뤄보는 내용이라 Vue를 배포하는 과정에 굉장히 많은 시간을 할애했습니다.

배포 하나를 위해서 구글링, 지인에게 물어보기 등을 하면서 

꼭 이 내용을 블로그에 이해하기 쉽게 올려서 저같은 사람들 도와줘야겠다. 라는 생각이 들어

이렇게 포스팅 합니다.

 

최대한 친절하게 설명하려고 노력했지만, 블로그 쓰는 것도 굉장히 초보기 때문에

어떠시련지 모르겠습니다. 

 

혹시라도 틀린 내용이나 수정하고 싶은 부분이 있다면 댓글 부탁드립니다!