Herokuとは
自分で作成したwebページを公開したいとき、静的なページはGitHub Pagesなどでいいですが、サーバーも動かしたいという時には対応できません。
そこで選択肢に上がってくるのがHerokuです。
この記事は
Heroku公式サイトにあるNode.js用チュートリアルを翻訳、要約、補足したものです。
公式サイトはこちら
https://devcenter.heroku.com/articles/getting-started-with-nodejs
Herokuがwebアプリも用意してくれているので、デプロイしたいアプリがない場合もできます。
以下チュートリアル
導入
このチュートリアルではNode.jsのアプリをHerokuにデプロイします。
Herokuアカウント作成、Node.js/npmのインストールはすでに終わっているものとします。
設定
このステップではHeroku CLIをインストールします。
Mac
ここからインストール
https://cli-assets.heroku.com/heroku.pkg
Homebrewが使える場合はこちら
$ brew install heroku/brew/heroku
Windows
64bit
https://cli-assets.heroku.com/heroku-x64.exe
32bit
https://cli-assets.heroku.com/heroku-x86.exe
Ubuntu16+
$ sudo snap install heroku --classic
###インストールしたら
インストールしたらHerokuのアカウントを作った時のメールアドレス、パスワードでログインします。
$ heroku login
と、書いてありますがブラウザでログインします。下のメッセージが表示されたらなんでもいいのでキーを押します。
heroku: Press any key to open up the browser to login or q to exit:
アプリの用意
デプロイ可能なサンプルアプリをクローンします。
$ git clone https://github.com/heroku/node-js-getting-started.git
$ cd node-js-getting-started
以下のようなファイル、フォルダがクローンされます。
$ ls
Procfile README.md app.json index.js package.json public test.js views
デプロイ
デプロイの前にまずcreateをします。
$ heroku create
Creating sharp-rain-871... done, stack is heroku-18
http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git
createをするとランダムでアプリの名前が付けられます。（この場合はsharp-rain-871）
その後デプロイをします。
$ git push heroku master
Counting objects: 497, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (372/372), done.
Writing objects: 100% (497/497), 231.59 KiB | 77.20 MiB/s, done.
Total 497 (delta 90), reused 497 (delta 90)
remote: Compressing source files... done.
remote: Building source:
(中略)
remote: Verifying deploy... done.
To https://git.heroku.com/sharp-rain-871.git
* [new branch] master -> master
一つはアプリが起動しているようにします。
$ heroku ps:scale web=1
Scaling dynos... done, now running web at 1:Free
アプリを開きましょう。先ほど表示されたURLでもいいのですが、openでも開けます。
$ heroku open
ログを見る
$ heroku logs --tail
先ほどのブラウザを再び開くとログが追加されます。
ログの表示はCtrl+Cで止めることができます。
Procfile
アプリの中に次のようなProcfileがあると思います。
ここでアプリ起動のためのコマンドを宣言します。
web: node index.js
稼働アプリの数を設定する（Scaleする）
今、あなたのアプリはdynoで動いています。dynoはProcfileのコマンドを実行する軽量なコンテナだと考えてください。
どのくらいのdynoが動いているかはpsコマンドで調べることができます。
$ heroku ps
Free dyno hours quota remaining this month: 550h 0m (100%)
Free dyno usage for this app: 0h 0m (0%)
For more information on dyno sleeping and how to upgrade, see:
https://devcenter.heroku.com/articles/dyno-sleeping
=== web (Free): node index.js (1)
web.1: up 2018/12/04 08:43:02 +0900 (~ 16s ago)
デフォルトではあなたのアプリは無料のdynoにデプロイされます。無料のdynoは30分間稼働しない（trafficを一つも受け取らない）とsleepします。これによって、最初のリクエスト時にdynoを起こすための数秒の遅延が発生します。続くリクエストは通常通りのパフォーマンスとなります。また、無料のdynoでは月ごとにアカウント単位の無料時間（free dyno hours）が割り当てられています。割り当てられた分を使い切るまでは全てのアプリを走らせることができます。
dynoのsleepを避けるために、hobby版やprofessional版（詳しくはDyno Types）に変えることもできます。
Scaleをゼロに変更します。
$ heroku ps:scale web=0
Scaling dynos... done, now running web at 0:Free
使用可能なdynoがなくなるため、heroku openやwebサイトの更新をするとエラーメッセージが出ます。
スケールし直します。
$ heroku ps:scale web=1
Scaling dynos... done, now running web at 1:Free
乱用防止のため、有料のアプリケーションを一つでも有効にしようとすると、アカウントの検証(account verification)が行われます。
アプリの依存関係(dependency)の記述
Herokuではアプリのrootディレクトリにあるpackage.jsonファイルを認識します。
あなたのアプリではnpm init -yというコマンドで作ることができます。
今回のデモアプリではすでにpackage.jsonは作られてます。
{
"name": "node-js-getting-started",
"version": "0.3.0",
(中略)
"engines": {
"node": "10.x"
},
(中略)
"dependencies": {
"ejs": "^2.5.6",
"express": "^4.15.2"
},
(後略)
}
package.jsonファイルは、アプリで使われているNode.jsのバージョンと共に、アプリ使用のためにインストールすべき依存モジュールが記述されています。アプリがデプロイされた際に、Herokuでは適切なNode.jsのバージョンで、npm installを行います。
もし、このコマンドをローカルで行えば、あなたのアプリをローカルで動かすことができるようになります。
$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 124 packages from 99 contributors and audited 232 packages in 6.473s
found 0 vulnerabilities
ローカルで動かす
ローカルで動かすためのコマンドもHeroku CLIでは用意されています。
$ heroku local web
[OKAY] Loaded ENV .env File as KEY=VALUE Format
13:28:12 web.1 | Listening on 5000
Herokuと同様、heroku localはProcfileに記述されたコマンドを実行します。
http://localhost:5000/ をブラウザで開くと、あなたのアプリがローカルで動いていることを確認できます。
ローカルでの実行を止めるためにはCLI上でCtrl+Cを実行します。
ローカルでの変更をPushする
このステップではローカルの変更をHerokuにどう反映させるかを学びます。例と同じように、アプリにdependencyを追加し、それを使用したコードを書いてみましょう。
まず最初にcool-ascii-facesというモジュールをpackage.jsonのdependencyに追加します。次のコマンドを打ってください。
$ npm install cool-ascii-faces
+ cool-ascii-faces@1.3.4
added 9 packages from 8 contributors and audited 244 packages in 4.556s
found 0 vulnerabilities
次にindex.jsを開き、先ほど追加したモジュールをrequireします。また、新しく/coolに対するrouteを追加します。最終的なコードはこのようになります。
const cool = require('cool-ascii-faces') // requireを追加
const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000
express()
.use(express.static(path.join(__dirname, 'public')))
.set('views', path.join(__dirname, 'views'))
.set('view engine', 'ejs')
.get('/', (req, res) => res.render('pages/index'))
.get('/cool', (req, res) => res.send(cool())) // routeを追加
.listen(PORT, () => console.log(`Listening on ${ PORT }`))
ローカルでテストしましょう。
$ npm install
$ heroku local
あなたのアプリに、http://localhost:5000/cool でアクセスします。更新するたびに、可愛い顔文字が表示されると思います。꒰･◡･๑꒱
では、この変更をデプロイします。ほぼ全てのデプロイは同様の方法でやります。
まず、変更したファイルをgit repositoryに追加します。
$ git add .
次にコミットします。
$ git commit -m "Add cool face API"
[master 704827e] Add cool face API
3 files changed, 1051 insertions(+)
create mode 100644 package-lock.json
そしてデプロイします。
$ git push heroku master
Counting objects: 8, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (8/8), done.
Writing objects: 100% (8/8), 10.72 KiB | 5.36 MiB/s, done.
Total 8 (delta 5), reused 0 (delta 0)
remote: Compressing source files... done.
...
remote: Verifying deploy... done.
To https://git.heroku.com/sharp-rain-871.git
97e6c72..8609c4f master -> master
最後に、ちゃんと動作しているかを確認します。
$ heroku open cool
また違う顔文字をあなたは目にするはずです。
後編はこちら