자습서: Heroku의 프로덕션에 내 React 앱을 배포하는 방법

Create-react-app 및 Heroku은 고성능 앱을 빌드하기 위한 훌륭한 도구이지만 React 및 Heroku 문서에는 React 프로덕션 빌드를 heroku에 배포하는 방법에 대한 정보가 거의 없습니다. Heroku에 간단한 프로덕션 준비 React 앱을 배포하는 방법을 안내해 드리겠습니다. 이 단계는 create-react-app 로 빌드된 모든 React 앱에서 작동합니다.

1단계: 반응 앱 만들기

먼저 create-react-app 생성기를 사용하여 React 앱을 만들어야 합니다. 먼저 Node와 npm을 설치했는지 확인하십시오.

터미널에서 다음을 입력하여 새로운 반응 앱을 생성합니다(그리고 hello-world를 앱 이름으로 바꿉니다).

$ npx create-react-app hello-world 
$ cd hello-world 

원하는 텍스트 편집기에서 hello-world 저장소를 엽니다. atom을 사용하는 경우 터미널에 atom .를 입력하여 저장소를 엽니다. 리포지토리는 다음과 같습니다.

hello-world
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

2단계: 공용 폴더에 나만의 앱 아이콘 추가

여기에서 모든 PNG를 favicon.ico 파일로 변환할 수 있습니다. https://www.favicon-generator.org/

그런 다음 Public 폴더에서 기존 favicon.ico 파일을 삭제하고 자신의 favicon.ico 파일을 Public 폴더에 추가합니다. 자신의 아이콘을 추가하지 않으면 앱은 기본적으로 React 아이콘으로 설정됩니다.

3단계: 프로덕션 빌드를 제공할 Express JS 서버 생성

저장소에서 server.js라는 파일을 만듭니다.

touch server.js

server.js에서 다음 코드를 복사/붙여넣기합니다.

//server.js
const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
 return res.send('pong');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);

이 코드는 축소/불량 JS를 제공할 수 있는 특수 Node JS 서버를 만듭니다./ping은 서버가 작동하는지 테스트하는 데 사용할 수 있는 의미 없는 경로입니다.
종속성에 express , express-favicon 및 path 를 추가했는지 확인하십시오.

yarn add express express-favicon path 

package.json 파일에서 start 스크립트를 다음과 같이 변경합니다.

start: "node server.js"

4단계: React 프로덕션 빌드 생성

Heroku는 이제 배포할 때 빌드 명령을 자동으로 실행하지만 배포하기 전에(특히 처음으로) 프로덕션 빌드를 로컬에서 테스트하는 것이 좋습니다.

터미널에서 다음 명령을 실행하여 프로덕션 빌드를 로컬로 생성할 수 있습니다.

yarn build

그런 다음 yarn start를 실행하여 프로덕션 서버를 로컬로 시작합니다.

5단계: 소스 코드 배포 방지

리포지토리에서 .env 라는 파일을 만듭니다.

touch .env

그런 다음 .env 파일에 다음을 추가하여 소스 맵이 생성되지 않도록 합니다.

#.env
GENERATE_SOURCEMAP=false

소스 맵을 사용하면 프로덕션 환경에서 소스 코드에 액세스할 수 있으므로 디버깅이 더 쉬워집니다. 그러나 소스 맵을 사용하면 누구나 소스 코드를 볼 수 있습니다.

참고: 프로덕션에서 문제를 디버깅trouble하고 있지만 소스 코드를 비공개로 유지하려는 경우 별도의 분기를 만들고 .env 파일에서 해당 행을 제거하고 해당 분기를 비밀 heroku URL에 배포할 수 있습니다. .

6단계: heroku에 배포

아직 heroku 계정이 없다면 여기에서 만드십시오: https://signup.heroku.com/
명령줄에서 다음을 실행합니다.

heroku login 

터미널에 heroku 자격 증명을 입력해야 합니다. heroku 자격 증명을 성공적으로 입력했으면 터미널에서 다음을 실행하여 배포된 새 앱을 만듭니다.

heroku create sample-react-production-app

sample-react-production-app을 자신의 앱 이름으로 바꿉니다.

그런 다음 터미널에서 다음 git을 사용하여 앱 빌드를 heroku로 푸시합니다.

yarn install
git add . 
git commit -m "initial commit"
heroku git:remote -a sample-react-production-app
git push heroku master

이 명령은 종속성을 설치하고, git을 초기화하고, heroku에서 호스팅하는 원격 저장소에 저장소를 연결합니다.

참고: heroku create [app-name] 를 실행하기 전에 이미 git을 초기화했다면 heroku git:remote -a [app-name] 를 실행할 필요가 없습니다.

축하해요! 이제 React 빌드를 배포하는 데 필요한 모든 단계를 완료했습니다. 앱을 보려면 터미널에서 다음을 실행하세요.

heroku open