【Heroku入門(1)】AngularアプリをHerokuへデプロイしてみる

はじめに

前回までで、

Angularでレスポンシブ対応の画面を作成したり、Rest APIをコールしたり、いろいろサンプルを作成してきました。

また、作成したサンプルはローカルPCでサービスを起動して動作確認してきました。

 

作成したアプリは、最終的にはサーバにデプロイして、アプリを公開すると思います。

そこで、

今回は、今まで作成してきたAngularのアプリを、Heroku(Paas)へデプロイしてアプリを公開する手順について解説します。

 

 

 環境

  • OS:OS X 10.11 El Capitan
  • node:v8.1.0
  • Angular CLI:1.2.0
  • Visual Studio Code:1.13.1
  • Git:2.10.1(Apple Git-78)

 

 

Herokuとは

PaaS(Platform as a Service)と呼ばれるサービスで、

アプリケーションを実行するための環境が整っているクラウドサービス(プラットフォーム)です。

 

もう少し具体的に言うと、

インターネット越しにサーバ、OS、データベースなどが利用できるサービスです。

 

これまでは、

私たちがインターネット上でアプリケーションを公開する際、

  • サーバなどのハードウェアの調達
  • サーバのインターネット接続
  • LinuxやWindowsなどのOSインストール
  • Oracle、Postgresqlなどのデータベースセットアップ
  • Java、nodeJS、などのアプリケーション実行環境セットアップ
などの作業が必要でした。

 

HerokuなどのPaaSを利用すればこれらの作業を行わずに、

作成したアプリケーションをインターネット上に公開できます。

 

ちなみに、

今回はAngularのアプリケーションを動かすために、

HerokuのnodeJSアプリケーション実行環境を利用します。

 

 

AngularアプリをHerokuへデプロイ

Herokuへのデプロイ手順は以下です。

  1. Angularアプリ作成
  2. Herokuアカウント作成
  3. Heroku上でアプリ作成
  4. Heroku CLIインストール
  5. Herokuデプロイ用設定
  6. Angularアプリのプッシュ&デプロイ

 

1.Angularアプリ作成

作成するアプリはなんでもよいのですが、

事前にローカルで動くことを確認しておいてください。

 

本記事では、以下で作成したアプリを利用します。

【Angular入門(4)】ひとまずHello Worldしてみる(Mac編)

2.Herokuアカウント作成

Herokuアカウント登録画面を開き、登録情報を入力します。

(【Select a Language】も含めて入力内容は任意で構いません)

 

登録の際、入力したメールアドレスにメールが届きます。

届いたメールのリンクをクリックし、パスワードの設定をします。

 

 

以下の画面が開けばアカウント作成は完了です。

 

3.Heroku上でアプリ作成

新規アプリを作成します。

 

アプリ名を入力します。

 

 

以上でHeroku上でのアプリ作成は完了です。

 

4.Heroku CLIインストール

ターミナルを起動し、以下コマンドでHeroku CLIをインストールします。

command
$ brew install heroku

5.Herokuデプロイ用設定

まず、デプロイ対象プロジェクトのpackage.jsonを以下のように編集します。

  • scripts>startの値を”ng serve”⇒”node server”に変更
  • scriptsに”postinstall”: “ng build –aot -prod”の定義追加
  • devDependencies>@angular/cliをdependenciesへ移動
  • devDependencies>@angular/compiler-cliをdependenciesへ移動
  • devDependencies>typescriptをdependenciesへ移動

package.json(変更後)

package.json
{
  "name": "hello-world",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot -prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/cli": "1.2.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/compiler-cli": "^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",
    "compression": "^1.6.2",
    "core-js": "^2.4.1",
    "express": "^4.15.3",
    "rxjs": "^5.1.0",
    "typescript": "~2.3.3",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}
次に、ターミナルを起動し、

デプロイ対象のプロジェクト内にカレントディレクトリを移します。

command
$ cd helloWorld
以下コマンドでHerokuデプロイに必要なモジュールを追加します。
command
$ npm install --save express
$ npm i --save compression
次に、デプロイ対象のプロジェクト内にserverディレクトリを作成します。

作成したディレクトリ内にindex.jsを作成します。

server/index.js
const compression = require('compression');
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 8080;

// Gzip
app.use(compression());

// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/../dist'));

// Start the app by listening on the default
// Heroku port
app.listen(port);

// For all GET requests, send back index.html
// so that PathLocationStrategy can be used
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/../dist/index.html'));
});

console.log(`Server listening on ${port}`);

 

以上でHerokuデプロイ用の設定は完了です。

 

6.Angularアプリのプッシュ&デプロイ

ターミナルを開き、カレントディレクトリをデプロイ対象のプロジェクト内に移します。

command
$ cd helloWorld
更新内容をインデックスにステージングします。
command
$ git add .
ローカルリポジトリへコミットします。
command
$ git commit -am "make it better"
Herokuにログインします。(Email、Passwordを聞かれるので入力してください)
command
$ heroku login
Enter your Heroku credentials:
Email: aaaaaaaaaa@aaa.com
Password: **********
プッシュするリモートリポジトリの向き先を設定します。
command
$ heroku git:remote -a angular-helloheroku

 

プッシュ&デプロイします。

$ git push heroku master
・
・
・
remote:        Released v3
remote:        https://angular-helloheroku.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/angular-helloheroku.git
 * [new branch]      master -> master

 

google chromeを開いてデプロイ時のdeployed to Herokuの部分に記載されたURLにアクセスします。

今回はhttps://angular-helloheroku.herokuapp.com/

 

上の画面が確認できたらAngularのHerokuへのデプロイは完了です。

 

 

おわりに

今回はAngularをHeroku(PaaS)へデプロイする手順について説明しました。

 

「サーバを用意してアプリ実行環境をセットアップするのが面倒くさい。。。」

「アプリ開発に集中したい!!」

という方はぜひ利用してみてください。

 

次回はHerokuをGitHubと連携させてCI(継続的インテーグレーション)できる環境を作ってみようと思います。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください