[튜토리얼]

Heroku : 앱 배포하는 방법

---

Heroku는 여러 언어를 지원하는 클라우드 Paas이다.

1. https://dashboard.heroku.com/ 가입 및 로그인

2. 정보 입력을 하고 이메일로 인증 메일이 온다. 확인

3. heroku에서 'Authenticator' 로 보안로그인을 해야한다고 나온다. 어플을 깔고 따라한다.

4. create a new app 을 누른다.

5. 결제 등록을 해야 만들 수 있게 바뀌었다. 카드 등록을 한다.

6. App name 과 region 선택한다 (미국 선택)

7. 이제 git과 동일하게 heroku에도 저장소를 만들어서 넣어야한다.Heroku CLI가 필요하므로 운영체제에 맞게 설치한다. ( url : https://devcenter.heroku.com/articles/heroku-cli )

8. 설치 후 $ heroku --version 을 쳐서 설치가 잘 되었는지 확인한다.

9. 터미널에 $ heroku login를 쳐서 login을 해주는데 아무키나 누르라고 한다. 로그인 페이지가 뜨고 로그인이 된다.

10. 깃허브 업로드와 마찬가지로 현 경로를 cd로 잘 바꿔주고 아래를 작성하면 업로드가 된다.

$ git init
$ heroku git: remote -a (아까 쓴 app name) 👉 ex) project01
$ git add .
$ git commit -am "first commit"
$ git push heroku master -> 에러가 발생하면 main 으로 

11. 수정 후 다시 배포하는건 깃허브와 동일 수정 -> git add . -> git commit -> git push

---

package.json

package.json 를 수정해야한다.

---

우선 node 버전 에러가 뜰 수 있으니

"name": "todolist",
  "version": "0.1.0",
  "private": true,
  👉"engines": {
    "node": "20.x"
  },

engines 를 추가한다.

---

start 를 하면 node server.js 를 시작하게 한다.

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    👉"start": "node server.js"

---

dependencies 에 json-server를 넣어준다. (나는 json-server를 이용한 프로젝트를 배포해야하므로 저렇게 넣어준다.

 "dependencies": {
    "axios": "^1.3.3",
    "core-js": "^3.8.3",
    "express": "^4.18.2",
    "serve-static": "^1.15.0",
    "vue": "^3.2.47",
    "vue-moment": "^4.1.0",
    "vue-router": "^4.1.6",
    "json-server": "0.17.3"

---

db.json 를 제일 밖으로 꺼낸다. 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 || 3000;
server.use(middlewares);
server.use(router);
server.listen(port);

이런식으로.. 나는 vue이므로 build가 아닌 dist를 했다.

---

Axios 경로

res = await axios.put(`로컬호스트 ${todoId}`,data );
에서
res = await axios.put(`heroku 주소 ${todoId}`,data );

를 넣어서 바꿔준다.