Nuxt.jsをherokuでデプロイしてパスワードをかける #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の基本操作

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

nuxt.config.js

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

動作確認

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

$ npm run dev

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

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

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の基本コマンド
ちなみに私も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 を実行する為の処理を記述する手順となります。

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へデプロイする手順
 Nuxt.js アプリケーションに簡単にベーシック認証を付与できる nuxt-basic-auth-module のご紹介