アプリケーションを公開しよう - osamu38/node-express-curriculum GitHub Wiki

アプリケーションを公開しよう

Herokuとは？

Herokuは元々Ruby on Railsを対象とした、Amazon Web Services（AWS）のIaaS上に構築されたPaaSで、デプロイには分散リポジトリのGitを利用するなど、Webアプリケーションの開発から公開まで非常に簡単にできる優れたプラットフォームです。

よくわからない言葉がたくさんありますが、重要なことはWebアプリケーションの開発から公開まで非常に簡単にできる優れたプラットフォームということです。

今までのカリキュラムを通じてローカルでアプリケーションを動かすことができるようになりました。このアプリケーションをサーバーに置いて動かすのは実は結構手間がかかります。その作業を簡単にするものがHerokuだと思ってください。

Herokuアカウントを作ってみよう

ではさっそくHerokuのアカウントを作ります。Herokuにアクセスしてみましょう。

中央にあるSIGN UP FOR FREEをクリックしてください。

ここではFirst nameとLast nameとEmailとSelect a Languageを埋めてCreate Free Accountをクリックしてください。（Select a Languageは必ずNode.jsじゃないといけないわけではありませんが、Node.jsに対して愛があるならNode.jsにしましょう。）

完了したら↑の画面が表示されると思います。この状態ではまだアカウントは作成されていません。

入力したメールアドレスが本人のものか確認のメールが送られるので確認してください。

URLが2つあるので上のURLをクリックしてください。

Herokuにログインする際に使用するパスワードを設定してください。

入力後にSet password and log inをクリックしてください。

これでアカウント登録完了です。下にある**Click here to proceed as ~**をクリックしてください。

このぺージがHerokuのダッシュボードになります。では次にHerokuで様々なサービスを利用するためにクレジットカードの登録を行います。（ちなみに今回作るサービスをHerokuにあげたところで流入はほぼ0に近いためお金がかかることはありません。）

Herokuアカウントにクレジットカード情報を紐づけよう

左側の自分のアイコン画像をクリックしてください。

メニューの中からManage accountをクリックしてください。

タブがAccountになっているのでBillingをクリックしてください。

ここがクレジットカード情報の設定画面になります。Add Credit Cardをクリックしてください。

ここでクレジットカード情報を入力します。もし英語での住所の書き方がわからない場合は英語の住所の書き方を見て記述してください。

すべて入力が完了したら、Save Detailsをクリックしてください。

これでHerokuアカウントの設定は完了です。

Heroku Toolbeltをインストールしよう

では次にHeroku Toolbeltをダウンロードします。これを導入することでターミナルでherokuコマンドが使えるようになります。

Heroku Toolbelt for Mac OS Xをクリックしてください。

ダウンロードしたheroku-toolbelt.pkgをクリックしてください。

Heroku Toolbeltをインストールするためのダイアログが表示されます。

続けるをクリックしてください。

インストールをクリックしてください。

パスワードを入力後にソフトウェアをインストールをクリックしてください。

閉じるをクリックしてください。

これでHeroku Toolbeltの導入は完了です。

Herokuでサービスを動かすための設定をしよう

Procfileを作成します。

web: node ./bin/www

ProcfileはHeroku上でアプリケーションを動かすときに起点となるファイルを記述します。

.gitignoreを作成します。

node_modules
.DS_Store

.gitignoreはGit上で管理しないものを記述するファイルです。

package.jsonを以下のように書き換えます。

    // 中略
    "serve-favicon": "~2.3.0"
  },
  "engines": {
    "node": "5.5.0",
    "npm":  "3.6.0"
  }
}

package.jsonのenginesに使うNode.jsやnpmのバージョンを追加します。

では次にherokuコマンドを利用するのでターミナルを起動します。

$ heroku login

このコマンドでHerokuにログインします。ログインする際にEmailとPasswordを求められるので、Herokuアカウント作成時に登録したものを入力してください。

$ heroku create node-test-[任意の文字列] （例: node-test-arata）
http://node-test-[任意の文字列].herokuapp.com/ | [email protected]:node-test-[任意の文字列].git

このコマンドでHeroku上にURLとGitのリポジトリが作成されます。

URLが作成されたのでhttp://node-test-[任意の文字列].herokuapp.com/にアクセスしてみましょう。

これが初期画面になります。このURLに自分のサービスを公開したいと思います。

$ heroku addons:create cleardb:ignite -a node-test-[任意の文字列]

このコマンドでHerokuでMySQLが使えるようになります。

$ heroku config -a node-test-[任意の文字列] | grep CLEARDB_DATABASE_URL
CLEARDB_DATABASE_URL: mysql://[user]:[password]@[host]/[database]?reconnect=true

このコマンドでHerokuに作成されたデータベースの情報が表示されます。

そのため本番のデータベースの情報と書き換える必要があります。

mysqlConnection.jsを以下のように書き換えます。

var mysql = require('mysql');

// local用
// var dbConfig = {
//   host: '127.0.0.1',
//   user: 'root',
//   password: '',
//   database: 'bulletin_board'
// };

// リリース用
var dbConfig = {
  host: '[host]',
  user: '[user]',
  password: '[password]',
  database: '[database]'
};

var connection = mysql.createConnection(dbConfig);

// これはHerokuのMySQLのためのハックです。
setInterval(function() {
  connection.query('SELECT 1');
}, 5000);

module.exports = connection;

Herokuにデプロイしよう

では最後にHerokuにGitからソースコードをデプロイしたいと思います。

GitからHerokuのサーバーにpushするためにはHeroku側にssh-keyを登録しないといけません。

$ heroku keys

このコマンドでメールアドレスとssh-rsaが表示されていれば大丈夫です。

もしssh-keyが存在しない場合は作成する必要があります。

$ ssh-keygen -t rsa -C "[email protected]"

このコマンドでssh-keyを作成します。

$ heroku keys:add ~/.ssh/id_rsa.pub

このコマンドでssh-keygenで作成された公開鍵ををHerokuに登録させます。

$ git init
$ git add .
$ git commit -m "initial commit"
$ git remote add heroku [email protected]:node-test-[任意の文字列].git
$ git push heroku master

これでGitを使ってHerokuにデプロイすることができました。

あとは先ほど作成されたURL、http://node-test-[任意の文字列].herokuapp.com/にアクセスしてみましょう。

前のページ：画像を投稿してみよう

次のページ：ESLintでソースコードの品質を保とう