[AWS/EC2] EC2에서 React Vite 실행하기 / 배포🗙 실행⭕

이번에 런칭하는 프로젝트는 프론트로 아래 스펙을 사용한다.

백은 몽고와 express 사용 중, 배포는 nginx로 확장 구축할 예정이다.

 

 

 

 

현재 프론트 서비스 스펙

환경 : node:16
WAS : nginx
Web Framework : React
Language : Typescript

nginx는 실제 운영할때 사용할 배포 스펙이기 때문에 개발 테스트용으로 실행해야 했다.

 

 

 

 

 

Problem

하지만 나는 docker를 사용중 .. !! 아래 Dockerfile을 사용해 실행하고자 하니 자꾸 에러가 났다.

docker를 사용하면 한 instance안에서 이것저것 실행할 수 있어서 확실히 편하다. (용량 빵꾸만 나지 앟는다면)

아래 CMD 부분을 ["npm", "run", "dev"]로 변경해도 효과는 동일

 

 

 

 

 

VITE?

열심히 구글링 해보았지만 vite를 사용하는 사람이 많이 없는지 결과가 잘 나오지 않았다.

 

vite는 참고로 react의 여러옵션을 사용하여 프로그램을 구축할때 편리하게 세팅을 도와주는 친구다.

 

https://positiwise.com/blog/how-to-install-vite-js-on-your-computer/

보통 typescript로 구축을 하려면 npx --language=typescript처럼 뭔가 옵션을 줘야 했는데 vite는 npm create vite만 입력하면 알아서 여러 옵션을 보여주고 선택하게 해준다.

 

 

 

 

그래서 보통 react를 실행하면 npm start라는 명령어를 사용하지만 vite는 npm run dev라는 명령어를 따로 사용해야 한다.

 

 

 

 

 

Solution

docker logs [docker container name]

위 명령어를 사용하면 해당 컨테이너가 토해낸 에러들을 볼 수 있다.

 

 

 

 

use --host to expose to network

위와 같은 에러 발견 .. !! 구글 검색 ㄱㄱ

 

https://github.com/vitejs/vite/discussions/3396

How to expose 'host' for external device display? · vitejs/vite · Discussion #3396

 

 

 

 

 

vite.config.ts일을 찾아서 위처럼 수정해 주었다. 서버를 실행할때 설정이 몇가지 더 필요한 것 같았다.

 

vite는 3000이 아닌 포트를 사용하고 있는데 나는 3000으로 사용하고 싶어서 위처럼 노출 시켰다.

 

 

 

 

 

http로 연결 완료.

 

cloudflare로 연결하여 https연결로 우회하려고 했지만 back과 연결이 잘 안되서 nginx로 수정 배포하기 위해서 작업하는 중이다.

 

 

 

 

 

배포도 성공하면 다시 오겠다.

 

그럼 20000.