React+Vite nginx로 GCP VM(우분투)에 수동배포 하는 방법

우선 Github에 프론트엔드 소스코드가 있는 것을 전제로 하고 가겠습니다.

우선 VM을 준비합니다. GCP에서 VM을 생성 하고 SSH로 접근합니다.

그리고 git과 npm을 설치합니다.

sudo apt update
sudo apt install git -y

저희는 node버전 v23.11.0, npm 버전 v11.3.0이 필요하기 때문에 nvm을 설치해줍니다.

curl -o- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh> | bash
source ~/.bashrc

설치한 이후

nvm install 23.11.0

으로 23.11.0의 노드 버전을 깔아줍니다.

근데 npm 버전이 11.3.0으로 안깔려서 다음명령어를 통해 11.3.0 버전을 깔아주었습니다.

npm install -g npm@11.3.0

이제 준비는 다 되었습니다.

프론트엔드 레포지토리를 clone 해서 가져옵니다.

git clone <https://github.com/100-hours-a-week/17-newsum-fe.git>

그리고 여기에 저희가 사용하는 .env 파일을 넣어줍니다.

.env 파일을 넣어주는 경로는 프로젝트의 루트 디렉토리에 넣어줍니다. package.json이 들어있는 경로와 같은 경로입니다.

그리고 다음 명령어를 입력하여 의존성을 설치합니다.

npm install

이후 빌드합니다.

npm run build

그러면 루트의 dist 경로에 빌드 파일들이 올라갑니다. 이 경로를 잘 기억하고 있으시면 됩니다.

그 후 nginx를 설치합니다.

sudo apt install nginx -y

그리고 기본 nginx 설정 파일들이 생성되는데 이것들을 삭제해줍니다.

sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default

그리고 sites-available 경로에 따로 설정 파일을 만들어줍니다.

sudo vi /etc/nginx/sites-available/myapp.conf

그리고 다음 텍스트를 넣어줍니다.

server {
  listen 80;
  location / {
    root   {아까 기억한 빌드 파일 생성 경로}
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

그리고 이걸 sites-enabled 경로에도 넣어줘야 하는데 심볼릭 링크로 넣어줍니다.

이건 윈도우의 바로가기랑 비슷한데 sites-available의 파일의 참조 경로를 만드는 (C언어의 포인터?) 같은 역할이라고 생각했습니다.

sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/myapp.conf

이렇게 설정을 마치고 nginx를 재시작해주면

sudo systemctl stop nginx
sudo systemctl start nginx

VM의 IP를 브라우저에 입력해서 접속하면 배포가 완료된 것을 확인할 수 있습니다.

다음 블로그를 참조해서 작성된 글입니다.

https://tobegood.tistory.com/entry/Nginx로-React를-배포하기-우분투-환경

Nginx로 React 배포하기 (우분투 환경)

 

끝내고 든 생각

사실 깃허브에서 clone 받을 필요없이 환경변수가 적용된 로컬에서 빌드한 React build 파일을 VM에 올리고 nginx로 경로 수정만 해주면 띄워지는데, 이 방법이 좀 더 VM에 부하를 안주는 방법일 듯 합니다.

npm install을 하면 node_modules가 생기는데 이게 VM에 올라가는거 자체가 큰 부하이고, 굳이 소스코드가 VM에 들어가지 않는게 맞다고 생각이 듭니다. 환경변수도 VM에 두는게 말도 안되는 거라

테스트 용도로만 해보는 게 맞는 듯합니다.