記事の内容

使用方法をよく理解するため、作業を三段階に分けた。

Step１
ngrokサービスで外部URLを発行し、
Nuxt+vueプロジェクトのローカル環境を外部からも見られるようにする。

Step２
ngrokサービスアカウントとローカルの開発環境をAuthtokenで紐付けて
BASIC認証をかけた状態で外部URLを発行しするできるようにする。

Step3
ngrokを「yarn run dev:ngrok」で実行できるようnuxtのbuild処理に組み込む。

#記事を書くまでの経緯
2020 Vue/Vuetify WEB開発 TestCafeを使ったE2Eテスト基礎編

上記記事で、TestCafeを使ったE2Eテストを作成した。
TestCafeはBrowserstackと連携して
複数の端末やOS、ブラウザでE２Eテストを実行することができる。

BrowserstackはローカルホストのURLは指定できないため
httpで外部公開し、そのURLをターゲットに
BrowserstackでE2Eテストを実行したい。

この記事ではまずngrokサービスの利用方法についてまとめる。

環境

MacBook Pro (Retina, 13-inch, Early 2015)
OS：macOS Mojava 10.14.6
サーバサイドJavaScript：node v12.14.1
パッケージマネージャー： yarn v1.22.4
フレームワーク： nuxt v2.0.0
JavaScriptライブラリ： Vue v2.6.11
UIライブラリー： vuetify v2.2.27

サンプル環境

Gitにこの記事の項目３−３の状態のサンプルプロジェクトがあります
（3-2で設定する.envファイルを除く）

記事を確認しながら動かしてみたい場合
ダウンロードしpackage.jsonをインストールしてください

// ※プロジェクトディレクトリに移動しpackage.jsonをインストール
$ yarn install

Step１

目的
Nuxt+Vueプロジェクトのローカル環境を、
ngrokサービスで外部URLを発行しする。

手順

ngrokをダウンロード
ローカル環境を起動
ngrokを実行

[1-1]ngrokをダウンロード

公式サイトからダウンロード
展開したファイルをプロジェクトルートに配置

ダウンロードされるファイルngrok-stable-darwin-amd64.zip を展開して
Unix実行ファイルの「ngrok」をプロジェクトルートに配置する。

[1-2]ローカル環境を起動

サンプルのpackage.jsonを yarn install 済み前提
プロジェクトのフォルダで以下を実行

$ yarn run dev

nuxt.config.jsでポート3000を設定しているので
http://localhost:3000
でサイトを確認することができます。

nuxt.config.jsでポートを設定していない場合は以下のように指定して起動

  server: {
    port: 3000,
    host: '0.0.0.0',
  },

[1-3]ngrokを実行

[1-1]でルートディレクトリに配置した
「ngrok」ファイルを実行する
「http ポート番号」コマンドで、ドメインが発行される

今回はポート3000と指定してるので以下のコマンドを実行する

$ ./ngrok http 3000

実行するとこのような画面に切り替わる
「Forwarding」に書いてあるURLが「http://localhost:3000」の公開URLとなる

ngrokを停止したい場合は「Ctrl + C」でコンソールを止めてください。

Step２

目的
ngrokサービスアカウントとローカルの開発環境をAuthtokenで紐付けて
BASIC認証をかけた状態で外部URLを発行しするできるようにする。

目的1では完全にローカルが外部に晒された状態になるため
BASIC認証をかけて保護したい

前提
ngrokでは、高度な機能を利用する場合
まずAuthtokenを使い、開発環境の認証（紐付け）を行う必要がある
参考：https://ngrok.com/docs

BASIC認証をかけURLを発行することは、
この「高度な機能」に分類されるため、Authtokenの認証が必要となる。

手順

ngrokサービスのアカウントを作る
ngrokでAuthtokenを取得する
Authtokenでローカル環境を認証させる
BASIC認証コマンドをつけてngrokを実行

[2-1]ngrokサービスのアカウントを作る

ngrok.comでアカウントを作成
2020年時点での公式サイトはこのようになっている

「Siginup」でアカウントを作成するとダッシュボードに飛ぶ

[2-2]ngrokでAuthtokenを取得する

Authentication > Your Authtoken ページに記載があることを確認。

##[2-3]Authtokenでローカル環境を認証させる

ngrokのコマンドでと、先ほど確認したAuthtokenで簡単に認証が可能

$ ./ngrok authtoken [Authtoken]

MACOSの場合は以下のファイルが作成される

$ Authtoken saved to configuration file: /Users/[username]/.ngrok2/ngrok.yml

[2-4]BASIC認証コマンドをつけてngrokを実行

Authtokenで認証することで、「-auth」コマンドが利用できるようになっている
なおAuthtoken認証を行わない場合はエラーとなる

※username:password　は好きなユーザー名とパスワードを設定してください

$ ./ngrok http -auth="username:password" 3000

上記コマンドで実行し、発行されたURLへ飛ぶと認証を求められるようになっている
BASIC

Step3

目的
ngrokを「yarn run dev:ngrok」で実行できるようnuxtのbuild処理に組み込む。

手順

「ngrok」ファイルを@nuxtjs/ngrokプラグインに置き換える
「.env」ファイルの作成
nuxt.config.jsに設定を追加する

[3-1]「ngrok」ファイルを@nuxtjs/ngrokプラグインに置き換える

[1-1]でダウンロードしたngrokは不要になるので削除
以下のコマンドで@nuxtjs/ngrokプラグインを追加

$ yarn add -D @nuxtjs/ngrok

@nuxtjs/ngrok
https://www.npmjs.com/package/@nuxtjs/ngrok

[3-2]「.env」ファイルの作成

[2-2]で取得したトークンと
[2-4]で設定したユーザー名：パスワードを変数に設定する

NGROK_AUTHTOKEN=ここにトークン
NGROK_AUTH=username:password

[3-3]nuxt.config.jsに設定を追加する

nuxtでプラグインを使用するためbuildModulesで読み込む

通常の「yarn run dev」とは処理を分けたいので
package.jsonのscriptsでngrokを使用するかどうか判定する変数を設定する

package.json

"scripts": {
    "dev": "nuxt",
    "dev:ngrok": "USE_NGROK=TRUE nuxt",

nuxt.config.js

const buildModules = [
  '@nuxtjs/eslint-module',
  '@nuxtjs/stylelint-module',
  '@nuxtjs/vuetify',
];

if (process.env.USE_NGROK) {
  buildModules.push('@nuxtjs/ngrok');
}

export default {
  buildModules: buildModules,

//~ 以下省略

この状態で「yarn run dev:ngrok」すると
nuxtローカルサーバーが起動すると同時に
BASIC認証無しの状態の外部URLが発行される

Step2で設定したようにBASIC認証ありで発行したいので
以下の設定もnuxt.config.jsに追記する

authtokenとauthは、３−１で設定したenvファイルの変数を読み込む

  ngrok: {
    authtoken: process.env.NGROK_AUTHTOKEN,
    auth: process.env.NGROK_AUTH,
    region: 'jp',
    addr: 3000,
    proto: 'http',
  },

改めて「yarn run dev:ngrok」すると
BASIC認証ありで外部URLが発行されるようになる

参考

ngrok Documentation
https://ngrok.com/docs

Vue.jsの開発環境とngrokを連携する方法
https://qiita.com/idani/items/aecd90a9e949c8dbf4a8

Vue.js / Nuxt.jsのアプリをngrokで動かす（サブディレクトリ対応）
https://qiita.com/ktkiyoshi/items/c6b7decfa368cd7ce579

【3分で出来る】ngrokでデプロイをしてみよう！
https://qiita.com/derorian3/items/5ab961c1d5cff5f50141

ngrokを使ってローカル開発中のVueアプリをHTTPSで公開する
https://dev.classmethod.jp/articles/ngrok-vue/

まとめと課題

buildModulesの切り替えはもう少しスムーズに行う方法があるのだろうか？

外部URLがあればBrowserstackを利用できるようになる
次回はTestCafeとBrowserstackの連携方法についてまとめる

ngrokでローカルサーバー起動と同時にBASIC認証付き外部URLを発行する方法【Nuxt / vue】