heroku에 React 앱 배포 및 서버리스 전환

서버리스라는 단어는 서버가 없는 것처럼 느껴지지만 실제로 서버리스는 다른 사람의 서버일 뿐입니다. 그러니 혼동하지 마십시오.

Herokuapp은 서버 설정에 대해 걱정할 필요 없이 프로젝트를 배포하는 데 적합합니다. Heroku는 당신을 위해 그것을합니다.

이제 react 앱으로 시작하여 heroku에 배포해 보겠습니다.

🛠️ 필요한 도구:

로컬 서버에서 실행 중인 반응 앱.

Heroku Cli

분명히 heroku 계정입니다.

1 단계:

heroku 구성을 위해 프로젝트 루트에 app.js 파일을 만들어 heroku가 노드 서버를 실행하고 해당 노드 서버가 반응 빌드의 콘텐츠를 제공하도록 합시다. 우리는 Express를 사용하여 서버를 만들 것입니다. 앱 루트 디렉터리 내부의 터미널에서 이 명령을 실행합니다.
npm i expressapp.js 파일은 다음과 같아야 합니다.
app.js :

const path = require("path");
const express = require("express");
const app = express();
const publicPath = path.join(__dirname, "build");
const port = process.env.PORT || 3000;
app.use(express.static(publicPath));
app.get("*", (req, res) => {
  res.sendFile(path.join(publicPath, "index.html"));
});
app.listen(port, () => {
  console.log("Something cool is up and running 🚀🚀🚀!");
});

2 단계:

package.json 파일을 변경하십시오.

 "scripts": {
    "start": "node app.js",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

나는 start 명령을 dev로 바꿨고 start에는 실제로 앱의 프로덕션 빌드를 실행하는 새로운 콘텐츠가 있습니다. heroku는 항상 시작 명령을 찾아 실행하기 때문에 이렇게 하는 이유입니다. 성능 저하로 인해 heroku에서 dev 서버를 실행할 수 없습니다. 원한다면 할 수 있습니다. 그러나 권장하지 않습니다.

3단계:

터미널에서 이 명령을 실행하면 앱이 heroku에 배포됩니다.
heroku create , 이것은 heroku 계정에 새 프로젝트와 git repo를 생성합니다.

git add .
git commit -m "Initial Commit"
git push heroku master

이제 지역 개발을 계속하고 싶다면. 로컬 빌드가 있는 경우 npm start가 로컬 빌드를 실행하기 때문에 npm start를 사용하지 않고 대신 npm run dev를 사용하여 로컬 환경에서 개발을 계속합니다.

이미지 크레딧: Dave Ceddia