shopify cli をインストールした次の日、いきなりつまづいた

# shopify cli をインストールした次の日、いきなりつまづいた


##概要
shopify cliをインストールしてちょっと遊んだ次の日。またやってみようと
```shopify serve```でサーバーを立ち上げて開発用のショップからアプリを見てみると
>Tunnel Expired

>This tunnel expired 11 hours, 57 minutes ago.

>[Sign up for a free account](https://dashboard.ngrok.com/user/signup) so that your tunnels don't time out or you can restart ngrok to get a new tunnel.

>Anybody can use ngrok without an account, but there are limits on how long tunnels can stay open and how much bandwidth they can process. [Sign up for a free account](https://dashboard.ngrok.com/user/signup) so your tunnel don't time out and also get more bandwidth, http basic auth, tcp tunnels, custom subdomains and more.

>The error encountered was: ERR_NGROK_708

の表示が出てしまっている。これを治して開発を続けられるようにする。


## 前提条件
- osx
- shopify cli のインストールが終わっている
- 説明書などできるだけ読みたくない

## 結論

```ngrok``` で作られたローカルサーバを外部から参照するためのトンネルの不具合。
サイトに登録しないと時間が来ると接続が切れてしまう。
そこで、サイトに登録して認証キーを設定し```shopify serve```を再び起動させる。
ただ```shopify serve```を```ctrl+c```で止めた場合トンネルの接続が残ってしまう。
これを```shopify tunnel stop```でしっかり止めて```shopify serve```を起動させる。

1. ```ctrl+c```で立ち上がってる```shopify serve```を止める。
1. ngrokにサインアップ
1. ```shopify tunnel auth [authkey]``` で認証キーを登録
1. ```shopify tunnel stop``` でngrokのトンネルをストップ
1. ```shopify serve```　で起動


## やったこと

アプリのあるディレクトリは何もしていなければ
```
~/[アプリ名]/
```
のあたりにあるみたいね。ここを「アプリのルート」とします。


### ngrokにサインアップする。

>[Sign up for a free account](https://dashboard.ngrok.com/user/signup) so that your tunnels don't time out or you can restart ngrok to get a new tunnel.

って書いてあるのでサインアップしてみよう。

https://dashboard.ngrok.com/user/signup

githubかgoogleのアカウントでいけるんだね。githubでやってみよう。

さてポチポチと登録して、
https://dashboard.ngrok.com/get-started/setup
を見てみると、

> - 2. Connect your account
Running this command will add your authtoken to the default ngrok.yml configuration file. This will grant you access to more features and longer session times. Running tunnels will be listed on the status page of the dashboard.
$ ./ngrok authtoken XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

とにかく「ngrok」で　authtokenすればいいってことみたいですな。XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
の部分はアカウントごとに違うみたいだからただコピればいいね。


### 認証キーの登録

```sh
% ngrok

zsh: command not found: ngrok

```
あれれ？？ないの？　嘘！でも動いてたんだからどっかにあるよね。

あったあった```~/.shopify-app-cli```の中にありました！

```sh
% cd ~/.shopify-app-cli/
```
Shopify clsのルートフォルダに移動します。そこに ``` ngrok``` があるのでこれを使います。

```sh
% ./ngrok authtoken XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Authtoken saved to configuration file: /Users/XXXXX/.ngrok2/ngrok.yml
```

よくわからないけど、いいのかなこれで。
アプリに戻ってサーバを立ち上げてみます。

```sh
% cd [アプリのルート]
```

#### authtokenの正しいやり方
あとからわかったんだけど、これでも同じことをしてくれるみたい。こっちが正解ですな。

```sh
% shopify tunnel auth XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Authtoken saved to configuration file: /Users/XXXXXX/.ngrok2/ngrok.yml
```



さあサーバーを立ち上げてみよう

```sh
% shopify serve

Enter passphrase for key '/Users/XXXXX/.ssh/id_rsa': 
Updating shopify-cli... done!
✓ ngrok tunnel running at https://XXXXXXXXX.ngrok.io
✓ .env saved to project root
✓ Whitelist URLS updated in Partners Dashboard
⭑ Press  Control-T to open this project in cho-cho-do.myshopify.com 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┏━━ Running server...  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ 
┃ > shopify-node-app@1.0.0 dev /Users/XXXXXX/Shopify/simplefba
┃ > NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js
┃ 
┃ [nodemon] 2.0.2
┃ [nodemon] to restart at any time, enter `rs`
┃ [nodemon] watching dir(s): server/index.js
┃ [nodemon] watching extensions: js,mjs,json
┃ [nodemon] starting `node ./server/index.js`
┃ > Ready on http://localhost:8081

```
さて
https://XXXXXXXXX.ngrok.io
を見てみましょう。あれれ？何にも変わらないぞ？
うーん困った。

shopifyの管理画面からアプリを見ても変わってないね。

----
#### 正しいやり方

```sh
% shopify open

Please open this URL in your browser:
https://76990a6f9dab.ngrok.io/auth?shop=cho-cho-do.myshopify.com

```
と打つのがよろしい。なんか設定するとブラウザが勝手に開くのかしら？

----
```shopify help ```
をみてみると、
```shopify tunnel [ auth | start | stop ]```
こんなものを発見！トンネルをきっちり止めてみましょう！


### ngrokのトンネルをストップ
```sh
 % shopify tunnel stop

x ngrok tunnel stopped
```

### サーバーを起動
```sh
% shopify serve      
 
✓ ngrok tunnel running at https://XXXXXXXXXX.ngrok.io, with account Kazumasa Shigeta
✓ .env saved to project root
? Do you want to update your application url? (Choose with ↑ ↓ ⏎)
```

おお！なんか変わったぞ？ここはyesでいいかな。

```sh
? Do you want to update your application url? (You chose: yes)
✓ Whitelist URLS updated in Partners Dashboard                                                                                                                
⭑ Press  Control-T to open this project in cho-cho-do.myshopify.com                                                                                           
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┏━━ Running server...  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ 
┃ > shopify-node-app@1.0.0 dev /Users/shigeta/Shopify/simplefba
┃ > NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js
┃ 
┃ [nodemon] 2.0.2
┃ [nodemon] to restart at any time, enter `rs`
┃ [nodemon] watching dir(s): server/index.js
┃ [nodemon] watching extensions: js,mjs,json
┃ [nodemon] starting `node ./server/index.js`
┃ > Ready on http://localhost:8081
```

さて、```https://XXXXXXXXXX.ngrok.io``` にアクセスしてみよう！

```sh
% curl https://XXXXXXXXXX.ngrok.io
                                 
Redirecting to <a href="/auth">/auth</a>.%  
```
```http://localhost:8081``` はどうかな？

```sh
% curl  http://localhost:8081      
                                     
Redirecting to <a href="/auth">/auth</a>.% 
```
一緒だね！良さそう。

では開発用のショップにログインしてアプリを見てみましょう。

>Shopify app with Node and React 🎉
ssssssfsdakjfkjsdlfjlsdalkfjls


よしちゃんと昨日入れたゴミも入ってるな。よくできました。


お疲れ様です。