AWS EC2/Ubuntu/Nginx 에서 Vue.js 배포하기

AWS EC2

• Amazon에서 서비스하는 가상 서버
• 하드웨어에 대한 투자없이 가상 개발환경을 통해 신속하게 개발하고 배포
• 화장이 용이한 컴퓨팅 용량 제공

Nginx

• 트래픽이 많은 웹 사이트를 위해 확장성을 고려하여 설계한 비동기 이벤트 기반 구조의 웹서버 소프트웨어
• Apache Tomcat과 같은 WAS 역할
• Event-Driven 방식. 적은 수의 쓰레드로 여러 요청 처리
• 대용량 요청 처리 유리
• 모듈 수가 적음
• 동적 컨텐츠 처리 X

배포 환경

• Server : Ubungu
• Front : Vue.js
• WAS : NginX

1. 키 접속

ssh -i /path/my-key-pair.pem ubungu@my-instance-public-dns-name

2. Nginx 설치

• apt-get update : 설치된 패키지들의 새로운 버전이 있는지 확인

$ sudo apt-get update

• apt-get upgrade : apt-get update 를 통해 최신 버전이 확인된 패키지들의 버전을 업그레이드

$ sudo apt-get upgrade

• nginx 설치

$ sudo apt-get install nginx

3. Nginx 환경 설정

• conf 파일 설정

$ cd /etc/nginx/sites-available
$ sudo vi default

• Frontend 설정

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

    root /var/www/html/dist;
    index index.html index.htm;
    server_name _;

    location / {
        try_files $url $url/ /index.html;
    }
}

4. 환경 설정 후 Nginx 시작

$ sudo systemctl start nginx

5. Vue.js 배포

• Vue.js 프로젝트를 배포하기 위해서 build 실행

$ npm run build

6. /dist 폴더를 server로 이동

• /dist -----> /var/www/html/dist

• 저는 FileZilla 와 같은 FTP 소프트웨어를 사용해서 옮겼습니다.

7. Nginx restart

$ sudo systemctl restart nginx