Angular CLI 사이트 Heroku(헤로쿠)로 인터넷에 올리기

소스코드

이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.

이 게시물의 소스코드는 Tour of Heroes / HTTP에서 이어집니다.

tour-of-heroes.git 을 clone 한 적이 있는 경우: 터미널에서 해당 폴더로 이동 후 아래 명령어들을 붙여넣기합니다. 폴더 내 모든 코드가 이 게시물의 코드로 교체됩니다. 이를 원치 않으시면 이 방법을 선택하지 마세요.

git reset --hard
git pull
git reset --hard 5dfe56a
git reset --soft 58820f3
npm install
atom .

tour-of-heroes.git 을 clone 한 적이 없는 경우: 터미널에서 코드를 다운 받을 폴더로 이동한 후 아래 명령어들을 붙여넣기하여 tour-of-heroes.git 을 clone 합니다.

git clone https://github.com/a-mean-blogger/tour-of-heroes.git
cd tour-of-heroes
git reset --hard 5dfe56a
git reset --soft 58820f3
npm install
atom .

- Github에서 소스코드 보기: https://github.com/a-mean-blogger/tour-of-heroes/tree/5dfe56ab04616b97b5c4e23e409fd46e96f3ac85


Angular 사이트의 결과물은 html, js, css 등 static 파일로만 이루어져 있으므로 그냥 서버에 결과물을 올리기만 하면 됩니다.

Angular CLI로 만든 Angular사이트는 아래 명령어를 통해 최종 결과물을 생성할 수 있습니다.

$ ng build --prod

이 명령어를 실행하면 프로젝트_폴더/dist 위치에 index.html을 비롯한 angular 관련 static 파일들이 생성되고 그 파일들을 서버에 올리면 Angular 사이트가 바로 작동합니다.

하지만 Heroku(헤로쿠)에서는 static 파일을 바로 올릴 수 없고, 어떠한 언어로든지 간에 서버를 생성한 후 static 파일들을 서버에 올려야 합니다.

이번 포스트에서는 Angular 2/Tour of Heroes 강좌에서 만들었던 Angular 사이트에 static 페이지를 보여주는 node 서버를 추가하여 Heroku(헤로쿠)를 통해 인터넷에 올려보겠습니다.

헤로쿠 가입및 다운로드, 명령어등은 단편강좌/Heroku(헤로쿠) 가입, Heroku CLI 다운로드, 간단 사용법 포스트에서 설명하였습니다.

Node 서버 만들기

server.js를 ./server 위치에 생성하고 아래를 입력합니다.

// server/server.js

var express = require('express');
var app     = express();
var path    = require('path');

// Angular
app.use(express.static(path.resolve(__dirname, '../dist'))); //1
app.get('*', function (req, res) { //2
  var indexFile = path.resolve(__dirname,'../dist/index.html');
  res.sendFile(indexFile);
});

// Server
var port = process.env.PORT || 3000; //3
app.listen(port, function(){
  console.log('listening on port:' + port);
});

1-2. 전체적인 코드를 해석면, express를 사용해서 node서버를 만들고 dist폴더를 static 폴더로 지정(//1)한 후 서버의 모든 요청을 dist/index.html로 보냅니다(//2). express를 사용해서 node서버를 만드는 방법은 Node JS 첫걸음/Hello World!에 자세히 설명되어 있습니다.

3. 헤로쿠에서 사용하는 port는 헤로쿠 서버의 환경변수에 의해 결정됩니다. 이 환경변수의 key 이름은 대문자로 PORT입니다. Node에서 환경변수 값을 담고 있는 변수는 process.env 이므로 헤로쿠상의 서버는 process.env.PORT의 값을 port로 하여 사이트를 실행하여야 합니다.

server.js 파일을 위해 굳이 server폴더를 만드는 이유는 나중에 확장성을 위해서입니다. server 폴더 안에 서버관련 기능(API 등)을 넣을 수도 있기 때문입니다.

Package.json 수정하기

// package.json

{
  "name": "tour-of-heroes",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node ./server/server.js", //1
    "postinstall": "ng build --prod", //2
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "^1.3.0",          //3
    "@angular/compiler-cli": "^4.0.0", //3
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular-in-memory-web-api": "^0.3.2",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

1.헤로쿠는 package.json의 start script를 통해서 node.js 사이트를 실행시킵니다. 기본 package.json은 scripts에 start가 없으므로 작성을 해 주어야 합니다.

node 서버_JS_파일

./server/server.js에 서버 실행 코드가 있으므로 node ./server/server.js가 되었습니다.

2. postinstall script는 npm install 이 실행되고 나면 자동으로 실행되는 script입니다. 헤로쿠에 사이트가 업로드 되면 헤로쿠가 npm install을 실행하기 때문에 이때 ng build --prod 를 실행시켜 dist 폴더에 angular 사이트 static파일들을 생성시킵니다.

3. 이 두줄은 원래 devDependencies에 있던 것들인데, dependencies로 이동시켰습니다. devDependencies에 있는 package들은 개발 환경(development environment)에서만 사용되는 package들로 최종 생산 환경(production environment)에서는 설치되지 않습니다. 헤로쿠는 생산 환경으로 사이트를 실행하기 때문에 ng build명령어를 실행하기 위해 이 두 package들을 dependencies로 이동시켰습니다.

Heroku에 코드 보내기(push)

Heroku CLIgit이 설치되어 있어야 헤로쿠 저장소로 code를 보낼 수 있습니다.

헤로쿠에 로그인하지 않았다면 로그인합니다.

$ heroku login

현재 소스코드가 있는 폴더에서 헤로쿠 저장소를 생성합니다.

$ heroku create a-mean-blog-tour-of-heroes

저는 a-mean-blog-tour-of-heroes 이름으로 저장소를 생성하였지만 헤로쿠 저장소 이름은 유일하여야하기 때문에 여러분들은 다른 이름을 사용하여 저장소를 생성하시기 바랍니다.

헤로쿠에 올리기 위해 작업한 코드를 먼저 git에 저장합니다.

$ git add .
$ git commit -m "heroku ready"

현재 git 저장소를 heroku에 전달(push)합니다.

$ git push heroku master

헤로쿠_저장소_이름.herokuapp.com에 접속하면 사이트를 볼 수 있습니다.

저의 경우에는 https://a-mean-blog-tour-of-heroes.herokuapp.com가 됩니다.

마치며...

Node.js 서버에 Angular 사이트를 올리면 Angular 사이트에서 사용할 API를 Node.js서버에 만들 수 있다는 점입니다. 다음번엔 이 부분에 대해 알아보도록 하겠습니다. 

댓글

N
Namki Lee 2018.04.18
안녕하세요, 블로그 보면서 열심히 따라하고 있다가 궁금한 점이 있어서 글을 남깁니다. 헤로쿠 말로 저희가 알고있는 도메인을 붙여서 서비스를 하려면 어떤 한 방법들이 있을까요??
I
Ian H 2018.04.21
@Namki Lee,
안녕하세요^^ "저희가 알고있는 도메인"이라는게.. 이미 도메인을 가지고 계신 것인가요? 이미 도메인을 가지고 계시다면 도메인 사이트에서 설정을 해주시면 됩니다.
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP