Nuxt.jsをherokuでデプロイしてパスワードをかける

身内でちょっとしたアプリを共有して、パスワードで閲覧の制限をしたい場合などに参考にしてください。
Nuxt.jsのBASIC認証のモジュールを利用します。

## ローカルにNuxt.jsのアプリ構築

### フォルダ作成

まずはデスクトップでもどこでもよいので、フォルダを作成します。

```
$ mkdir sample
$ cd sample
```

### Nuxt.jsの構築

作成したフォルダの中でNuxt.jsのサンプルアプリを作成します。

```
$ create-nuxt-app sampleApp
```

create-nuxt-appの初期設定は任意です。エンター連打で構いません。

```
? Project name sampleApp
? Project description My priceless Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name (your name) 
```

## BASIC認証の導入

作成したnuxt.jsアプリのフォルダへ移動します。

```
$ cd sampleApp/
```

### モジュール追加

npmまたはyarnでnuxt-basic-auth-moduleをインストールします。
このモジュールにより、手軽にBASIC認証を導入できます。

```
$ npm i nuxt-basic-auth-module
```

### NAME(ID)とPASSの設定

モジュールを追加した後、BASIC認証のNAME(ID)とPASSを設定します。
nuxt.config.jsを編集します。

```
$ vi nuxt.config.js
```

viの操作が分からない方は、以下の記事を一読することをオススメします。
[vimの基本操作](https://qiita.com/tasaki-i3/items/49ebad1dca20c669ad25)

nuxt.config.jsファイルを以下の様に変更します。
basicのうち、nameとpassは任意で設定してください。

```js:nuxt.config.js
  modules: [
    'nuxt-basic-auth-module'
  ],
  basic: {
    name: 'admin',
    pass: 'xxx'
  },
```

### 動作確認

nuxt.config.jsファイルを編集後、runします。

```
$ npm run dev
```


上記コマンド実行後に表示されるURL(localhost)にアクセスして、以下のようにログインが求められればOKです。

<img width="446" alt="スクリーンショット 2019-02-21 1.12.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/323074/6dea2624-8459-6536-5929-2024e089fad6.png">

さきほどnuxt.config.jsのbasicにて、任意で設定していただいた値を用いてログインしてください。
ログイン後、以下の様にNuxt.jsのデフォルトのトップ画面が表示されていれば問題ありません。

<img width="584" alt="スクリーンショット 2019-02-21 0.38.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/323074/f643cdfe-cfc7-f096-0b0d-f43d97a685b0.png">

## herokuに環境構築

### herokuにログイン

以下のコマンドでherokuにログインします。

```
$ heroku login
```

ブラウザが立ち上がるので、herokuのIDとPASSを入力してログインします。

### herokuを作成

ログイン後はターミナルに戻りherokuをcreateする。
作成にはしばらく時間がかかります。

```
$ heroku create

Creating app... done, ⬢ xxx
https://xxx.herokuapp.com/ | https://git.heroku.com/xxx.git
```

ここで表示されるURLがherokuのURLとなります。

### herokuへpush

これでherokuのアプリケーション作成は完了です。
herokuのcreateが完了したら、コンテンツをheorkuにpushします。
以下の記述のうち、3行目を入力した後は処理にしばらく時間がかかります。

```
$ git add .
$ git commit -m "first commit"
$ git push heroku master
```

gitの基本が分からない方は、以下の記事を一読してみることをオススメします。
[Gitの基本コマンド](https://qiita.com/yuj/items/2d965c09877a43ce7c03)
ちなみに私もGit勉強中です。

## Nuxt.jsによるherokuの為の設定

### herokuのconfig追加

Nuxt.jsをherokuにデプロイする際に必要な作業が、もう少しだけあります。
この記述は公式のドキュメントのまんまです。

```
$ heroku config:set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production
```

### herokuの挙動設定

herokuに構築したアプリケーションが立ち上がった時の動作を設定します。
viで package.json を編集します。

```
$ vi package.json
```

次にheroku で run した時に npm run build を実行する為の処理を記述する手順となります。


```js:package.json
"scripts": {
    "dev": "nuxt",
    ...
    "heroku-postbuild": "npm run build"
},
```

### herokuへ再push

ここまでで編集したファイルをherokuに反映させる為、herokuへpushします。

```
$ git add .
$ git commit -m "first commit"
$ git push heroku master
```

pushした後に、heroku作成時のURLにアクセスします。
ローカル環境で試した時と同様のBASIC認証が効いたページになっていれば完了です。

## おわりに
npm run buildを最初から記述してherokuにpushしておけば1度のpushだけで済みます。
流れを汲んだほうが分かりやすいと思い、herokuへのpushを2度行う作業で説明しました。

## 参考記事
[Nuxt.jsをHerokuへデプロイする手順](https://qiita.com/00092/items/4f7e5d08c897e113e50c)
[Nuxt.js アプリケーションに簡単にベーシック認証を付与できる nuxt-basic-auth-module のご紹介](https://qiita.com/potato4d/items/e37d9acf320d7c1b327c)