React AWS EC2 배포하기

여태것 vercel로 배포를 했었는데 vercel은 기본적으로 https로 배포가 된다.

그런데 back-end분들의 서버가 AWS의 EC2로 배포를 하시는데 해당 배포는 http로 배포가 된다.

그래서 API통신이 제대로 이루어지지않아 front에서 AWS의 EC2로 배포 해보기로 했다.

 

 

 

AWS EC2에 웹 프로젝트 배포하기 (React)

이분의 블로그를 참고 했다.

 

 

AWS 계정 가입후 EC2를 선택 합니다.

 

 

인스턴스 항목에서 인스턴스 시작으로 새로운 인스턴스를 만든다.

 

 

프리티어 모드의 우분투 서버 20버전을 선택 했다.

 

 

인스턴스 유형 역시 프리티어를 선택하고

 

키페어를 로컬에 저장하여 나중에 인스턴스에 접근하거나 filezila로 접속할때 인증 할때 쓴다.

 

 

이렇게 까지 설정후 인스턴스 시작을 누르면 인스턴스가 생성된다.

 

 

인스턴스 창으로 이동후 만든 인스턴스를 선택하고 보안그룹 창으로 이동한다.

 

 

인바운드 규칙 편집으로 이동한다.

 

 

내서버로 들어올 규칙을 정하고 저장한다.

 

 

인스턴스 선택을 하고 연결 버튼을 누르면 브라우저에 CMD창이 켜진다.

git bash로도 할수있지만 이방법이 더 간단 하여 이렇게 했다.

 

 

이런 모습의 cmd 창이 뜰건데 나는 다해놓고 쓰기 때문에 이런 창이지만 처음엔 그냥 까만 창이었던것 같다.

 

이제 노드를 설치하고 필요한 라이브러리와 프로젝트를 깃에서 클론해서 빌드 하면된다.

 

나는 아래의 순서로 진행했다.

 

 

노드 설치파일 설치

curl -sL https://deb.nodesource.com/setup_18.x | sudo bash -E -

 

우분투 업데이트 업그레이드?

sudo apt-get update 

sudo apt-get upgrade

 

노드 설치

sudo apt install -y nodejs

 

노드./ npm 설치 확인

node -v

npm -v

 

 

깃 클론 뜨기

git clone 깃허브 클론뜨려는 레포주소

cd 프로젝트명

 

 

프로젝트에 필요한 라이브러리들 다운

npm install

 

 

프로젝트 빌드

npm run build

 

 

express 설치

npm install express --save

 

server.js 작성

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 업로드

 

 

서버 배포하기

node server.js & //서버가 항상 켜있게 하려면 뒤에 & 붙여주어야함.

 

 

인스턴스의 주소 복사

 

주소뒤에 server.js에서 설정한 포트 번호를 붙혀주면 잘 배포 된걸 확인할수있다.

 

 

급하게 한거라 세세한것은 모르지만 나중에 AWS로 배포할일이 생길때 참고해야겠다.