React app 배포하기

😎 서버 생성 전 기본 설정 & 서버 생성

별다른 추가 설정 없이 리눅스 서버에 바로 배포할 것이기 때문에 디코 봇 배포할 때와 동일하게 VPC, Subnet 설정을 해준다! 나같은 경우엔 전에 만들어둔 걸 재사용 ^^ …

그리고 CentOS ( 다른 리눅스도 상관 X )로 서버를 생성하고 실행해준다

ACG 설정

이번에는 웹으로 접속할 수 있어야 하므로 아래처럼 포트를 열어준다 !

😮 배포 준비하기

프로젝트 clone 해오기

우선 사용할 프로젝트를 git clone 해온다! 그런데 이번에는 client 브랜치를 따로 나눠서 작업했더니 브랜치 설정에서 문제가 생겼는데 보통 branch 변경 시에는 git checkout <브랜치명> 으로 했었는데 이렇게 하니까 오류도 안 뜨고 ??..?? 그래서 뭔가 했더니 clone 해온 건 일단 로컬 저장소이기 때문에 원격 저장소의 branch를 참조하려면 -t 옵션을 붙여야 하는 것 같다! 그래서 git checkout -t origin/client 명령어로 브랜치를 변경, pull도 받아줬다.

Node.js, npm 설치

1. yum install epel-release
2. yum -y install nodejs
3. node -v 로 설치 확인
4. npm 안 깔려있으면 yum install npm도 해주기

😗 서버 배포

빌드

npm run build로 프로젝트 빌드해두기

웹 서버 설치 및 배포

1. npm install express로 웹 서버 설치

2. server.js 파일 작성 ( 아래 블로그 참조 )

   [AWS] AWS EC2 인스턴스에 React로 만든 웹페이지 배포하기

   const http = require("http");
   const express = require("express");
   const path = require("path");
   
   const app = express();
   
   const port = 80;
   
   app.get("/ping", (req, res) => {
       res.send("pong");
   });
   
   app.use(express.static(path.join(__dirname, "build")));
   
   app.get("/*", (req, res) => {
   res.set({
       "Cache-Control": "no-cache, no-store, must-revalidate",
       Pragma: "no-cache",
       Date: Date.now()
   });
   res.sendFile(path.join(__dirname, "build", "index.html"));
   });
   
   http.createServer(app).listen(port, () => {
     console.log(`app listening at ${port}`);
   });

3. nohup node server.js & 로 백그라운드 서버 실행

4. 명령어가 잘 실행되었다면 공인ip로 접속하면 끝 !