리액트 EC2 배포(1)

개발/리액트 배포

리액트 EC2 배포(1)

sungin95 2023. 9. 19. 11:29

한개의 사이트를 직접 배포해 보고 싶다는 생각에 시작하면서 배웠던 방법을 정리하는 글입니다.

깊은 내용에 대해서는 잘 모르고 쓰는 글임을 알려 드립니다.

글은 포트 번호 기준으로 총 3편으로 제작할 계획입니다.

1. 제일 기본 3000번 포트를 사용하는 방법 `도메인:3000` ex) www.도메인.com:3000

EC2 배포(AWS) (시작, 연결)
build

2. HTTP기본 포트번호 80번 사용하는 방법 ex) www.도메인.com

Nginx설치 및 설정 세팅

3. HTTPS 를 적용한 443 사용하는 방법 ex) www.도메인.com

certbot를 활용 무료로 https인증 받기
Nginx추가 설정

EC2 배포

EC2 인스턴스 생성

우선 AWS에 로그인하여 콘솔 홈에 들어가 줍니다.

그리고 검색에서 `EC2`라고 입력하시고 인스턴스 시작을 클릭합니다.

2023/09/19기준

우선 이름을 입력해 줍니다. 저는 test 라고 했습니다.

우반투를 선택해 줍니다.

이게 무엇을 선택했느냐에 따라 파일 설치 명령어가 달라지고 Nginx 설정 세팅 값도 다르게 해야 하더라고요. 찾아보니까 가장 널리 쓰는게 Ubuntu라서 선택했습니다.

아직 1년이 안되신 분들은 프리 티어를 사용해서 돈을 절약해 줍시다.

키 페어가 따로 없다면 새로 생성해 줍시다.

저는 크게 건들지는 않고 이름만 입력해고 생성해 주었습니다.

원래 세팅 그대로 사용했습니다.

원래 세팅 그대로 사용했습니다.

고급 설정도 건들이지 않았습니다.

이제 생성

1~2분 정도만 기다리시면 검사까지 통과할 거예요.(인스턴스 새로고침 눌러야 확인할 수 있습니다.)

연결 작업

인스턴스까지 정상적으로 시작되었다면 이제 연결 작업을 해야 합니다.

일단 그 전에 `키 페어`파일이 다운로드 폴더에 있을 텐데 위치를 바꾸어 줍니다.

mv: 위치를 바꾸는 명령어

-v 완료 후 상태를 알려주는 옵션

test.pem: 위치를 바꾸는 파일 이름

~: 바꾸는 위치

이제 test.pem을 연결해 보도록 하겠습니다.

우선 아까 만들었던 인스턴스에 들어가 줍니다.

그리고 오른쪽에 연결 박스를 클릭해 줍니다.

SSH 클라이언트에 들어가시면 명령어를 복사 하실 수 있는데. 우선 chmod 400 명령어를 입력해 줍니다.

그러면 키페어 파일의 색이 바뀌는 것을 확인 할 수 있습니다.

이제 ssh -i ".... 명령어를 입력하시면 연결이 됩니다.

연결까지 완료!!!!!!!

build 하기

현재 인스턴스에는 아무것도 없는 상태이기 때문에 웹페이지를 올리고자 하는
git repo를 클론 해 줍니다.
$ git clone repo주소
우분투 서버에는 아무것도 깔려있지 않아 npm을 사용할 수 없기 때문에 설치해 줍니다.
우분투 서버에 node 설치
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
$ sudo apt-get install nodejs
잘 설치 되었는지 확인

내가 리액트에 설치한 파일을 install 해 줍니다.
$ cd repo주소
$ npm install
build를 해 줍니다.
$ npm run build

이때 계속 기달려도 build가 안될 수도 있는데요. 이때는 아래 블로그를 참고해 주세요.

https://progdev.tistory.com/26

[React] Creating an optimized production build... 멈춤 현상 해결 방법

리액트를 빌드하던 중 위와 같이 멈추고 더 이상 진행되지 않는 경우가 있다. 메모리가 부족하게 되면 위 현상이 나타나게 된다. 특히 AWS 프리티어를 쓰는 경우 t2.micro 사양을 사용하게 되는데

progdev.tistory.com

완료 하시면 build가 생성된 것을 볼 수 있습니다.

여기까지 완료를 했으면 1차는 완성입니다.

다음 내용에서는 Nginx를 사용하여 80번 포트를 사용하여 배포하는 방법에 대해 알아보도록 하겠습니다.

https://plants-growth.tistory.com/31

간단하게 배포하거나 잘 되었는지 확인 해 보실 분들은 해 보세요.(다음 내용과는 상관 없는 내용입니다. )

웹 서버 설치하기

포트 번호를 열어서 잘 되었는지 확인하는 방법과

EC2 에서 웹페이지 배포를 하려면 웹서버를 설치를 해야합니다.
여기서는 nodejs Express 를 설치 하겠습니다.

명령어를 쳐서 express를 설치해 줍니다.
$ npm install express

설치만 해준다고 끝이 아니니 서버 코드를 넣어주겠습니다.

웹페이지가 있는 프로젝트의 폴더로 이동합니다.
파일을 하나 생성하겠습니다. 저는 server.js 로 하겠습니다.
$ sudo vi server.js
i 를 눌러 INSERT 모드로 바꾼 후 아래의 코드를 붙여넣기 해줍니다.

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