[AWS] REACT + NODE(express) 프로젝트를 EC2에 배포하기 #3

• 2부와 이어집니다.

  REACT + NODE(express) 프로젝트를 EC2에 배포하기 #2

배포를 위한 기본 설정

1. 사용가능 패키지와 버전 정보를 업데이트를 위해 다음의 명령을 입력한다.

sudo apt-get update

2. nodejs를 설치한다.

• nodejs의 버전 16 이상을 추천한다.

• node 16을 설치하는 방법
  1) sudo apt install -y curl
  2) curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
  3) sudo apt install -y nodejs

• 위 명령을 순서대로 입력한 후 node -v 명령어로 node의 버전을 확인한다.

3. git을 설치한다.

• git을 설치하는 이유는 배포할 프로젝트를 깃허브에서 clone 해오기 위해서다.

sudo a
pt install git

4. npm을 설치한다.

• sudo apt install npm 명령으로 npm을 설치해도 괜찮다.
• 하지만 나의 경우 해당 명령으로 npm을 설치시 reify로 서버가 프리징이 되어 다음의 명령어를 사용했다.

1) sudo npm install -g n
2) sudo n v14

5. github에서 프로젝트를 clone한다.

git clone "깃허브 프로젝트 주소"

6. clone한 프로젝트로 이동한다.

cd test : test 디렉토리로 이동하는 명령이다.

7. 프론트 프로젝트로 이동해 npm을 설치한다.

sudo npm install

8. 배포를 위해 리액트 프로젝트를 빌드한다.

npm run build

• build를 하고 리액트 프로젝트 디렉토리에서 ls 명령을 사용해 디렉토리 내용을 확인한다.
• 이 때, build 폴더가 보이면 정상적으로 build 된 것이다.

9. express 서버가 있는 디렉토리로 이동하고 똑같이 npm을 설치한다.

sudo npm install

10. 서버를 구동하는 index.js의 내용

• 아래는 index.js의 내용이다.

import express from "express";
import path from "path";

const app = express();
// 서버에서 배포시에 PORT를 80으로 한다.
const PORT = 80;
const __dirname = path.resolve();

app.use(express.static(path.join(__dirname, "../front/build")));

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "../front/build", "index.html"));
});

const server = app.listen(PORT, () => {
  console.log(`Start Server Port is : ${PORT}`);
});

app.get("*", function (req, res) {
  res.sendFile(path.join(__dirname, "../front/build", "index.html"));
});

11. 배포를 위해 pm2를 설치한다.

sudo npm install pm2 -g

12. pm2로 서버를 실행한다.

sudo pm2 start index.js

• 서버를 실행하게되면 아래와 같은 화면이 나온다.
  

13. 자신의 퍼블릭 ipv4 주소를 브라우저에 입력한다.

• 배포 성공

4부에서 다룰 내용

1. cors 해결

• local에서 cors를 해결할 땐 리액트에서 http-proxy-middleware 썻겠지만 실 배포시에는 작동하지 않는다.

2. 도메인 연결

• 도메인을 구입해 도메인을 연결할 것이다.