[실습] 웹 프론트엔드 프로젝트(React + Vite) 배포하기

JSCODE 박재성

2025-12-06

✅ 웹 프론트엔드 프로젝트(React + Vite) 배포하기

1. React 프로젝트를 EC2로 가져오기

$ cd /usr/share/nginx
$ sudo git clone https://github.com/JSCODE-COURSE/nginx-frontend-react.git

 

2. React 프로젝트 빌드를 위해 Node.js 설치하기

$ sudo apt-get update && \
sudo apt-get install -y ca-certificates curl gnupg && \
sudo mkdir -p /etc/apt/keyrings && \
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \
NODE_MAJOR=20 && \
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list && \
sudo apt-get update && \
sudo apt-get install nodejs -y

# Node.js가 잘 설치됐는 지 확인하기
$ node -v

 

3. React 프로젝트 빌드하기

$ cd nginx-frontend-react
$ sudo npm i
$ sudo npm run build

 

2. Nginx 설정 파일 수정하기

$ cd /etc/nginx/conf.d
$ sudo vi default.conf

 
/etc/nginx/conf.d/default.conf

server {
    listen       80; 
    server_name  localhost;

    location / {
        root   /usr/share/nginx/nginx-frontend-react/dist;
        index  index.html;
    }

    error_page   500 502 503 504  /50x.html;
    
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

 

3. Nginx 설정 파일 반영하기

# Nginx 설정 파일 중 문법 에러가 있는 지 체크
$ sudo nginx -t

# Nginx의 설정 파일이 바뀐 경우 아래 명령어를 입력해줘야 설정 파일이 반영된다.
$ sudo nginx -s reload

 

6. 웹 페이지 접속해보기
Nginx의 설정이 잘 적용됐는 지 http://{EC2 IP 주소} 주소로 접속해보자.