[빌드 및 배포] fontend - vite 환경에서의 배포

vite 환경에서의 배포에 대해서 다뤄볼 것이다.

 

1. Vite 프로젝트 빌드

 

npm run build

dist 폴더가 생성된다.

---

 

2. 서버에 NGINX 설치 및 자동실행 설정(putty에서 명령어사용)

 

NGINX는 톰캣처럼 서버에서 운영하는데 도와준다.

 

- 배포에서 Nginx를 쓰는 이유

• 빠른 정적 파일 제공: React, Vue 같은 프론트엔드 정적 파일 서빙
• 보안 강화: SSL/TLS 설정으로 HTTPS 적용
• 유연한 트래픽 관리: 리버스 프록시와 로드 밸런싱 기능
• 애플리케이션 분리: 프론트엔드와 백엔드를 Nginx가 중재

 

NGINX를 사용하기 위해서는 서버에 접속 및 리눅스 명령어를 사용할 수 있게 putty 프로그램을 사용한다.

putty에서 계정정보를 입력하고, 접속한 후 NGINX를 설치한다.

여기서 리눅스의 종류가 Ubuntu도 있고, CentOS 등등 종류가 있지만, CentOs 무료버전에 맞춰서 명령어를 실행한다.

 

- putty에서 아래 명령어들을 실행한다.

 

- Nginx 설치

1) sudo yum install epel-release

2) sudo yum install nginx

 

- NGINX 시작 및 부팅 시 자동 실행 설정

1) sudo systemctl start nginx

2) sudo systemctl enable nginx

---

 

3. 서버에 파일 업로드

 

- dist/ 폴더를 서버의 /usr/share/nginx/html/ 경로에 업로드한다.

- 서버에 파일 업로드를 하기 위해 파일질라를 사용한다.

 

ex) C:\~~~\dist\   ->  /usr/share/nginx/html

디렉터리 목록을 드래그 앤 드롭 하면 배포 끝!

 

마지막으로 서버 ip를 url 주소에 입력해본다.

화면이 정상적으로 뜨면 배포가 잘 된 것이다.