[vue 배포] vue cli build하여 lightsail에 nginx 연동해서 운영에 배포하기

* 목표, nginx 적용 이유

lightsail 인스턴스에 vue cli로 build된 프로젝트 올리기

처음에 배포 자동화가 목적이었지만 우선 개념이 안잡혀있기 때문에 그나마 쉬운 방법으로 가려고 한다..

 

local에서도 그랬듯이 lightsail 서버에서 npm run serve로 build하면 바로 http://{해당ip}:{실행port} 로 접속되는 거 아닌가 하고 똑같이 실행시켜보았다.

하지만 build하던 도중 outof memory가 발생한다.. 이유는 모르겠다. build 하는데 RAM 용량을 그렇게 크게쓰나?

 

인스턴스 설정에서 용량을 늘릴 바에 다른 반영방법을 찾던 도중 nginx와 연동해서 올리는 방법을 찾았다.

 

 

------------------------시작 및 단계------------------------

 

 

1. project build하기

 build를 하면 프로젝트 최상위 경로에 dist 폴더가 생성된다.

 

2. build된 dist를 dist.zip으로 압축하여 lightsail 인스턴스 서버에 보내기

dist.zip 파일은 편한 경로에 옮겨놓으면 된다. (필자는 ~/temp 아래에 옮겨놓았다.)

참고로 sftp는 filezilla, ssh 연결은 xshell을 이용하였다. lightsail에 자체 ssh가 있어 편리하지만 자꾸 명령어가 안써지길래 열받은채 결국은 xshell을 실행시켰다..

 

3. dist로 압축풀기 (해당 경로에서)

※참고 : 여기서 나는 nginx를 실행시키고 나서 화면에 아무것도 안뜨길래 개발자도구로 확인해보니 빌드 관련 setting인 vue.config.js에 process.env.NODE_ENV 이쪽에 경로가 이상하게 설정되어 있었다. 따로 경로를 정해주어야하는 경우가 아니라면 기본경로로 설정한다.

아래와 같이 주석처리를 하고 기본경로로 설정했다. 저부분은 process.env.NODE_ENV = "/",와 같다.그냥 귀찮아서 저렇게 되어있는 것임.

 

이제 nginx를 설치하고 nginx가 dist 경로를 가리키게 만들어야한다.

4. nginx 설치

-- 패키지 최신버전 관리

$ sudo apt update

$ sudo apt upgrade

-- nginx 설치

$ sudo apt-get install nginx

 

 

이렇게 설치하면 자동 start되고 운영서버ip를 치고 접속해보니 아래와 같이 nginx main화면이 뜬다.

5. nginx 설정 변경

설정 변경할 때는 /etc/nginx/sites-enabled의 default 파일을 변경하면 된다.

/etc/nginx/sites-available/default를 수정 후에 /etc/nginx/sites-enabled/default에서  심볼릭링크를 걸어주는 방식으로 해도 된다.

나는 /etc/nginx/sites-enabled/default를 직접 수정하는 방식으로 진행했다.

그냥 vi default로 하면 권한문제로 수정이 되지 않는다.

$ sudo vi default

여기서 내용을 수정한다. ( 세미콜론을 안넣어주면 실행 중 오류발생하니 신경쓸것 !)

server {
	listen 80 default_server;
    listen [::]:80 default_server;
    
    root /home/bitnami/temp/dist; #dist파일 경로
    index index.html; #실행파일
    
    server_name _;  #_가 local을 뜻하는듯 (ip나 도메인을 넣어도 됨)
    
    location / {
    	try_files $uri/ =404;
    }
}

 

6. nginx 재실행 명령어 실행

$ sudo systemctl restart nginx

 

이렇게 하고 ip로 접속하니 내 프로젝트가 보여진다.

 

 

 

참고: jay-ji.tistory.com/57?category=870634