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


# 記事の内容

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

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

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

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

#記事を書くまでの経緯
[2020 Vue/Vuetify WEB開発 TestCafeを使ったE2Eテスト 基礎編](https://qiita.com/shiho_hoshino/items/62ad3f18be5105983f35)

上記記事で、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ファイルを除く）

https://github.com/shiho-hoshino/e2e-sample/tree/ngrok_test

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

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

# Step１

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

**手順**

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

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

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

![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645692/7bf98f5d-d379-75e4-4bb6-3bcec744708c.png)

ダウンロード されるファイル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でポートを設定していない場合は以下のように指定して起動

```javascript
  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となる

![htto_port.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645692/866abbac-56dc-2430-80f2-06b6a095681b.png)

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

# Step２

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

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

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

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

**手順**

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

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

https://ngrok.com/

ngrok.comでアカウントを作成
2020年時点での公式サイトはこのようになっている
![ngrok.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645692/a446e5a2-b3f3-0dbb-f4f1-90bbb62a3473.png)

「Siginup」でアカウントを作成するとダッシュボードに飛ぶ
![dashboard.ngrok.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645692/469c1e80-3c71-e4f0-0772-410962b4211c.png)

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

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

![authtoken.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645692/70782ef7-59b7-d0eb-2887-5baa94532cb1.png)

##[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![basic_auth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645692/efa9d0f2-30d4-b976-ec66-108edbb2c45b.png)

# Step3

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

**手順**

1. 「ngrok」ファイルを@nuxtjs/ngrokプラグインに置き換える
1. 「.env」ファイルの作成
1. 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の連携方法についてまとめる