Heroku에 배포하기 위한 React 애플리케이션 설정

몇 년 전만 해도 웹 애플리케이션이 있으면 배포하기가 어려웠습니다. 오늘날 상황은 조금 다릅니다. 사용하기에 좋고 저렴한 옵션이 많이 있으며 그 중 하나가 Heroku입니다. 손쉬운 GitHub 통합을 통해 웹 애플리케이션을 배포하고 무료로 사용할 수 있습니다. 이를 위해서는 아래 설명된 단계를 따르기만 하면 됩니다.

신청

목표는 응용 프로그램을 Heroku에서 제공하는 것입니다. 그러나 먼저 수행해야 하는 몇 가지 응용 프로그램 설정 단계가 있습니다. React을 사용하여 create-react-app package 응용 프로그램을 만들었다고 가정합니다. 이는 이미 npm 작업이 정의되어 있음을 의미합니다. 여기에는 애플리케이션 시작 및 프로덕션용 빌드가 포함됩니다. 빌드 작업을 실행하면 빌드 폴더에 번들로 제공되는 애플리케이션이 생성됩니다. 이것이 서버에서 제공해야 하는 것입니다.

1단계: ExpressJS 설정

파일 제공을 위해 ExpressJS 서버를 사용하고 있습니다. 다른 많은 솔루션이 있지만 저는 Express의 단순함을 좋아합니다. 또한 API로 사용하는 것이 간단합니다. 설치하려면 다음 CLI 명령을 실행합니다.

npm install express --save

이제 서버를 시작하는 스크립트를 추가해야 합니다. 이 서버는 빌드 폴더에서 정적 파일을 제공해야 합니다. 이를 위해 프로젝트의 루트에 server.js 파일을 만들고 다음 코드를 추가합니다.

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

app.use(express.static('build'))

app.listen(process.env.PORT || 3002, () => {
    console.log(`listening on port ${process.env.PORT || 3002}`)
});

여기서 주의해야 할 두 가지 작은 사항이 있습니다. 로컬에서 실행하려는 경우 포트 3002에서 서비스를 제공합니다. 사용 가능한 포트로 변경할 수 있습니다. 먼저 process.env.PORT 변수에서 포트 값을 설정하려고 시도합니다. 이것이 바로 Heroku가 설정한 환경 변수입니다. 변수 이름의 마지막 부분은 모두 대문자여야 합니다. 소문자 사용으로 인한 문제에 대한 일부 StackOverflow 게시물이 있습니다.

2단계: 설치 후 작업

Node 애플리케이션용 Heroku를 설정할 때 설치 작업이 자동으로 트리거됩니다. 빌드 작업을 실행하려면 작은 설정을 수행해야 하며 설치 후 작업에 배치하는 것이 가장 좋습니다. 아래 코드와 같이 해당 작업을 포함하도록 package.json 파일을 업데이트해야 합니다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "postinstall": "npm run build"
},

이것이 사후 설치에 있는 이유는 이 작업에 시간이 걸릴 수 있기 때문입니다. 그리고 Heroku에는 시작 스크립트가 실행될 수 있는 최대 허용 시간이 있으며 빌드 작업이 오래 걸리면 시간 초과가 발생할 수 있습니다.

3단계: 프로필

응용 프로그램 설정의 마지막 단계는 Procfile을 만드는 것입니다. 그 파일이 무엇인지 자세히 설명하지 않겠습니다. Heroku의 실행 스크립트라고 생각하십시오. 그것에 대한 자료가 충분합니다. 이 파일은 프로젝트의 루트 폴더에 있어야 하며 정확히 Procfile이라는 이름을 지정해야 합니다. 시작 부분에 점이 없고 끝에 확장자가 없습니다. 다음 코드를 포함해야 합니다.

web: node server.js

요약:

이제 애플리케이션을 배포할 준비가 되었습니다. Heroku 웹 콘솔에서 설정해야 할 단계가 몇 가지 더 있지만 애플리케이션에 관해서는 준비가 된 것입니다. my GitHub repository 에서 모든 단계가 적용된 전체 코드를 찾을 수 있습니다.


자세한 내용은 , , GitHub 또는 에서 나를 팔로우할 수 있습니다.