[공룡 점프 게임] 6. React 웹 게임 Heroku에 배포

실행

다음의 명령어를 입력하여 개발 및 테스트한다.

npm run dev

빌드

개발이 완료되면 웹 게임을 Heroku에 배포한다. 우선 배포 전 다음의 명령어를 입력하여 빌드한다.

npm run build

빌드가 완료되면 build 폴더에 이미지 파일과 javscript 파일이 생성된다. 이때 index.html 파일은 자동으로 생성되지 않으므로 복하여 build 폴더에 같은 파일을 생성한다.

 

server.js

const path = require('path');
const express = require('express');
// create server
const app = express();
// set production env
app.use(express.static(path.join(__dirname, "./build")));
app.get('*', (req, res, next)=>{
  res.sendFile(path.join(__dirname, "./build", "index.html"));
});
// start server
app.listen({ port: process.env.PORT || 4000 }, () =>
  console.log(`Server ready ${process.env.PORT || 4000}`)
);

Heroku에서는 npm start 명령어를 이용하여 애플리케이션을 실행하며 이때 빌드 결과물을 보여주기 위한 서버가 존재해야한다. 여기서는 express를 이용하여 최소한의 기능을 하는 서버를 만든다. 다음과 같이 설정하면 경로로 요청이 왔을 때 빌드된 결과물을 응답한다.

 

빌드 결과물 확인

배포전 빌드 결과물을 확인하기 위해 다음의 명령어를 입력하여 확인한다.

npm start

 

Heroku에 배포

Github을 이용하고 있기 때문에 master에 push하면 자동으로 배포가 된다.

 

[전체 글]

[공룡 점프 게임] 7. 마무리

[공룡 점프 게임] 6. React 웹 게임 Heroku에 배포

[공룡 점프 게임] 5. 공룡과 병균 컴포넌트 작성

[공룡 점프 게임] 4. 배경 컴포넌트 작성

[공룡 점프 게임] 3. 메인화면 작성

[공룡 점프 게임] 2. React 앱 생성 및 설정

[공룡 점프 게임] 1. 프로젝트 소개