Heroku(헤로쿠)로 간단하게 React 웹 사이트 배포하기

 

 

 

 

Heroku는 간단한 설정으로 서버를 쉽게 배포할 수 있는 클라우드 플랫폼 서비스(PaaS)이다. Java, Node.js, Python 등 여러 언어를 지원한다.

포트폴리오 페이지를 만들며 어떻게 배포하는게 부담 없이 편할까 생각하며 알아보니 Heroku를 많이 사용하는 것 같아 이용해 보았다.

 

이미 나는 배포를 마친 상황이지만 포스팅을 위해 자세히 알아보니 2022년 11월 28일 이후로 무료 플랜이 종료되었다고 한다!!

(검색을 제대로 하지 않은 죄..🥲)

 

 

 

 

Heroku 홈페이지

https://www.heroku.com/

Cloud Application Platform | Heroku

 

 

 

 

사이트 가입 후 New 버튼을 클릭하면 Create new app이 보인다.

 

어째 카드를 등록안하면 생성이 안되더라...

 

App name과 Location을 선택하면 Heroku 페이지에서의 세팅은 끝이다.

 

 

 

 

1. Heroku CLI 설치

Heroku CLI(Command Line Interface)를 설치하면 로컬에서 Heroku 앱을 관리하고 배포할 수 있다.

The Heroku CLI | Heroku Dev Center

 

맥 OS 환경에서는 homebrew로 설치 가능하다.

brew tap heroku/brew && brew install heroku

 

설치 완료 후 아래 명령어로 설치 확인이 가능하다.

heroku --version

 

 

설치가 완료되었다면, 터미널에서 heroku에 로그인해준다.

heroku login

 

 

 

2. React 프로젝트 준비

 

Heroku 배포를 위해 package.json의 scripts 명령어를 수정해 준다.

"scripts": {
  "start": "node server.js",
  "dev": "react-scripts start",
  "heroku-postbuild": "npm run build",
  // ...
}

 

 

기존 React 환경에서는 start 명령어가 존재하기 때문에, 기존 명령어를 dev로 옮겨주고 start 명령어에 Heroku를 위한 server.js 구동 명령어를 추가해 주었다.

 

이때, React 프로젝트 자체로는 구동이 불가하기 때문에 프로젝트 루트 경로에 server.js 파일도 함께 추가해 주었다.

import express from 'express';
import path from 'path';

const app = express();
const PORT = process.env.PORT || 5000;

const __dirname = path.resolve();

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

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

app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));

 

내 프로젝트의 경우 package.json에 "type": "module"이 설정되어 있어 import 방식으로 작성하였다.

 

3. Heroku 배포 설정

Heroku Cli가 설치되었다면 터미널에서 배포하고 싶은 프로젝트 경로로 이동한다.

cd my-project/

git init

heroku git:remote -a <app-name>

 

프로젝트에서 git 생성 및 heroku 레퍼지토리에 연결한다.

 

git add .
git commit -am "make it better"
git push heroku main

 

git 사용법과 동일한 과정으로 add, commit, push 과정을 거친다.

이때, 환경이 제대로 세팅되어있지 않은 경우에는 push 커멘드에서 오류가 발생할 수 있다.

 

 

 

* Heroku Buildpack 설정
React는 정적 사이트이기 때문에 Heroku에 create-react-app 또는 node js 빌드팩이 필요하다.

다음 명령어로 buildpacks 확인이 가능하다.

heroku buildpacks

 

 

만약 buildpacks이 없다면 다음과 같이 세팅해 준다.

heroku buildpacks:set heroku/nodejs
heroku buildpacks:add mars/create-react-app

 

 

 

만약 배포에 성공한다면 다음과 같이 터미널 하단에 주소를 확인할 수 있다.

 

간단한 과정으로 쉽게 웹 서버 혹은 페이지를 배포할 수 있지만 무료 플랜이 종료되었다는 큰 단점이 있다.

Heroku를 사용하던 유저들은 Koyeb로 많이 이전한 것 같다. 나도 추후에 Koyeb로 다시 이전할 계획이다.

추후에 Koyeb로 이전하면 사용법을 다시 포스팅해야겠다..😉