React - 배포하기

 

리액트에는 기본적으로 개발에 유용한 경고가 많이 포함되어 있습니다. 하지만, 그 경고는 리액트를 더 크고 느리게 만들기 때문에 앱을 배포할 때에는 프로덕션 버전을 사용해야 합니다.

 

빌드 프로세스가 올바르게 설정되었는지 잘 모르는 경우엔, 크롬의 확장 프로그램인 React Developer Tools를 사용하여 확인할 수 있습니다.

 

프로덕션 빌드로 배포되었음을 알 수 있다

 

개발 빌드로 배포되었음을 알 수 있다

 

목차

1. SPA 프로젝트 빌드
2. serve 패키지로 배포하기
3. AWS S3에 배포하기
4. NginX로 배포하기
5. Node.js의 Express로 배포하기

 

1. SPA 프로젝트 빌드

프로젝트 생성

npx create-react-app react-deploy-test
cd react-deploy-test
npm run build

• npm run build : 리액트 애플리케이션을 production 모드로 빌드합니다. 빌드 결과물은 기본적으로 build 폴더에 저장됩니다.

 

 

2. serve 패키지로 배포하기

serve 패키지 설치

npm install serve

• serve : 정적 파일(HTML/CSS/JS)을 제공하는 간단한 서버를 구축할 때 유용한 패키지입니다.

 

serve 패키지 실행

serve -s build -p 8080

• -s : build 디렉터리를 문서의 루트로 지정합니다. 어떤 라우팅으로 요청해도 index.html을 응답하게 됩니다.(404 에러 회피)
• -p : 서버를 실행할 포트 번호를 지정합니다.

 

3. AWS S3에 배포하기

AWS S3 콘솔 >버킷 생성 (https://s3.console.aws.amazon.com/)

 

생성한 버킷 페이지 > react 프로젝트 build 폴더 내  파일과 폴더를 모두 업로드

 

생성한 버킷 페이지 > '속성' 탭 > '정적 웹 사이트 호스팅' 편집

 

퍼블릭 액세스 차단 해제

 

버킷 정책 편집

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PermGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::react-deploy-test1/*"
    }
  ]
}

• react-deploy-test1의 모든 객체에 접근을 허용합니다.

 

배포한 사이트에 접속

 

4. NginX로 배포하기

AWS 콘솔 > 가상 머신 시작(E2) > Red Hat 선택

 

프리 티어 옵션 선택 후 다음 > ... > 보안 그룹 구성에서 보안 그룹 이름 / 설명 수정, HTTP 추가

 

새 키 페어 생성

 

인스턴스에 SSH 접속

 

chmod 400 react-deploy-test1.pem
vi ~/.ssh/config

Host react-deploy-test1
HostName 44.202.24.124
User ec2-user
IdentitiesOnly yes
IdentityFile /Users/jeonghyeonjun/Desktop/Dev/keys/react-deploy-test1.pem

ssh react-deploy-test1

 

node.js 설치(14 버전 +)

sudo dnf update -y
sudo dnf groupinstall "Development Tools"

curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo dnf install -y nodejs

node -v
npm -v

 

create-react-app 실행 후 build

sudo npx create-react-app react-deploy-test1
cd react-deploy-test1
sudo npm run build

 

NginX 설치

sudo dnf install -y nginx
sudo systemctl start nginx

 

브라우저에서 AWS 인스턴스의 퍼블릭 IP 주소로 접속 > NginX의 정상 작동 확인

 

NginX의 root 디렉터리 변경

sudo vi /etc/nginx/nginx.conf

...

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /home/react-deploy-test1/build;
        
...

 

root 디렉터리의 SELinux 보안 context 변경

chcon -R -t httpd_sys_rw_content_t /react-deploy-test1

 

NginX 재시작

sudo systemctl restart nginx

 

브라우저에서 퍼블릭 IP로 다시 접속 > 정상 작동 확인

 

 

5. Node.js의 Express로 배포하기

프로젝트 생성

npx create-react-app react-deploy-test1
cd react-deploy-test1
npm run build

 

server.js 파일 생성

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

const app = express();

app.use(express.static(path.join(__dirname, 'build')));

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

app.listen(8080);

 

Express 서버 실행

node server.js

 

브라우저에서 localhost:8080 접속