情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Heroku+Node.jsの使い方(3)Herokuアプリケーションの作成と公開

この連載記事ではHerokuの使い方を解説していきます。

なお、この連載記事ではHerokuで利用するプログラミングプラットフォームとしてNode.jsを採用することにします。

今回は前回の記事で作成したNode.jsアプリケーション(ウェブサイト)をHerokuアプリケーションとして公開します。

フォルダの作成

まず、Herokuアプリケーションのコードを格納するフォルダを作成し、作成したフォルダに移動します。

C:\work\heroku>mkdir app1

C:\work\heroku>cd app1

package.jsonの作成

Node.jsアプリケーションをHerokuアプリケーションとして公開するにはpackage.jsonを作成する必要があります。

なので、npm initコマンドを実行して現在のフォルダにpackage.jsonを作成します。

アプリケーションの名称はapp1としました。また、エントリポイントはデフォルトのindex.jsとしておきます。

C:\work\heroku\app1>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (app1)
version: (1.0.0)
description: sample heroku app
entry point: (index.js)
test command:
git repository:
keywords:
author: pizyumi
license: (ISC) MIT
About to write to C:\work\heroku\app1\package.json:

{
  "name": "app1",
  "version": "1.0.0",
  "description": "sample heroku app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "pizyumi",
  "license": "MIT"
}


Is this ok? (yes)

npm initコマンドの実行が完了すると現在のフォルダにpackage.jsonが作成されますが、これだけでは不十分なので、scriptsプロパティにstartコマンドを追加します。このコマンドの内容はnode index.jsとします。

これにより、npm startコマンドを実行するとnode index.jsというコマンドが実行されるようになります。

変更したpackage.jsonの内容は下のようになります。

{
  "name": "app1",
  "version": "1.0.0",
  "description": "sample heroku app",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "pizyumi",
  "license": "MIT"
}

Express.jsのインストール

前回の記事で作成したNode.jsアプリケーションはexpressモジュールを利用していましたので、このNode.jsアプリケーションを実行するにはexpressモジュールをインストールする必要があります。

なので、npm installコマンドを実行してexpressモジュールをインストールします。

C:\work\heroku\app1>npm install express --save
app1@1.0.0 C:\work\heroku\app1
`-- express@4.14.0
  +-- accepts@1.3.3
  | +-- mime-types@2.1.14
  | | `-- mime-db@1.26.0
  | `-- negotiator@0.6.1
  +-- array-flatten@1.1.1
  +-- content-disposition@0.5.1
  +-- content-type@1.0.2
  +-- cookie@0.3.1
  +-- cookie-signature@1.0.6
  +-- debug@2.2.0
  | `-- ms@0.7.1
  +-- depd@1.1.0
  +-- encodeurl@1.0.1
  +-- escape-html@1.0.3
  +-- etag@1.7.0
  +-- finalhandler@0.5.0
  | +-- statuses@1.3.1
  | `-- unpipe@1.0.0
  +-- fresh@0.3.0
  +-- merge-descriptors@1.0.1
  +-- methods@1.1.2
  +-- on-finished@2.3.0
  | `-- ee-first@1.1.1
  +-- parseurl@1.3.1
  +-- path-to-regexp@0.1.7
  +-- proxy-addr@1.1.3
  | +-- forwarded@0.1.0
  | `-- ipaddr.js@1.2.0
  +-- qs@6.2.0
  +-- range-parser@1.2.0
  +-- send@0.14.1
  | +-- destroy@1.0.4
  | +-- http-errors@1.5.1
  | | +-- inherits@2.0.3
  | | `-- setprototypeof@1.0.2
  | `-- mime@1.3.4
  +-- serve-static@1.11.2
  | `-- send@0.14.2
  |   `-- ms@0.7.2
  +-- type-is@1.6.14
  | `-- media-typer@0.3.0
  +-- utils-merge@1.0.0
  `-- vary@1.1.0

npm WARN app1@1.0.0 No repository field.

index.jsの作成

前回の記事で作成したNode.jsアプリケーションをindex.jsという名称で現在のフォルダに作成します。

つまり、下のような内容のindex.jsを現在のフォルダに作成します。

var express = require('express');
var http = require('http');

var app = express();
app.set('x-powered-by', false);
app.set('case sensitive routing', true);
app.set('strict routing', true);
app.use(function (req, res, next) {
    res.status(200);
    res.type('text/plain; charset=utf-8');
    next();
});
app.get('/', function (req, res, next) {
    res.send('welcome to pizyumi\'s website. this is home page.\r\n');
});
app.get('/author', function (req, res, next) {
    res.send('author is pizyumi.\r\n');
});
app.get('/hello', function (req, res, next) {
    res.send('this is hello page.\r\n');
});
app.get('/hello/*', function (req, res, next) {
    res.send('hello, ' + req.path.split('/')[2] + '.\r\n');
});
app.get('*', function (req, res, next) {
    res.status(404);
    res.send(http.STATUS_CODES[404] + '\r\n');
});
app.all('*', function (req, res, next) {
    res.status(501);
    res.send(http.STATUS_CODES[501] + '\r\n');
});
var server = app.listen(process.env.PORT, function () {
    console.log('http server is running...');

    var f = false;
    process.on('SIGTERM', () => {
        if (f) {
            return;
        }
        f = true;

        console.log('http server is closing...');

        server.close(function () {
            console.log('http server closed.');
            process.exit(0);
        });
    });
});
server.on('error', function (err) {
    console.error(err);
    process.exit(1);
});

Gitリポジトリの作成

Herokuアプリケーションを公開するにはHerokuアプリケーションのコードをGitリポジトリとして管理する必要があります。

なので、まず、git initコマンドを実行して現在のフォルダでGitリポジトリを新規作成します。

C:\work\heroku\app1>git init
Initialized empty Git repository in C:/work/heroku/app1/.git/

次に、Gitリポジトリから除外するフォルダやファイルを指定するために現在のフォルダに下のような.gitignoreファイルを作成します。

node_modules

これにより、上でインストールしたexpressモジュールが格納されているnode_modulesフォルダはGitリポジトリから除外されます。

なお、Gitリポジトリからは除外したくないもののHerokuアプリケーションからは除外したいフォルダやファイルを指定するにはHerokuアプリケーションのコードの最上位のフォルダに.slugignoreファイルを.gitignoreファイルと同様の形式で作成します。

ただし、.gitignoreファイルとは異なり、.slugignoreファイルでは!パターンを使用することはできませんので注意してください。

次に、git addコマンドを実行してGitリポジトリのコミット対象を追加します。

C:\work\heroku\app1>git add .
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory.

最後に、git commitコマンドを実行してGitリポジトリのコミットを行います。

C:\work\heroku\app1>git commit -m "sample app"
[master (root-commit) d3e7071] sample app
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory.
 3 files changed, 64 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 index.js
 create mode 100644 package.json

アプリケーションの公開

Herokuアプリケーションを公開するにはまずHeroku上でHerokuアプリケーションを新規作成する必要があります。

なので、まず、heroku loginコマンドを実行してHerokuにログインします。

heroku loginコマンドを実行すると、ユーザ名(電子メールアドレス)とパスワード(APIキー)の入力が求められますので、入力を行います。

パスワードとしては通常のパスワードではなくAPIキーを入力しなければなりませんので注意してください

APIキーはHerokuのダッシュボードのAccountページのAPI Key欄に書かれています。

C:\work\heroku\app1>heroku login
Enter your Heroku credentials.
Email: pizyumi@hotmail.co.jp
Password (typing will be hidden):
Logged in as pizyumi@hotmail.co.jp

次に、heroku createコマンドを実行してHeroku上でHerokuアプリケーションを新規作成します。

C:\work\heroku\app1>heroku create
Creating app... done, floating-mountain-84380
https://floating-mountain-84380.herokuapp.com/ | https://git.heroku.com/floating-mountain-84380.git

このコマンドを実行すると、Heroku上でのHerokuアプリケーションの新規作成に加えて、現在のフォルダのGitリポジトリにherokuという名称のリモートが追加されます。

そして、herokuリモートはHeroku上のHerokuアプリケーションのGitリポジトリを指し示しています。

C:\work\heroku\app1>git remote -v
heroku  https://git.heroku.com/floating-mountain-84380.git (fetch)
heroku  https://git.heroku.com/floating-mountain-84380.git (push)

次に、git pushコマンドを実行してGitリポジトリをherokuリモート、すなわち、Heroku上のHerokuアプリケーションのGitリポジトリにプッシュします。

なお、プッシュは1時間に75回までしか行うことができませんので注意してください。

C:\work\heroku\app1>git push heroku master
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (5/5), 969 bytes | 0 bytes/s, done.
Total 5 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:
remote:        Resolving node version (latest stable) via semver.io...
remote:        Downloading and installing node 6.9.1...
remote:        Using default npm version: 3.10.8
remote:
remote: -----> Restoring cache
remote:        Skipping cache restore (new runtime signature)
remote:
remote: -----> Building dependencies
remote:        Installing node modules (package.json)
remote:        app1@1.0.0 /tmp/build_ccb7f965bf10e85d54518ff53814620a
remote:        └─┬ express@4.14.0
remote:        ├─┬ accepts@1.3.3
remote:        │ ├─┬ mime-types@2.1.14
remote:        │ │ └── mime-db@1.26.0
remote:        │ └── negotiator@0.6.1
remote:        ├── array-flatten@1.1.1
remote:        ├── content-disposition@0.5.1
remote:        ├── content-type@1.0.2
remote:        ├── cookie@0.3.1
remote:        ├── cookie-signature@1.0.6
remote:        ├─┬ debug@2.2.0
remote:        │ └── ms@0.7.1
remote:        ├── depd@1.1.0
remote:        ├── encodeurl@1.0.1
remote:        ├── escape-html@1.0.3
remote:        ├── etag@1.7.0
remote:        ├─┬ finalhandler@0.5.0
remote:        │ ├── statuses@1.3.1
remote:        │ └── unpipe@1.0.0
remote:        ├── fresh@0.3.0
remote:        ├── merge-descriptors@1.0.1
remote:        ├── methods@1.1.2
remote:        ├─┬ on-finished@2.3.0
remote:        │ └── ee-first@1.1.1
remote:        ├── parseurl@1.3.1
remote:        ├── path-to-regexp@0.1.7
remote:        ├─┬ proxy-addr@1.1.3
remote:        │ ├── forwarded@0.1.0
remote:        │ └── ipaddr.js@1.2.0
remote:        ├── qs@6.2.0
remote:        ├── range-parser@1.2.0
remote:        ├─┬ send@0.14.1
remote:        │ ├── destroy@1.0.4
remote:        │ ├─┬ http-errors@1.5.1
remote:        │ │ ├── inherits@2.0.3
remote:        │ │ └── setprototypeof@1.0.2
remote:        │ └── mime@1.3.4
remote:        ├─┬ serve-static@1.11.2
remote:        │ └─┬ send@0.14.2
remote:        │   └── ms@0.7.2
remote:        ├─┬ type-is@1.6.14
remote:        │ └── media-typer@0.3.0
remote:        ├── utils-merge@1.0.0
remote:        └── vary@1.1.0
remote:
remote:
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 2 cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (nothing to cache)
remote:
remote: -----> Build succeeded!
remote:        └── express@4.14.0
remote:
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote:        Done: 13.6M
remote: -----> Launching...
remote:        Released v3
remote:        https://floating-mountain-84380.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy.... done.
To https://git.heroku.com/floating-mountain-84380.git
 * [new branch]      master -> master

これでHerokuアプリケーションが公開され、起動されました。

heroku openコマンドを実行すると、公開されたHerokuアプリケーションをブラウザで開くことができます。

C:\work\heroku\app1>heroku open

下のように正しくアプリケーションが動作していることが分かります。

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-Heroku, Node.js