AWS EC2 서버에 Nginx를 이용해 Vue 배포하기

1. 전제조건

이미 생성한 AWS EC2 (Ubuntu 18.04) 인스턴스가 있음.

샘플 Vue 프로젝트가 있음.

 

 

 

2. Nginx설치

$sudo apt update
$sudo apt upgrade
$sudo apt install nginx

- sudo apt update: 설치 가능한 패키지 리스트를 최신화 한다.

- sudo apt upgrade: 설치 가능한 패키기를 실제로 업데이트 한다.

- sudo apt install nginx: nginx를 설치한다.

 

 

 

3. Nginx 설치 및 실행 확인

아래의 명령어를 입력하여 nginx서비스의 상태를 확인한다.

$sudo service nginx status

 

정상 상태라면, 다음과 같이 출력됨을 볼 수 있다.

 

 

그리고 해당 AWS public IP를 주소창에 입력하면 아래와 같이 페이지가 뜬다.

 

만약 위의 페이지가 뜨지 않는다면, 다음과 같이 한다.

 

AWS 콘솔로 접속하여, 실행중인 서비스의 보안규칙 설정을 한다. 

"네트워크 및 보안" -> "보안 그룹" 으로 들어가서 해당 인스턴스를 클릭 후, 하단의 "인바인드 규칙"을 편집해 준다.

HTTP를 사용한다면 유형에서 "HTTP"를 선택하면 자동으로 80번 포트(TCP)로 선택이 된다.

(HTTPS도 사용할 예정이라면, "HTTPS" 유형의 항목도 추가해 준다.)

 

 

위와 같이 설정 후 저장한다.

 

 

4. vue dist폴더 생성

Vue프로젝트로 들어가서 아래 명령어를 실행하여 프로젝트를 빌드한다.

$npm run build

 

빌드가 끝나면, 아래와 같이 dist폴더가 생성됨을 확인할 수 있다.

 

이제 AWS EC2서버에 접속하여, 아래의 경로에 해당 dist/ 폴더 전체를 옮긴다.

 

 

5. Nginx 설정

 

/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을 렌더링 하고 있다는 뜻이다.

 

 

그럼 위에서 옮긴 /var/www/dist에 있는 Vue Project를 실행시켜 보자.

default의 파일 내용을 아래와 같이 수정해준다.

root 는 대상 파일의 경로를 적어주고,

index 는 대상 index.html 파일명을 적어준다.

location / -> try_files 의 내용도 /index.html과 같은 식으로 연결시켜 준다.

 

server_name 디렉티브는 하나의 IP 주소에 대해 여러개의 도메인(domains)을 사용할 수 있게 한다. 서버는 전달받은 요청 헤더(request header)에 기반하여 어떤 도메인을 서브할지 결정한다.

일반적으로 호스트하고자 하는 하나의 도메인 또는 하나의 사이트당 하나의 파일을 생성한다. 따라서 연결할 도메인을 아래와 같이 적어주면 된다. 

 

server {
      . . .
    server_name   example.com;
      . . .
}

 

 

 

설정을 저장한 후, 반영하려면 nginx서비스를 다시 실행시켜야 한다.

$sudo service nginx restart

 

 

 

6. 배포 확인

 

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

 

이런식으로 내가 만든 Vue 웹페이지가 배포가 완료됨을 확인할 수 있다!

 

 

 

---

#References

http://nginx.org/en/docs/http/server_names.html

Server names