61
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Node.jsでのHerokuチュートリアル前編

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:

Heroku CLI login on browser

アプリの用意

デプロイ可能なサンプルアプリをクローンします。

$ 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

node-js-getting-started website

ログを見る

$ heroku logs --tail

先ほどのブラウザを再び開くとログが追加されます。
ログの表示はCtrl+Cで止めることができます。

Procfile

アプリの中に次のような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サイトの更新をするとエラーメッセージが出ます。

application error.png

スケールし直します。

$ 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は作られてます。

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 localProcfileに記述されたコマンドを実行します。
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を追加します。最終的なコードはこのようになります。

index.js
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

また違う顔文字をあなたは目にするはずです。

後編はこちら

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
61
Help us understand the problem. What are the problem?