Vue.js 프로젝트를 Nginx에 배포하기

(막혔던 점)

로컬에서 Vue 프로젝트를 실행했을 때는 단순 `npm run dev'를 통해서 실행을 했다.

따라서, AWS 환경에서도 `npm run dev`를 실행 후, 기본 포트인 5173에 대한 AWS Inbound 규칙을 설정해주면

공인IP를 입력했을 때, 연결이 될거라고 생각을 했었다.

 

웹서버(Apache, Nginx ...)를 띄워 그 안에서 vue 프로젝트를 실행시켜야 접속이 가능하다는 것을 잊고 있었다..!

---

※Amazon Linux 기준으로 작성

1) Nginx 설치

sudo yum install nginx -y

2) Nginx 재기동 및 상태 확인

sudo systemctl restart nginx
sudo systemctl status nginx

IP 접속을 하게 되면, 아래와 같이 잘 연결되는 것을 확인할 수 있음!

3) Vue Project를 빌드 후 화면에 띄우기

우선, Vue Project 폴더로 들어간 후 `npm run build`를 실행하자.

그럼 dist라는 폴더가 생겼을 것이다.

 

해당 폴더를 /var/www/html/ 하위로 이동시켜주자. ( sudo mv dist /var/www/html )

그리고 이제 nginx 설정 파일을 수정해줘야한다.

/etc/nginx/nginx.conf 파일을 열고 아래와 같이 내용을 수정해준다.

이후 `sudo systemctl restart nginx`를 통해 재기동을 해주고 IP로 접속을 해보면

이렇게 정상으로 뜨는 것을 확인할 수 있다!