Nuxt.js アプリケーションに簡単にベーシック認証を付与できる nuxt-basic-auth-module のご紹介 #JavaScript

Nuxt.jsで爆速アプリケーション開発をする方法や Nuxt v2へのアップデート方法や Nuxt アプリケーションのデプロイの自動化などの記事を公開したり、日本語ドキュメントの管理などをしている potato4d です。

私は普段の仕事の半分以上が Nuxt.js のプロジェクト、それもそのうち半分ほどは新規プロジェクトという状態で、同じようなコードを書くことが非常に多くあります。しかし、本来は重複するようなコードを毎回プロジェクトごとで書きたくないですし、問題があればまとめて治せるような体制にしておきたいところです。

Nuxt.js は幸いなことに、こういったコードの共通化のために任意の拡張を施すことができる「モジュール」システムを用意してくれています。公式 Web サイトによると、

もしあなたが下記に該当するならば、モジュールはきっと役に立ってくれるでしょう:

新しいプロジェクトを素早く立ち上げる必要があるアジャイル・チームのメンバーである。

Gooogle Analytics を統合するようなお決まりのタスクのための車輪の再発明にうんざりしている。

愛すべきオープンソース熱狂者であり、あなたの成果をコミュニティと簡単にシェアしたいと思っている。

品質と再利用性が重視されるエンタープライズ企業に所属している。

いつもタイトな締切に追われており、いろいろな新しいライブラリや統合の詳細を深く調べる時間がない。

低レベルのインターフェースの破壊的な変更への対応にうんざりしていて、とにかく動くものを必要としている。

https://ja.nuxtjs.org/guide/modules

ということなので、私のようなシチュエーションにはまさにぴったりですね。ということで、普段から何かあればモジュール化してしまうように心がけています。

今回は、そんなモジュールの一つとして、 ベーシック認証を3分で作る ための nuxt-basic-auth-module というモジュールを作ったのでご紹介します。

レポジトリとパッケージ名

nuxt-basic-auth-module という名称で NPM に公開しています。
https://www.npmjs.com/package/nuxt-basic-auth-module

また、レポジトリは以下となります。もしよろしければ Star などを貰えると励みになります。
https://github.com/potato4d/nuxt-basic-auth-module

利用モチベーション

ざっくりと私が考える範囲での利用モチベーションを挙げておきます。もしかしたら別にあるかもしれません。

for Web-App 開発者

多くの現場では、Pull Request に応じてレビュー用の環境が用意されているはずです。オンプレミス上に構築している場合はともかく、Heroku Review Apps のような外部サービスを利用している場合は VPN 限定などで設定ができないため、 Express サーバーを立ち上げて認証が通った場合に Express ミドルウェアとしてわざわざ Nuxt.js を呼び出すといったコードを書くことがこれまでは多くあったかと思います。

nuxt-basic-auth-module を利用すると、それらの設定をすることなく、純粋な Nuxt.js アプリケーションの範囲でベーシック認証による簡易的な認証を提供できます。

for Web 制作者

Web 制作のシチュエーションでは、多くの場合成果物は generate による静的サイト書き出しとなるはずです。基本的にはこれで問題ないはずですが、クライアントに仮ドメインで確認を依頼する機会もたびたびあるかと思います。

そういうときは、 Heroku などの適当な Node.js サーバーが立ち上がる環境に確認用の環境を用意し、 そちらのみ Univeral モードで起動 し、 nuxt-basic-auth-module を提供してやることが有効です。

開発時は特に SSR のことなどを意識する必要がなく、しかし検証環境では Node.js サーバーをメリットを活かすことが可能です。

使い方

簡単な使い方です。

インストール

雑に npm install もしくは yarn add で利用可能です。
なお、 Nuxt.js は本体のパッケージのバージョン lock には yarn.lock をつかっているため、個人的には yarn をオススメします。

$ yarn add nuxt-basic-auth-module

設定

nuxt.config.js に簡単な設定を追加します。最小限のものであれば、以下で設定可能です。

nuxt.config.js

module.exports = {
  // ...
  modules: [
    'nuxt-basic-auth-module'
  ],
  basic: {
    name: 'admin',
    pass: 'password'
  }
  // ...
}

もしステージング環境でのみ有効化したい！という場合は、環境変数由来の判定を enabled キーに付与してやるのがベストでしょう。

nuxt.config.js

module.exports = {
  // ...
  modules: [
    'nuxt-basic-auth-module'
  ],
  basic: {
    name: 'admin',
    pass: 'password',
    enabled: process.env.ENABLE_BASIC_AUTH === 'true'
  }
  // ...
}

実行

あとは普通に yarn dev をしてやるだけです。実際の動きは、下記の GIF を参照ください。

admin / password で適切にベーシック認証を有効化できていることがわかります。

その他の機能など

基本的には現在はこの機能のみですが、例えば以下のような機能は私自身が需要を感じるもしくは Pull-Request があれば今後追加されるかもしれません。

RegExp ベースの一部ルートに限定した認証機能
特定ルーティングでベーシック認証を無効化した場合に、 SPA での動作範囲でのアクセスを弾くような機能

おわりに

Nuxt.js は拡張のレールが敷かれており、ほしい機能を簡単に外部から注入することができる点も魅力の一つです。

プロジェクト内で Nuxt.js をフル活用していく形で拡張を進めるのも良いですが、 2 個 3 個とプロジェクトが増えたときには、うまい具合にライブラリとして切り出すと円滑なことも多くあります。

モジュール開発は最小で作る場合、作る種別にも寄りますが 1~2 ファイル、それぞれのファイルに 1 関数あれば作ることができるため、気軽にモジュールを作っていくことを推奨します。