🚀 Vite + React 프로젝트를 GCP에 배포하기

Vite는 빠른 개발 환경을 제공하는 프론트엔드 빌드 도구입니다. 이번 글에서는 Vite + React로 제작한 프로젝트를 GCP 환경에 배포하는 과정을 단계별로 정리해보겠습니다. ✅

✅ 1. 패키지 설치 및 빌드

먼저, Vite 프로젝트의 패키지를 설치하고 빌드합니다.

	cd 프로젝트명
	npm install
	npm run build

위 명령어를 통해 dist 폴더가 생성됩니다. dist 폴더에는 배포할 정적 파일들이 포함됩니다.

✅ 2. gcloud CLI 환경 설정 및 SSH 키 생성

gcloud CLI란?

gcloud CLI는 GCP 인스턴스에 접근하고 관리하는 명령줄 도구입니다. SSH 키 생성, VM 인스턴스 접속, 파일 전송 등을 지원합니다.

1. gcloud CLI 다운로드 및 설치:

	gcloud auth login
	gcloud config set project <PROJECT_ID>

2. SSH 키 생성 및 접속:

• SSH 키 자동 생성

	gcloud compute ssh <INSTANCE_NAME> --zone=<ZONE>

~/.ssh/google_compute_engine 경로에 SSH 키가 생성되고 서버에 자동 등록됩니다.

• 기존 SSH 키 삭제 및 재생성:

	rm -f ~/.ssh/google_compute_engine*
	gcloud compute ssh <INSTANCE_NAME> --zone=<ZONE>

• 수동 SSH 키 생성:

	ssh-keygen -t rsa -f ~/.ssh/my-gcp-key

생성된 공개 키를 GCP Console > Metadata > SSH Keys에 추가합니다.

✅ 3. 파일 전송 (gcloud CLI vs SCP)

Vite + React 프로젝트의 dist 폴더를 GCP 서버에 전송하는 방법은 gcloud CLI와 SCP 두 가지 방식이 있습니다. 아래는 두 방법의 차이점과 각각의 명령어를 정리한 표입니다:

구분	gcloud CLI	SCP
사용 명령어	gcloud compute scp	scp
SSH 키 관리	자동 관리 (~/.ssh/google_compute_engine)	수동 관리 (-i 옵션 사용)
파일 경로	/home/<USERNAME>/frontend/	/home/<USERNAME>/frontend/
전송 방식	GCP CLI 내부 명령어로 전송	Linux, macOS 기본 명령어로 전송
명령어 예시	gcloud compute scp --recurse ./dist/ <INSTANCE_NAME>:/home/<USERNAME>/frontend --zone=<ZONE>	scp -i ~/.ssh/google_compute_engine -r ./dist/* <USERNAME>@<SERVER_IP>:/home/<USERNAME>/frontend/

✅ 권장 방법:

GCP 환경에 익숙하거나 프로젝트가 GCP CLI로 구성된 경우 gcloud CLI를 사용하는 것이 편리합니다.
SSH를 통해 수동으로 관리하거나, GCP CLI 환경이 없는 경우 SCP를 사용하는 것이 좋습니다.

• gcloud CLI로 파일 전송:

	gcloud compute scp --recurse ./dist/ <INSTANCE_NAME>:/home/<USERNAME>/frontend --zone=<ZONE>

• SCP로 파일 전송:

	scp -i ~/.ssh/google_compute_engine -r ./dist/* <USERNAME>@<SERVER_IP>:/home/<USERNAME>/frontend/

✅ 4. 서버에서 dist 폴더 이동 및 Nginx 설정

• 서버로 접속:

	gcloud compute ssh <INSTANCE_NAME> --zone=<ZONE>

• dist 폴더 이동:

	sudo mv /home/<USERNAME>/frontend/* /var/www/html/

• Nginx 설정 파일 열기:

	sudo nano /etc/nginx/sites-available/default

• Nginx 설정 추가:

	server {
 	   listen 80;
  	  server_name <DOMAIN_OR_IP>;

  	  root /var/www/html;
  	  index index.html;

  	  location / {
    	    try_files $uri $uri/ /index.html;
 	   }
	}

• 설정 저장 후 Nginx 재시작:

	sudo nginx -t
	sudo systemctl restart nginx

✅ 5. 배포 확인 및 로그 확인

• 웹 브라우저에서 접속:

  http://서버IP로 접속하여 배포된 Vite + React 앱이 정상적으로 표시되는지 확인합니다.

• Nginx 로그 확인:

	sudo tail -f /var/log/nginx/access.log
	sudo tail -f /var/log/nginx/error.log

이제 Vite + React에서 빌드한 dist 파일이 GCP 서버에 배포되었습니다!

이 과정에서 발생할 수 있는 에러나 추가적인 최적화 방법에 대해선 다음 글에서 다루도록 하겠습니다. 👍😊