AWS EC2에 React 배포하기

ZeroJun·2022년 8월 24일

React aws ec2

Computer Science

목록 보기

9/9

이 글은 Create-React-App + TypeScript의 EC2 배포 과정을 담고 있습니다. 틀리거나 더욱 편리한 방법이 있다면 댓글 부탁드립니다!

프록시 설정

코드스테이츠의 pre-project를 EC2 인스턴스에 자바 스프링(:8080)과 React(:3000)를 동시에 배포하기로 했다.

이렇게 할 경우 react에서 spring으로 http요청을 보내면 포트가 달라 cors에러가 뜬다. 그래서 react의 아주 간편한 Proxy설정을 적용했다.

// package.json
"proxy": "http://localhost:8080",

이렇게 설정하고 api요청 시 호스트는 제외하고, path만 적어주면 된다.

fetch('/hello')
  .then((res) => res.json())
  .then((data) => setData(data));

프로젝트 생성 후 깃허브로 올리기

프로젝트를 특별히 빌드하지 않고 그대로 올려두었다.

EC2 환경설정

aws프리티어 우분투 18버전으로 인스턴스를 생성했고, .pem확장자를 가진 키페어를 다운받은 후 인스턴스를 활성화 시켰다. 그 후 SSH 클라이언트를 통해 접속을 시도하는데, 이 때 명령어는 aws에서 소개해준다. 해당 명령어를 치면
"WARNING: UNPROTECTED PRIVATE KEY FILE!"이 나오며 접속이 거절되는데, 파일 권한을 설정하지 않아 권한이 너무 open되어 있어서 거절된 것이다.
chmod 400~/Downloads/AWS_Deploy_Practice.pem 을 입력해준 후 pem이 저장된 경로로 이동 후 다시 접속 명령어를 치면 터미널 상에서 EC2 인스턴스로 접근하게 된다.

node 환경설정

아래 명령어를 그대로 따르면 환경설정이 완료된다.

sudo apt update

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

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

$ nvm install node 

$ sudo apt install npm

git clone

ssh-keygen // 입력 후 엔터 몇번을 해주면 키가 생성된다.

cat ~/.ssh/id_rsa.pub // 입력 후 나온 키를 복사한다.

복사한 키를 깃허브 프로필의 setting / ssh and gpg keys로 가서 새로운 New SSH key눌러 새로운 ssh keys를 생성한다.

git clone -b dev --single-branch {ssh키}

우선 개발용만 배포할 것이므로 dev브랜치만 클론했다.

PM2

백그라운드에서 리액트를 작동시키기 위해 pm2를 활용했다.

npm install pm2 -g

sudo apt-get update

sudo apt-get install authbind

sudo touch /etc/authbind/byport/80

sudo chown ubuntu /etc/authbind/byport/80

sudo chmod 755 /etc/authbind/byport/80

authbind --deep pm2 update

이렇게 pm2 설정을 마친 뒤 project폴더로 이동한다.

배포 확인 및 문제점

pm2 start npm -- start 명령어를 입력 후 서버가 실행되었음을 확인하고, ec2인스턴스 퍼블릭 dns주소를 통해 확인해보니 리액트는 켜져있는데

브라우저에는 invalid host header react라는 문구가 떠 있었다.

서치를 통해 임시방편으로 아래와 같은 방법으로 해결을 한 상태지만 올바른 방법인지는 모르겠다.

우분투 상에서
node_modules/react-scripts/config/webpackDevServer.config.js파일을 vim을 통해 열어서 아래와 같이 수정했다.

// 수정전
module.exports = function (proxy, allowedHost) {
  const disableFirewall =
    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';

// 수정후
module.exports = function (proxy, allowedHost) {
  const disableFirewall = 'true';
//    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === //'true';

이렇게 수정한 후 새로운 소스코드를 pull(git pull origin dev)받으면 pm2가 변경 사항을 자동으로 추적하는지 바로 수정반영 되었다. 만약 수정되지 않는다면 pm2서버를 restart하면 될 것이다.