AWS EC2 Ubuntu Nginx Vue.js 설치

키 접속

ssh -i [.pem] ubuntu@my-instance-public-dns-name

1. NGINX 설치

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install nginx

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

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

install nginx : nginx 설치

 

2. NGINX 환경 설정

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

frontend 설정

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

    root /var/www/html/dist;		# Front 빌드 파일 위치
    index index.html index.htm;		# index 파일명
    server_name _;

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

 

3. 환경 설정 후 NGINX 시작

$ sudo service nginx start
// 또는
$ sudo systemctl start nginx

 

4. Vue.js 배포

$ npm run build

vue.js에서 실행하면 frontend에 dist 폴더가 생성됨

 

5. /dist 폴더를 server로 이동

Window cmd 창에서

scp -i [pem키가 들어있는 경로] -r [dist파일이 있는 경로] [ubuntu@my-instance-public-dns-name]:var/www/html

error > scp: /var/www/html/dist: Permission denied 일 경우 권한 주기

$ cd ~
$ sudo chown -R ubuntu:www-data /var/www/html
$ sudo chmod -R g+w /var/www/html/
$ cd /var/www/html/ # ls 를 통해 dist가 있는지 확인

 

6. NGINX restart

$ sudo service nginx start
// 또는
$ sudo systemctl start nginx

상태 확인

$ sudo service nginx status
// 또는
$ sudo systemctl status nginx

NGINX 끌 때

$ sudo service nginx stop
// 또는
$ sudo systemctl stop nginx