[React] React 배포하기 (EC2, S3)

프로젝트 빌드하기

이 글을 보고계신 분들은 이미 리액트 프로젝트가 있을거라고 생각한다.

 

빌드 명령어를 통해서 파일을 빌드한다.

$ npm run build
$ yarn build

CRA를 사용했다면 build 폴더가 생성되면서 빌드 파일들이 들어있다.

index.html과 js로 파일들이 변환된다.

 

이 상태로 서버에 올려봤자 서버에 접속한 사용자는 어떤 화면도 볼 수 없다.

서버에 접속할 때 사용자는 index.html을 볼 수 있도록 설정을 해주어야 한다.

 

S3 이용하기

이 때 S3의 정적 웹사이트 배포를 이용하면 접속할 때 index.html과 js를 브라우저에서 확인할 수 있도록 할 수 있다.

이 기능을 이용하면 따로 해주어야하는 것이 없기 때문에 React를 배포할 때 대부분 S3서버를 이용한다.

AWS S3로 React 배포하기

 

EC2 이용하기

하지만 EC2를 사용해야한다면 그 설정을 위해서 웹서버를 동작하도록해주어야한다.

express 서버를 이용해서 동작하도록 해보자.

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

이제 node server.js 명령어를 통해서 실행시켜주면 된다. 이 명령어는 서버를 끄면 같이 프로세스가 종료되기 때문에

sudo node server.js & 명령어를 이용하면 꺼지지않고 동작하게 된다.

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