EC2로 React 배포

다음과 같은 순서를 통해 EC2로 React를 배포할 것이다. 

1. express 서버 구축

 2. git clone으로 react 프로젝트 받아오기 

3. npm build 로 build 하기 

4.express 서버 ec2에 배포 

 

EC2를 활용한 배포 

 

1. EC2 생성 

먼저 EC2로 서버를 배포하는 방법을 살펴보겠다. 

그러기 위해서는 인스턴스 생성을 해줘야 한다. 

 

EC2 -> 인스턴스 -> 인스턴스 생성을 눌러 인스턴스를 만들어준다.

이때 포트번호는 8000으로 열거니깐 인바운드 규칙에 들어가서 TCP 8000을 허용 해준다.

 

 

2. EC2 SSH 로 접속 

그 후 EC2로 터미널을 연결해준다. 

 

그 다음 ssh를 통해 ec2 가상 인스턴스에 접속을 한다. 

그러기 위해서는 웹 서버를 실행시키는 키에 있는 위치에 가서 키의 권한을 허용해준다. 

그 다음 ssh 키를 통해서 접속해준다. 

3. 패키지 설치 

앞으로 프로젝트 배포를 위해서 필요한 패키지들을 설치할 것이다. 

 

 

4.  git clone 레포 

그 전에 git clone을 하여 레포를 받아오겠다

sudo yum update

yum install git 

git clone 레포 


레포 프로젝트로 이동한다. 
cd 레포

 

5. 서버 패키지를 설치한다. 

sudo yum install npm

sudo yum install nodejs

제대로 설치 됐는 지 확인하기 위해서는 버전 확인을 해준다. 

npm -v 

nodejs -v 

 

6. node js express  설치 및 빌드를 해준다. 

npm install express

npm run build

 

7.  그 다음 vi server.js 를 하여 밑의 코드를 추가해줘서 server.js 를 생성해준다. 

이는 포트 번호 8000으로 server를 열겠다는 코드이다. 

const http = require("http");
const express = require("express");
const path = require("path");

const app = express();

const port = 8000;

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}`);
});

위의 과정을 따라왔다면 

그러면 위와 같이 server.js와 build가 생성됨을 알 수 있다.

 

8. 지금부터는 서버를 실행할 것이다. 

터미널에서 서버가 꺼져도 실행이 되게 하고 싶다면 다음과 같은 명령어를 통해 실행시키면 된다. 

sudo npm -g install pm2
pm2 start server.js

이렇게 하면 터미널이 꺼져도 서버가 실행이 되게 된다. 

그 다음 [ec2public 주소]: 8000 을 치게 되면 웹 서버가 띄워진 것을 확인할 수 있다 

 

왕 신기