프로젝트 배포 회고

React, Node.js, MongoDB로 만든 프로젝트를 Heroku에 배포하면서 예상보다 험난한 과정을 거쳤고, 마침내 성공하면서 깨달은 점이 많았다. 머릿속의 기억들이 희미해지기 전에 기록해야겠다는 생각이 들어, 오랜만에 글을 작성하기로 했다.

프로젝트는 client폴더와 server폴더로 나누어 진행했는데, 배포 전 client폴더를 server폴더 안에 넣고 작업을 이어갔다.

📌 .env에서 작성한 것들은 settings > config vars에 작성할 것

📌 MongoDB - Network Access > IP address 재설정

📌 배포 전 client 폴더 안 package.json에서 작성한 proxy를 지우고, http://localhost:5000~ 부분을 heroku에 배포한 사이트 주소로 바꿀 것.

• client 폴더 > config.js
  axios.create()를 사용해 인스턴스 생성 후 사용
  

📌 server폴더 > index.js

app.use(express.static(path.join(__dirname, "/client/build")));

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

📌 server폴더 > package.json

• node --version, npm --version으로 버전 확인하고 작성하기

"engines": {
  "node": "node 버전",
  "npm": "npm버전"
}

"scripts": {
  ...,
  "heroku-postbuild": "cd client && npm install && npm run build"
}

-> 이렇게 하면 따로 npm run build 또는 yarn build를 하지 않아도 heroku에서 알아서 해준다.

📌 server폴더 안에 Procfile만들고 web:npm run start작성하기

📌 만났던 에러들

• node module 폴더 관련
  
  -> client 폴더 안에 있는 node_modules를 삭제하고 배포했어야 했는데, 그러지 못해서 만났던 에러

• casing error
  
  ->vscode의 extension때문에 파일명의 대문자와 소문자가 바뀌면서 발생한 에러. 대문자와 소문자를 확인하자.

📌 참고자료
Deploy Node.js and React Apps to Heroku and Netlify

이 글에는 잘못된 부분이 있을 수 있습니다. 알려주신다면 정말 감사하겠습니다!😊