[React]AWS EC2로 React 배포하기, 도메인 연결

💻웹(Web)/React

[React]AWS EC2로 React 배포하기, 도메인 연결

stonesy 2023. 9. 7. 14:32

728x90

Netlify, Firebase로 React 프로젝트를 배포하는 방법을 알아본 이후, AWS를 통한 React 프로젝트 배포방법도 알아보았다🙌🏻

AWS를 통해 React와 같은 SPA를 배포하는 방법은 2가지가 있다. AWS EC2를 활용한 배포와 AWS S3+cloudfront를 활용한 배포이다. 이때, 각 배포 방법에서 배포할 수 있는 서버가 다르다. EC2를 이용한 경우 웹 서버와 WAS 서버를 배포할 수 있고, S3+cloudfront를 이용한 경우 정적 콘텐츠을 배포할 수 있다.

🔎EC2를 통한 배포

EC2를 통해 웹 서버와 WAS 서버를 배포할 수 있기 때문에, react 프로젝트를 배포하기 위해서는 express 서버를 이용해야 한다. express 서버는 웹 서버로도 이용할 수 있고, WAS 서버로도 이용할 수 있다.

EC2를 통한 배포 과정을 요약하면 다음과 같다.

express 서버 구축
react 프로젝트 생성 뒤 빌드
express 서버를 통해 react 정적 콘텐츠를 제공
AWS EC2에 express 서버 배포

1. express 서버 구축

원하는 프로젝트의 루트 폴더에서 아래 명령어를 실행한다. 아래 명령어는 Node.js 프로젝트를 시작할 때 사용되는 명령어로 초기 프로젝트 설정 파일인 package.json을 생성한다.

npm init -y

그리고 express 서버 구현에 필요한 express package를 설치한다. 명령어는 아래와 같다.

npm install —save express

그 다음 프로젝트의 루트 폴더에 app.js 파일을 만들고 아래 코드를 작성하면 express 서버 구축 완료다.

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

const app = express();

app.set("port", process.env.PORT || 5000);


app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "/index.html"));
});

app.listen(app.get("port"), () => {
  console.log(app.get("port"), "번 포트에서 대기중..");
});

마지막으로 프로젝트의 루트 폴더에서 서버에 제공할 index.html 파일을 만들어준다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>EC2로 React 프로젝트 배포하기</h1>
  </body>
</html>

express 서버는 node app.js 명령어로 실행해볼 수 있다.

2. react 프로젝트 생성 뒤 빌드

프로젝트의 루트 폴더에 react 프로젝트를 생성한다. CRA로 react 프로젝트를 생성해도 되지만 난 내 github에서 react project를 clone해왔다. 그리고 해당 폴더로 이동해 npm install 명령어를 통해 패키지들을 설치하고, npm run build 명령어를 통해 프로젝트를 build 해주었다.

3. express 서버를 통해 react 정적 콘텐츠를 제공

빌드한 파일들을 서버를 통해 제공하기 위해 express 코드를 다음과 같이 변경한다.

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

const app = express();

app.set("port", process.env.PORT || 5000);

app.use(express.static(path.join(__dirname, "/seoyoung/build")));

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "/seoyoung/build/index.html"));
});

app.listen(app.get("port"), () => {
  console.log(app.get("port"), "번 포트에서 대기중..");
});

다시 node app.js 명령어를 통해 express 서버를 실행했을 때 나의 react 프로젝트가 잘 실행된다면 AWS EC2를 통해 배포할 준비 완료이다.

4. AWS EC2에 express 서버 배포

4-1. ssh 접속

AWS에 로그인을 한 뒤 EC2 서비스에 접속하고 region은 서울로 해준다. 새 인스턴스를 시작하기 위해 EC2탭을 누르고 이동한다.

이름 및 태그: 자신이 설정하고 싶은 인스턴스 이름을 입력한다.

애플리케이션 및 OS 이미지: OS는 Ubuntu로 설정한다.

인스턴스 유형: 프리티어 사용가능이라면 프리티어 사용 가능한 유형을 선택한다.

키페어 생성: 키페어를 생성한다. 이때, 키페어란 인스턴스에 접속하기 위한 도구이다. 키페어 유형은 RSA, 키파일 형식은 .pem으로 선택한다.

네트워크 설정: 네트워크 설정 부분은 따로 변경하지 않고 진행하였다.

성공적으로 인스턴스가 생성되었다.

만들어진 인스턴스 접속을 위해 해당 인스턴스>연결>SSH 클라이언트로 들어간다. 아래 방법들을 따라하면 ssh를 통해 내 컴퓨터에서 EC2 인스턴스에 접속되게 된다.

SSH란 secure shell로 네트워크를 통해 안전하게 원격 시스템에 접속하고 데이터를 전송하기 위한 프로토콜과 소프트웨어 집합을 나타낸다. 즉, ssh는 EC2 인스턴스(가상 서버)에 접속하기 위한 도구이다. 이때, ssh(secure shell)은 주로 unix 계열 운영체제에서 사용되는 프로토콜 및 명령어이기 때문에 내가 macOS를 사용한다고 하면 바로 사용할 수 있지만 내 컴퓨터는 Windows 운영체제를 사용하고 있으므로 일련의 과정을 따라야한다.

나는 Windows에서 OpenSSH를 이용해 접속하는 방법을 선택하였고, 아래 방법을 참고하였다.

https://wookim789.tistory.com/34

윈도우 터미널을 이용해 EC2 접속하기 (5)

자 지난 글에서 EC2 인스턴스를 띄워 보았다. 이제 내 로컬환경(내 pc)에서 aws의 ec2에 접속해보겠다. 방법은 여러가지이다. 이전에 설명한 SSH 방식으로 접근할 것인데, mac이라면 터미널에서 ssh 명

wookim789.tistory.com

우선, PowerShell을 이용해 Windows에 OpenSSH를 설치해주었다.

Connect to your Linux instance from Windows with OpenSSH - Amazon Elastic Compute Cloud

Thanks for letting us know this page needs work. We're sorry we let you down. If you've got a moment, please tell us how we can make the documentation better.

docs.aws.amazon.com

Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0

설치 이후에는 내 사용자 폴더의 .ssh 폴더에 내 .pem 파일을 위치시킨다. 이후 확장자가 없는 config 파일을 만들고 다음과 같이 작성한다.

Host aws_stonesy_ec2
    HostName (접속할 서버의 주소)
    User ubuntu
    IdentityFile ~/.ssh/(내 pem 파일 이름).pem

접속할 서버의 주소는 4. 퍼블릭 DNS을(를) 사용하여 인스턴스에 연결 부분을 복사해서 붙여넣으면 된다.

이후 파일 권한을 변경해주어야 한다. 3. 필요한 경우 이 명령을 실행하여 키를 공개적으로 볼 수 없도록 합니다.에 해당하는 단계이다.

내 pem파일의 속성>보안>고급으로 들어간다.

1)상속 사용 안함

하단의 상속 사용 안함 버튼을 누른다.

버튼을 누르면 다음과 같은 팝업이 뜨는데 “이 개체에서 상속된 사용 권한을 모두 제거합니다.”를 선택한다.

확인을 누르고 나온다. 경고창이 한번 뜨는데 그냥 확인버튼을 누르면 된다.

2) 사용자 추가

편집 버튼을 누르고 그룹 또는 사용자이름 추가를 누른다.

다음과 같이 사용자를 추가한 후 읽기, 읽기 및 실행은 허용, 쓰기 권한은 거부한 후 저장한다.

이후 터미널에서 ssh aws_stonesy_ec2를 입력하면 인스턴스에 접속할 수 있다.

접속에 성공했다면 ubuntu@ip~~의 형식으로 나올 것이다.

4-2. 우분투 가상 컴퓨터에 node.js, npm, git, 프로젝트 가져오기

설치할 목록은 다음과 같다.

npm
node.js
git
git clone 프로젝트

가장 먼저 다음 명령어로 update를 진행한다.

sudo apt update

그리고 차례로 위의 목록들을 설치한다.

sudo apt install npm

sudo apt install nodejs

sudo apt install git

git clone <프로젝트 주소>

이후 프로젝트에 필요한 패키지를 설치한다.

cd seoyoung(이건 내 프로젝트 이름이 seoyoung이니까)

npm install

npm run build

그리고 보안탭에서 인바운드 규칙을 추가해준다.

보안탭>보안 그룹>인바운드 규칙>인바운드 규칙 편집>규칙추가를 누른 후 다음과 같이 인바운드 규칙을 추가해준다.

이때 빌드하던 도중 무한로딩이 걸리는 현상이 발생했는데, 메모리 부족 문제라고 한다. 아래 링크를 참고했다. 보통은 이러면 해결되는 것 같은데 나는 해결이 안됐다. 그래서 그냥 로컬에서 프로젝트를 빌드한 후, 빌드 폴더를 github에 올리고 다시 git pull해서 해결했다.

https://progdev.tistory.com/26

*스왑 메모리 생성

sudo dd if=/dev/zero of=/mnt/swapfile bs=1M count=2048

sudo mkswap /mnt/swapfile

sudo swapon /mnt/swapfile

*스왑메모리 해제

sudo swapoff -v /mnt/swapfile

sudo rm /mnt/swapfile

⇒ 이 방법으로도 해결되지 않았었다.

그리고 React 프로그램이 백그라운드에서 실행될 수 있도록 pm2를 이용했다. pm2(Process Manager)란 pm2는 Node.js 애플리케이션을 관리하고 실행하는 프로세스 매니저이다. 백그라운드에서도 서버를 실행할 수 있도록 하기 위해서 pm2를 사용하였다. 사용하지 않는다면 인스턴스 컴퓨터에서 서버를 종료했을 때, 배포 환경도 중단될 것이다.

먼저 pm2를 설치하고

sudo npm -g install pm2

pm2 명령어를 통해 서버 파일을 실행시킨다.

pm2 start app.js

이 과정을 통해 터미널을 종료해도 페이지에 잘 접속되게 된다.

참고로 아래 명령어로 현재 실행중인 프로세스를 조회할 수 있다.

pm2 list

pm2를 종료하는 명령어는 아래와 같다.(stop 뒤에 실행 중인 프로세스 아이디를 뒤에 붙여주면 된다.)

pm2 stop 0

❗추가1: 포트 리다이렉트

근데 아직 문제가 있다. 내가 배포한 웹사이트에 접속하려면 항상 뒤에 :포트번호를 붙여야한다. 그냥 접속해도 나의 웹사이트로 연결되도록 하려면 리다이렉트 설정을 해야한다.

일반적으로 우리가 웹 페이지에 접속할 때는 기본 포트가 뒤에 붙어있다. 하지만 기본 포트는 보이지 않도록 설정되어 있어 일반적으로 우리는 눈치채지 못했을 것이다.

http의 경우: 80
https의 경우: 443

포트 리다이렉트를 위한 명령어는 아래와 같다.

// 맨 뒤에 숫자만 자신의 실행하려는 포트번호를 입력해주면 된다.
sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 443 -j REDIRECT --to-port 5000

나 같은 경우는 여기에 인바운드 규칙 설정까지 해줘야 포트리다이렉트가 정상적으로 이루어졌다. 보안탭>보안그룹>인바운드 규칙>인바운드 규칙 편집을 눌러서 규칙을 추가해주었다.

이제 뒤에 포트번호를 붙이지 않아도 정상적으로 접속이 된다!

❗추가2: 도메인 연결

여기서 끝내기 아쉬워서 도메인 이름을 사서 내가 배포한 웹 사이트에 설정해주었다. 도메인은 호스팅케이알이나 가비아에서 구매하면 된다. 나는 호스팅케이알이 조~금 더 저렴해서 호스팅케이알을 이용하였다.

도메인을 구매했다면 aws에서 Route 53에서 도메인 설정을 해야한다. Route 53>호스팅 영역>호스팅 영역 생성을 누르고 내가 구매한 도메인을 등록한다.

호스팅 영역 이름을 누르고 들어가보면 2개의 레코드가 뜰텐데 NS 유형의 레코드의 값/트래픽 라우팅 대상을 내가 구매한 도메인의 네임서버(호스트)로 변경하고 저장한다. 4개의 값이 있을텐데 4개 다 입력하면 된다! 이 과정은 트래픽 라우팅의 권한을 호스팅케이알로 넘겨주는 과정을 설정하는 것이라고 한다.

이제 호스팅케이알-나의 서비스-나의 도메인>네임서버/DNS 탭>DNS 레코드 관리에서 다음과 같이 설정해준다. 저 값 부분에는 퍼블릭 IP 주소를 입력하면 된다. 유형 A는 IPv4의 주소와 도메인 연결을 의미한다고 한다. 그리고 이름이 www인 것과 @인 것 2개를 설정해줌으로써 www.도메인.com으로 접근하든, 도메인.com으로 접근하든 나의 웹 사이트로 정상진입 가능하도록 한다.

10분정도 기다리면 성공적으로 연결된다고 한다!

🔎참고/출처

프론트 배포 방법 1편[AWS EC2를 활용한 배포] with React ,Express 환경

AWS EC2로 배포하기(2) | AWS 배포 후 도메인 구매해서 연결하기 (HOSTING.KR) (velog.io)

728x90

'💻웹(Web) > React' 카테고리의 다른 글

[React]Vite, Redux (0)	2024.06.27
[React]컴포넌트의 재사용성/일관성 (0)	2024.06.25
[React]Firebase로 React 배포하기, Mixed-Content 에러 (1)	2023.09.03
[React]Netlify로 React 배포하기: 새로고침, API 연결 에러 해결방법 (0)	2023.09.01
[React]웹 표준을 준수하며 개발하는 방법 (0)	2023.08.28

현재글[React]AWS EC2로 React 배포하기, 도메인 연결

https://github.com/seoyoung927

250x250

Today :
Yesterday :

stonesy