NuxtでBASIC認証おおおおおおおおおおお

Nuxtでポートフォリオサイトを作った際に、BASIC認証（nuxt-basic-auth-module）を使ってみました。
その際、Netlifyでは、BASIC認証が使えなかったので、
無料でBASIC認証が使えるHerokuにした事で解決出来た。
忘れてしまいそうなので、記事にします。

#前提
各バージョンは下記の通り

# node
v10.15.3

# npm
v6.4.1

# nuxt
v2.7.1

Windowsの方は下記も入れておきましょう
Heroku CLI

#まずは、インストール

npm install nuxt-basic-auth-module # or yarn add nuxt-basic-auth-module

#設定方法
インストール後、nuxt.config.jsを開いてmodules内にnuxt-basic-auth-moduleを記述。
あとはbasicの中にnameとpassを設定するだけ。

nuxt.config.js

  /*
   ** Nuxt.js modules
   */
  modules: [
    'nuxt-basic-auth-module'
  ],
  basic: {
    name: 'dev',
    pass: 'sample123'
  },

#設定出来ているか確認

npm run dev

http://localhost:3000で開いた時に、
BASIC認証が動いていれば成功です。

#あとはアップするだけ！

NetlifyでWebサイトを公開する方法
などを参考にしながら、Netlifyでアップしてみる。

#ところが、、、、Netlifyは有料版じゃないとダメ！？
アップロードは出来たけど、BASIC認証動いて無くね？
ということで、料金プランを見てみると、、、

毎月$45から「Basic authentication headers」とあるので、使えないっぽい。
毎月約1,600円は、さすがに高い気がするので、無料でBASIC認証が使える所を探すことに。。。。

#Herokuなら無料でBASIC認証が使える
まずは、Heroku CLIでインストールしておく。

##heroku上にアプリを作成する

#nuxt.config.jsなどがあるディレクトリで、
heroku create

##herokuへデプロイ

git push heroku master

##Nuxt.jsのデプロイに必要な基本設定

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

package.jsonを開き、herokuにnpm run buildを実行させるために
"heroku-postbuild": "npm run build"を追記します。

package.json

{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "heroku-postbuild": "npm run build" ←これ。
  }

設定したものをpushして更新。

git push heroku master

作成したアプリを下記コマンドで開いてみる。

heroku open

これでBASIC認証がかかっていれば、完了！。

参考
NetlifyでWebサイトを公開する方法
Herokuが便利になるToolbeltのインストール(Windows用)