[#. React] NginX를 이용해서 React 배포하기

 

 

 

 

 

ec2에서 serve로 React를 배포하니 새로고침할 때마다 404 에러가 발생하는 문제가 생겼다

React, Vue 등의 SPA 프레임워크에서 발생하는 문제이며, 브라우저가 React에 "/경로"에 GET을 보내지만 실제 서버에서는 "/경로"에 대한 정보가 없기 때문이다

connect-history-api-fallback 현상이라고 한다

 

SPA는 일반적으로 브라우저에서 액세스할 수 있는 하나의 파일(index.html)만 사용한다

그래서 특정 경로에서 새로고침 등을 했을 경우 서버가 해당 파일을 찾을 수 없어 발생하며, 404 메세지를 사용자에게 반환하게 된다

 

=> React 웹을 웹서버인 Nginx를 통하여 실행되도록 만들어서 해결해 보자

 

 

 

Web Server vs WAS(Web Application Server)

 

Web Server는 클라이언트의 요청을 처리하는 기능을 담당하고, WAS(Web Application Server)는 DB 조회나 다양한 로직을 처리하는 기능을 담당한다

Web Server는 클라이언트가 HTML, CSS 와 같은 정적 데이터를 요청하면 앞단에서 빠르게 제공하고, 동적 데이터가 필요하면 WAS에 요청을 보내고 WAS 가 처리한 데이터를 클라이언트에 전달한다.

 

NginX는 바로 이 Web Server의 구축을 도와주는 소프트웨어다

 

 

 

 

1️⃣ NginX 설치

 

$ sudo apt install nginx

 

 

 

2️⃣ 설정 파일 생성

 

$ sudo rm /etc/nginx/sites-available/default
$ sudo rm /etc/nginx/sites-enabled/default
$ cd /etc/nginx/sites-available/
$ sudo touch myapp.conf

 

 

 

3️⃣ 설정 파일 수정

 

server {
  listen 80;
  location / {
    root   /home/azureuser/[app 이름]/build;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

 

 

listen 80: 포트 80에 대한 설정

location /: URL이 '/'가 포함된 경로에 대한 설정

root: 실행할 파일들의 루트 위치, 빌드한 파일 경로

index: 인덱스의 파일들을 지정하는 곳, 이 파일들 중 꼭 하나는 root 경로 안에 존재해야 함

try_files: 어떤 파일을 찾을 때 명시된 순서로 찾으며, 가장 먼저 발견되는 파일을 사용함

 

 

root 경로 잘 확인하세요!

저는 Azure로 EC2를 생성했고 default 사용자명을 사용했습니다

 

⭐️ Nginx 500 Internal error 발생

-> root 경로확인!

 

 

 

4️⃣ 설정 파일 심볼릭 링크 생성

 

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

 

 웹 서버가 동작될 때 sites-enabled에 있는 설정 파일을 참조한다

 

 

 

5️⃣ Nginx 실행

 

$ sudo systemctl stop nginx
$ sudo systemctl start nginx
$ sudo systemctl status nginx

 

 

 

 

EC2 아이피로 들어가면 배포가 잘 된 것을 볼 수 있다