[create react app / heroku 배포 오류] heroku22 배포 오류

강의에서 배포를 한다길래 따라하다가 마지막 배포 과정에서 다음 오류가 발생했다.

이 오류 때문에 머리 좀 쥐어짰다.

찾아보니 CRA로 제작한 리액트 앱을 배포할 때 쓰는 빌드팩이 heroku22에서는 지원이 안된다고 한다.

그래서 nextJS를 통해서 배포하거나 remix.run을 통해 배포하라고 나와있다.

나는 위 두 방법 말고 다른 방법으로 배포를 했다.

 

 

먼저 기존에 등록한 빌드팩을 지우고 express 패키지를 설치한다 

 

우선 프로젝트의 최상위에 sripts 폴더를 생성하고 그 안에 heroku.start.js를 추가한다. 

그리고 아래 내용을 넣는다

const express = require("express");
const path = require("path");
const app = express();
const port = process.env.PORT || 3000;
app.use(express.json());
// Your static pre-build assets folder
app.use(express.static(path.join(__dirname, "..", "build")));
// Root Redirects to the pre-build assets
app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "..", "build"));
});
// Any Page Redirects to the pre-build assets folder index.html that // will load the react app
app.get("*", function (req, res) {
  res.sendFile(path.join(__dirname, "..", "build/index.html"));
});
app.listen(port, () => {
  console.log("Server is running on port: ", port);
});

그리고 다시 최상위에 Procfile 이라는 파일을 생성해 아래 내용을 입력한다.

web: node scripts/heroku-start.js

그리고 git에 추가하고 배포하면 성공적으로 배포가 된다. 

 

이러면 배포할 때 express server가 실행되면서 약간 우회하는 방식으로 빌드하는 것 같다. 

 

언능 빌드팩이 업데이트 됐으면 좋겠다.