🥸 Heroku란?

• 개발한 웹 어플리케이션을 배포할수 있도록 도와주는 서비스형 플랫폼(PaaS).

  ⭐️ PASS 란?
  Platform as a Service(PaaS, 파스)서비스로 제공되는 플랫폼.
  개발사에 제공되는 플랫폼을 가상화하는것을 말한다.

• CLI 도구를 제공하여 터미널에서 작업이 가능하다.
• git 과의 연동이 가능하여 레포탄위로 배포를 진행하고 자동배포 기능도 사용할수 있다.

설치

계정이 있다는 조건하에 설치부터 설명한다.

• heroku 공식문서도 설명이 참 잘되어있다.
• 나는 MacOS 이므로 brew 를 이용해 설치했다.

✏️ 소스코드 셋팅 (JSON-SERVER setting )

• Procfile 철자 주의 (오타나면 안됨)
• 프로젝트 최상단 위치해야함 (root경로)
• Procfile, server.js, db.json(필수), .env(선택)

//Procfile

web: node server.js

//server.js

const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("./db.json");
const middlewares = jsonServer.defaults({
  static: "./build",
});
const port = process.env.PORT || 3001;

server.use(middlewares);
server.use(
  jsonServer.rewriter({
    "/api/*": "/$1",
  })
);

server.use(router);

server.listen(port, () => {
  console.log("server is running...");
});

//pakage.json
...
  "scripts": {
    "start": "node server.js",
    ...
  },

//.env
PUBLIC_URL="PUBLIC_URL=https://`앱 이름`.herokuapp.com/

.env 파일에서 배포된 herokuapp url 을 정의해줬다(재사용성), 배포 전 api 주소에 적용해 줘야한다.

//example
useEffect(() => {
    fetch("`${process.env.PUBLIC_URL}/api/products")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setProducts(data);
      });
  }, []);

배포

✏️ Heroku 로그인

heroku login

터미널에서 로그인후 브라우저에 뜨는 화면
로그인 후 heroku 홈페이지에서 새로운 레포지토리를 생성한다. (이는 git과 동일하기 때문에 따로 설명X)

✏️ git upload

 git init
 heroku git:remote -a "히로쿠 레포지토리 이름"
 git add .
 git commit -am "make it better"
 git push heroku master

이렇게하면 배포 성공 🔥🔥🔥

➕ 추가로 master push 시 자동배포를 설정하고싶다면

방법을 GitHub 으로 변경후

위와같이 설정해주면 된다.

⭐️ 간단하게 개인용 웹사이트 배포 성공 ~!