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:
```

<img width="959" alt="Heroku CLI login on browser" src="https://qiita-image-store.s3.amazonaws.com/0/147715/7cf4986a-3634-d2b7-14a4-14ab248af167.png">


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

```
$ 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
```

<img width="1210" alt="node-js-getting-started website" src="https://qiita-image-store.s3.amazonaws.com/0/147715/29be529b-7306-9d43-eae6-ee43f225bd85.png">

## ログを見る

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

## Procfile
アプリの中に次のようなProcfileがあると思います。
ここでアプリ起動のためのコマンドを宣言します。

```:Procfile
web: node index.js
```

## 稼働アプリの数を設定する（Scaleする）

今、あなたのアプリは[dyno](https://devcenter.heroku.com/articles/dynos)で動いています。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](https://devcenter.heroku.com/articles/free-dyno-hours)）が割り当てられています。割り当てられた分を使い切るまでは全てのアプリを走らせることができます。

dynoのsleepを避けるために、hobby版やprofessional版（詳しくは[Dyno Types](https://devcenter.heroku.com/articles/dyno-types)）に変えることもできます。

Scaleをゼロに変更します。

```
$ heroku ps:scale web=0
Scaling dynos... done, now running web at 0:Free
```
使用可能なdynoがなくなるため、heroku openやwebサイトの更新をするとエラーメッセージが出ます。

<img width="580" alt="application error.png" src="https://qiita-image-store.s3.amazonaws.com/0/147715/0efb1e69-3345-eac6-23ce-2b9e157bd1b1.png">

スケールし直します。

```
$ heroku ps:scale web=1
Scaling dynos... done, now running web at 1:Free
```

乱用防止のため、有料のアプリケーションを一つでも有効にしようとすると、アカウントの検証([account verification](https://devcenter.heroku.com/articles/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 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を追加します。最終的なコードはこのようになります。

```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
```

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


## 後編はこちら

https://qiita.com/shti_f/items/a384b4724610462f6d8c