1. heroku가입 후 heroku CLI 설치
잘 다운받아졌는지 터미널에서 헤로쿠 버전을 확인해본다.
heroku -v
2. heroku login
heroku login
터미널에 heroku login 입력 후 브라우저로 이동해 로그인을 해준다.
3. heroku create
heroku create를 입력하면 두 개의 url을 가질 수 있다.
첫번째는 애플리케이션의 url이고 이를 통해 애플리케이션에 접속할 수 있다.
두번째는 이 프로젝트를 위한 헤로쿠 저장소 주소
4. npm과 node version 명시
node -v
npm -v
node와 npm 버전을 체크한 후
package.json에 engine에 node와 npm 버전을 명시해준다.
5. React앱을 Production모드로 만들기
React앱을 Production모드에서 사용하기 위해서 앱을 build해주어야 한다.
클라이언트 폴더로 이동 후 리액트 앱을 빌드 한다.
cd client
npm run build
client에 build 폴더가 생성되며 빌드가 완료된다.
production 모드에서는 이 build폴더 안에 있는 파일만을 이용해서 작동 시킨다.
이제 서버의 index.js에 아래의 코드를 추가해주자.
if(process.env.NODE_ENV === "production"){
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "../client", "build", "index.html"));
});
}헤로쿠는 client/build폴더를 보게 된다.
그리고 루트 폴더의 package.json의 scripts에 아래 코드를 추가한다.
"heroku-postbuild":"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"위 코드를 추가하여 자동으로 client폴더로 들어가 앱을 빌드하게 된다.
6. Production 모드를 위한 환경변수 설정
//key.js
if(process.env.NODE_ENV === 'development'){
//development Mode
module.exports = require('./dev')
}else{
//production Mode
module.exports = require('./prod');
}
//prod.js
module.exports = {
mongoURI:process.env.MONGO_URI
}config의 key.js를 보면 production모드에서는 ./prod파일을 보게 해두었기 때문에 heroku의 MONGO_URI 환경변수에 mongoDB주소를 추가 해주어야한다.
heroku의 배포할 앱 - Setting에 들어가서
Reveal Config Vars를 열어 mongoDB주소를 추가해준다.
7. 마지막! 프로젝트를 git push 하기
heroku deploy에 들어가면 heroku git 방법이 나와있다
clone
heroku login
git init
heroku git:clone -a (heroku 프로젝트 이름)
commit & push
재배포 할 때도 동일!
git add .
git commit -am "make it better"
git push heroku master
만약 위 push가 안되면
git push heroku HEAD:master
push 시간이 좀 걸리니 차분히 기다리자!
push 완료 후 출력된 URI에 접속하면 된다. 배포 끝!
