1. Nginx 이용해 프로젝트 배포

1) Nginx 정의

대표적인 웹 서버의 종류로는 Apache, Nginx, IIS 가 있다.

💡 Web Server(웹 서버)?
클라이언트의 요청을 받아 주로 정적 파일 (파일, 이미지)을 전달하는 서버이다. 여기서 정적 파일(static file)이란 javascript, css, image 파일과 같이 “변경되지 않는 파일”을 의미한다.

2) 프로젝트 코드 변경

React 프로젝트 배포를 위해 프로젝트 코드를 변경해야 한다.

① .env.production 파일 생성

react 배포 환경에서 사용될 env 파일을 생성하고, 환경 변수를 작성한다.
react에서는 환경변수 쓸 때 REACT_APP 을 붙여야한다!!
.env.production 파일은 배포 환경에서 사용되며, npm run build 명령어를 입력한 경
우 자동으로 .env.production 파일의 환경 변수를 사용한다.

REACT_APP_DB_HOST="http://ip_address:backend_port_num" 
REACT_APP_MODE="product"

ex)
REACT_APP_DB_HOST="http://3.36.66.93:8080" 
REACT_APP_MODE="product"

react에서는 따로 무언갈 하지 않아도 env가 프로젝트 실행환경에 따라 자동으로 우선순위로 적용되므로, react 환경변수 파일만 잘 만들면된다.

💡 React 환경 변수

• .env : 기본 환경 변수 설정.
• .env.development, .env.production : 개발, 배포 환경 별 설정
• .envevelopment.local, env..production.local : 환경 별 설정의 로컬 오버라이드

💡 React 환경 변수 우선 순위
1. npm start 명령어 이용 시 env 적용 우선순위 (개발 환경)
.env.development.local > .env.development > .env.local > .env
2. npm run build 명령어 이용 시 env 적용 우선순위 (배포 환경)
.env.production.local > .env.production > .env.local > .env

② App 컴포넌트에서 axios 요청 주소 변경

await axios.get(`${process.env.REACT_APP_DB_HOST}/api/todos`) 
await axios.post(
`${process.env.REACT_APP_DB_HOST}/api/todo`, 
      newItem,
);
await axios.patch(
`${process.env.REACT_APP_DB_HOST}/api/todo/${targetItem 
      targetItem,
);
await axios.delete(
`${process.env.REACT_APP_DB_HOST}/api/todo/${targetItem 
);

③ React 프로젝트 빌드

React 프로젝트에 아래 명령어를 입력한다.

npm run build
# build 폴더가    생성됨 (1~2분    소요)
# build 폴더에 배포에 필요한 모든 파일이 있음!

빌드 폴더가 생성되면 빌드 폴더를 클라우드 서버에 업로드하면 된다.
~ (home, /home/ubuntu) 경로에 프로젝트명 폴더를 생성하고, client 폴더
아래에 build 폴더를 업로드한다.