概要

ローンチ前のサービスを開発・ステージング環境想定のパブリッククラウド時にデプロイして、プロジェクトメンバー(開発者、デザイナー、テスターなど)で共有して色々議論することがあると思います。その際、Basic認証と呼ばれる方法を利用して利用者を制限するやり方があります。今回は、Nuxt.jsでこのBasic認証を導入する方法について紹介したいと思います。

環境について

今回は、下記のような環境で実施しました。

  • Nuxt.js・・・JSフレームワーク
  • yarn・・・パッケージ管理
  • Mac OS ・・・開発OS
  • GAE(Google App Engine)・・・デプロイ先

Basic認証について

今回は、nuxt-basic-auth-moduleというプラグインを利用します。Basic認証のやり方は、色々あります。例えば、appacheですと.htaccessを利用したりしますが、ウェブサーバの設定で制御すると毎回、環境を調べたりしなければいけないので、良い方法ないかと思っていました。こちらのプラグインは、インフラに依存していないので何処でも簡単に利用出来そうなので使ってみようと思います。

https://www.npmjs.com/package/nuxt-basic-auth-module

導入方法

下記のコマンドを実行し、パッケージをインストールします。

yarn add nuxt-basic-auth-module

設定を追加します。nuxt.config.jsを編集します。

export default { 
// ...  
  modules: [ 
  'nuxt-basic-auth-module'  ], 
 basic: {
   name: 'AUTH USER NAME HERE',    
   pass: 'AUTH PASSWORD HERE',   
  enabled: true
},   // ...
}

動作確認

下記のようにユーザ名、パスワードが聞かれるので、nuxt.config.jsに記載した内容でログインして見て下さい。

最後に

このプラグインを利用するとストレスなくBasic認証が導入出来きました。プログラマーの中には、サーバの設定があまり得意ではない方もいますが、これでしたら簡単に導入できるので、公開前のアプリケーションなどをチーム内で共有する際などに利用してみてはいかがでしょうか。