[백엔드] Heroku에 Node.js 서버 올리기 (주로 오류 수정)

백엔드 서버를 호스팅하게 됐다.

여기저기 찾아보다가 Heroku를 선택...뭔가 이름이 일본어같다 싶더라니 정말 일본에서 만든거였다 와우

사실 에러가 생기면 굉장히 친절하게 알려주는 편인데 내가 보는 법을 몰라서 좀 헤맸었다.

 

https://nhj12311.tistory.com/276

헤로쿠(heroku) 가입부터 node.js 배포까지

이런 블로그 보고 했었다.

 

사실 노드 서버 올리기 전에 플라스크 서버를 먼저 올렸었는데

빌드는 성공하는데 앱이 열리지 않는 오류가 있었다. 에러로그를 보니 openCV 문제였다.

https://medium.com/analytics-vidhya/deploying-your-opencv-flask-web-application-on-heroku-c23efcceb1e8

Deploying Your Opencv Flask web application on Heroku

어떤 킹갓빛 블로거께서 알려주신 또 다른 블로그다.

대충 결론은 관련 빌드팩을 설치하라는 것이었고 설치하니 작동했다.

 

그리고 오늘 노드 서버를 올리기로 한 것인데...

 

먼저 최상위 폴더 바로 아레 procfile이라는 파일을 만들어야한다. 확장자가 없다

web: node app.js

띄어쓰기 정말 중요하다.

플라스크 올릴 때 띄어쓰기 제대로 안해서 오류났었다.

node는 node.js라는 뜻이고 app.js는 그 서버돌리는 js 파일을 각자 쓰면 될 것이다.

 

아 그리고 빌드하기 전에 헤로쿠 로그인하고 buildpack을 설치해야 한다.

heroku buildpacks:set heroku/nodejs

터미널에서 이런식으로 쓰고 빌드팩을 설치해두자

 

그리고 package.json 가서 각자의 node, npm 버전을 써준다. yarn이 있으면 그것도 쓰는데 난 없어서 안썼다.

혹시 버전 보는 법을 모르는 사람이 있을까 적어둔다.

 

node --version
npm --version

터미널에서 이런식으로 보면 된다.

 

그리고 scripts를 수정하는데 

난 start가 node ./bin/www인가 그랬다. profile 처럼 수정하고

heroku-postbuild를 적어주는데 저부분 나처럼 적을거면 앞으로 나랑 똑같이 해야한다.

저부분을 잘못써서 오류가 오지게 많이 났다 ㅡㅡ

 

그리고 dependencies를 보는데 혹시 dev-dependencies가 있으면 따로 무언가를 해줘야한다고 한다.

근데 난 그냥 dev에 있던걸 dependencies로 무식하게 옮기는 방법을 택했다.

 

저 마지막에 webpack-cli가 아주 중요하다.

remote: CLI for webpack must be installed.
remote: webpack-cli (https://github.com/webpack/webpack-cli)

처음에 저거 없이 빌드를 시도했다가 이런 오류를 만났다.

 

https://github.com/webpack/webpack-cli

webpack/webpack-cli

설치했다.

 

remote: [webpack-cli] It looks like webpack is not installed.
remote: [webpack-cli] Would you like to install 'webpack' package? (That will run 'npm install -D webpack') (Y/n)

그리고 이런 오류를 만났다.

대충 열심히 찾아보니

 

이 부분이 문제였다. 내가 그땐 heroku-postbuild에 다른 블로그에서 본 다른 무언가를 적어뒀었다.

그걸 webpack-cli로 수정했다.

 

그리고 빌드를 하니 성공했는데...

사실 우리에겐 아주 큰 문제가 하나 있다.

https://myunji.tistory.com/386?category=1154148 

[AWS] Github에 AWS access key를 노출하면 일어나는 일 (따라하지 마세요)

보안 문제...

 

AWS secret key를 gitignore하면? 당연히 헤로쿠도 모른다.

그래서 환경변수를 셋팅해서 헤로쿠에게 알려줘야 한다.

 

원래 config에 있던 awsconfig.json을

 

이렇게 옮겼다. 당연히 .env 폴더는 gitignore 해야 한다.

 

awsconfig.env

accessKeyId="어쩌구저쩌구"
secretAccessKey="비밀키"
region="지역"

json과 달리 과로도 없고 ':'가 아니라 '='를 사용해야 한다.

 

require('dotenv').config();
var models = require('../models');
const express = require('express');
const multer = require('multer');
const multerS3 = require('multer-s3');
const aws = require('aws-sdk');
const s3 = new aws.S3({
    accessKeyId: process.env.accessKeyId,
    secretAccessKey: process.env.secretAccessKey,
    region: process.env.region
});

맨 위에 require를 해주고 process.env 이런식으로 접근한다.

 

근데 dotenv 쓰려면 npm으로 설치해야 한다.

https://www.npmjs.com/package/dotenv

dotenv

 

그럼 이 환경변수를 헤로쿠에게 알려주자.

터미널로 할 수도 있는데 난 그냥 gui로 했다.

 

Settings에 들어가면

 

이런게 있다.

 

써주면 된다.

 

accessKeyId="어쩌구저쩌구"
secretAccessKey="비밀키"
region="지역"

이거 였다면

 

KEY에 accessKeyId 라고 쓰고, VALUE에 어쩌구저쩌구라고 쓰면 된다. 따옴표 빼야한다.

그리고 나서 빌드를 하고 heroku open 해보면

대충 헬로월드든 뭐든 뜰 것이다.

 

오류뜨면 그냥 heroku logs --tail 하면 된다. 어떤 오류가 어디서 왜 발생했는지 친절하게 알려주고

복붙해서 구글링하면 스택오버플로우에 나같은 사람이 한트럭이다.

에러 메세지만 보고 넘기지 말고 좀 더 위로 올려서 어디서 발생한 에러인지도 확인하는게 좋다.

왜냐면 내가 메세지만 보고 원인을 안봐서 삽질을 많이 했기 때문이다.