카테고리 없음

리액트 프로젝트 AWS EC2 배포하기

Seocho90 2023. 2. 6. 13:28

리액트 프로젝트를 AWS EC2에 배포하기 위해서는 다음과 같은 절차가 필요합니다.

  1. 리액트 프로젝트 GitHub에 Push 하기
  2. EC2 인스턴스 생성
  3. EC2에 Git 설치 및 레퍼지토리 복사
  4. EC2에 node.js 설치 및 npm으로 프로젝트 빌드
  5. EC2에 서버 설치 후 배포

1. 리액트 프로젝트 GitHub에 Push 하기

우선 깃허브에 레퍼지토리를 생성합니다

 

vscode에서 터미널을 열고 아래의 명령어로 git을 설치합니다

npm install git

git이 설치되면 다음 명령어들을 순서대로 입력하여 GitHub와 연동합니다

git init

git remote add origin [레퍼지토리 주소]

git add .

git commit -m "커밋 내용"

git push origin master

 

2.EC2 인스턴스 생성

EC2 대시보드에서 '인스턴스 시작' 버튼 클릭

 

이름 입력하고 원하는 서버 선택 (저는 AmazonLinux 선택했습니다)

키 페어 있으면 키 페어 선택해 주고 없으면 '새 키 페어 생성' 클릭

키 페어 이름 선택하고 '키 페어 생성' 클릭

키 페어를 생성하면 키 페어 파일이 다운로드되는데, 이 파일은 처음 한 번만 다운로드할 수 있습니다. 잃어버리면 다시 발급받아서 교체해줘야 하는 번거로움이 있으니 주의하세요.

이 키 페어 파일은 로컬에서 EC2 인스턴스에 접속할 때 사용 되는 키입니다. 이 파일을 리액트 프로젝트의 root로 옮겨주세요.

네트워크 설정에서 '편집' 클릭

아래와 같이 보안 규칙 추가

여기서 HTTP에 3000 포트도 추가해야 합니다. (뒤에서 포트 3000번 열어서 접속할 예정)

그리고 '인스턴스 시작' 클릭하면 생성됩니다

3.EC2에 Git 설치 및 레퍼지토리 복사

EC2 인스턴스에서 SSH 클라이언트에 보시면 맨 밑에 예로 ssh -i로 시작하는 부분이 있습니다 이 부분을 복사해서 vscode의 터미널에 붙여 넣으면 EC2인스턴스에 접속이 됩니다.

접속을 하면 다음과 같이 환영을 해 줍니다. 텍스트를 읽어보니 업데이트가 필요하다고 하네요. 시키는 데로 업데이트를 합니다.

sudo yum update

그리고 다음 명령어로 git을 설치합니다.

sudo yum install git

이제 깃 허브에 등록할 ssh키를 생성할 차례입니다. 키를 생성할 ssh폴더로 이동합니다.

그리고 이어서 키를 생성합니다.

cd ~/.ssh
ssh-keygen -t rsa -C [GitHub 계정]

그러면 아래와 같이 입력해 달라고 나오는데, 그냥 엔터만 치고 넘어갑니다.

그러고 나서 아래의 명령어를 입력하면 public key가 나옵니다. 해당 내용을 메일 주소까지 전부 복사합니다.

cat id_rsa.pub

이제 생성된 키를 GitHub에 등록합니다. SSH and GPG keys (github.com) 해당 링크에서 'New SSH Key'를 클릭합니다.

Key부분에 위에서 복사한 내용을 붙여 넣고 'Add SSH key'를 입력합니다.

다시 vscode의 터미널로 돌아가서 다음 명령어로 레퍼지토리를 복사합니다.

그전에 현재는 ssh경로에 있으니 빠져나와줍니다.

cd ..
git clone [레퍼지토리 주소]

이렇게 입력하니까 다음과 같은 텍스트가 나옵니다. 이곳에는 GitHub의 아이디 패스워드를 넣으니까 뭔가 잘못됐다고 합니다. 확인해 보니 GitHub의 토큰이 필요하다고 합니다.

Personal Access Tokens (Classic) (github.com)으로 이동해 토큰을 생성합니다. 생성 시 Expiration은 기본값으로 '30 days'가 선택되어 있습니다. 이 부분을 'No expiration'으로 선택합니다,. 그리고 그 아래의 Select scopes는 전부 체크하고 토큰을 생성합니다.

그렇게 생성된 토큰을 아까 그곳에 붙여 넣습니다. 아이디 부분에는 계정 메일을 입력하시고 패스워드도 부분만 토큰으로 입력하시면 됩니다.

4.EC2에 node.js설치 및 npm으로 프로젝트 빌드

이 아래는 git으로 복사한 프로젝트의 루트경로에서 진행해야 합니다.

이제 리액트 프로젝트를 빌드하기 위해 node.js를 설치할 차례입니다. 우선 nvm을 설치하고 nvm를 활성화시킵니다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

. ~/.nvm/nvm.sh

그런데 자습서: Amazon EC2 인스턴스에서 Node.js 설정 - AWS SDK for JavaScript 에서 보니 아마존 리눅스 2는 Node.js의 최신 버전을 지원하지 않는다고 합니다. 그래서 16 버전으로 설치해야 합니다.

nvm install 16

이제 프로젝트의 루트로 이동한 뒤, npm을 설치하고 프로젝트를 빌드합니다. 빌드를 마치면 경로에 build폴더가 생깁니다.

npm install

npm run build

5.EC2에 서버 설치 후 배포

이제 웹서버를 설치하고 빌드된 파일을 배포할 차례입니다. Express를 설치합니다.

npm install express

그리고 파일 하나를 생성하여 작성해 줍니다.

vi server.js

파일의 내용은 다음과 같습니다.

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

const app = express();

const port = 3000;

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

이제 웹 브라우저에 '퍼블릭 IP주소:3000'를 입력하시면 우리가 만든 웹페이지에 접속하게 됩니다.

 

참고로 다음 명령어를 이용하면 aws접속을 종료해도 웹 페이가 활성화됩니다.

node server.js &