[Vue.js] AWS(Ubuntu), Nginx 를 이용해 Vue 배포하기

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

 

프로젝트를 진행하며 AWS에 Vue를 배포하는데 굉장히 애먹었던 기억이 납니다.

특히 SSL(HTTPS)를 적용하는 방법을 찾는 데에 굉장히 많은 시간을 쏟았습니다.

하지만 오늘은 Ubuntu에 Nginx를 이용해 Vue를 배포하는 방법에 대해 소개하려고 합니다.

어쨌든 알짜배기만 모아 배포하는 방법을 소개하려고 합니다!

 

그래서 오늘은 AWS(Ubutnu)에 Nginx를 이용해 Vue를 배포해보겠습니다!

 

[기본조건]

저는 AWS에서 (Ubuntu 18.04) 인스턴스를 생성했습니다.

또한 Vue 사용방법 대략적으로 안다는 가정하에 진행하겠습니다.

 

 

1. ubuntu Nginx 설치

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

- sudo apt-get update : apt-get의 새로운 버전이 있는지 확인

- sudo apt-get upgrade : apt-get를 새로운 버전으로 upgrade

- sudo apt-get install nginx : nginx 설치

 

(여기서 apt은 우분투의 패키지매니저라고 생각하면 된다. vue의 npm같은 존재라고 생각하면 된다)

 

 

2.Nginx 잘 구동 되는지 확인하기

1. nginx status 확인

# sudo service nginx status

위의 명령어를 입력하면

nginx가 잘 돌아가고 있는 모습

이런식으로 돌아가는 모습이 보입니다.

그리고 해당 AWS public DNS 를 주소창에 입력하면!

nginx가동중

이런 창이 뜬다면 Nginx이 잘 구동되고 있다는 뜻입니다!

 

2. 안되는데요...?

혹시 AWS 보안규칙에 HTTP를 추가하셨나요?

AWS 홈페이지 Console로 들어가셔서 [네트워크 및 보안>보안그룹] 에 들어가셔서

해당 인스터스를 클릭후, 하단에 [인바인드규칙]를 편집해주세요!

인바이드 규칙 편집

저는 HTTPS도 사용할 예정으로 미리 열어뒀습니다.

 

3. vue dist폴더 생성

해당 프로젝트 경로에서 

npm run build

을 입력하면 dist 폴더를 생성할 수 있습니다. 

저는  /var/www/html 폴더에 dist 폴더를 옮겨 놨습니다.

 

 

4. nginx 설정

1. default 파일 살펴보기

/etc/nginx/sites-available/

이 위치에 Nginx설정을 위한 파일 default가 있습니다. 한번 살펴볼까요?

(vim 사용법을 모른다면 "vim 사용법"을 검색해보세요)

$ sudo vim /etc/nginx/sites-available/default

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

	root /var/www/html;

	index index.html index.htm index.nginx-debian.html;

	server_name _;

	location / {
		try_files $uri $uri/ =404;
	}
}

대략적으로 80포트를 사용하여 /var/www/html/index.html 을 렌더링하고 있다는 뜻입니다.

 

2. VueProject 실행하기

그럼 /var/www/html/dist에 있는 Vue Project를 실행시켜 볼까요?

$ sudo vim /etc/nginx/sites-available/default

해당 defalut파일을 위의 명령어를 열어 아래와 같이 수정합니다.

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


        root /var/www/html/dist;

        index index.html;

        server_name _;

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

저장한 후, 설정을 반영하려면 nginx를 다시 실행시켜줘야 합니다.

$ sudo service nginx restart

그리고 다시 AWS public DNS으로 들어가면

vueProejct가 나왔다!

이런식으로 성공하게 됩니다!