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

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

Tunnel Expired

This tunnel expired 11 hours, 57 minutes ago.

Sign up for a free account 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 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を起動させる。

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

やったこと

アプリのあるディレクトリは何もしていなければ

~/[アプリ名]/

のあたりにあるみたいね。ここを「アプリのルート」とします。

ngrokにサインアップする。

Sign up for a free account so that your tunnels don't time out or you can restart ngrok to get a new tunnel.

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

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

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

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
の部分はアカウントごとに違うみたいだからただコピればいいね。

認証キーの登録

% ngrok

zsh: command not found: ngrok

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

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

% cd ~/.shopify-app-cli/

Shopify clsのルートフォルダに移動します。そこに ngrok があるのでこれを使います。

% ./ngrok authtoken XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

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

% cd [アプリのルート]

authtokenの正しいやり方

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

% shopify tunnel auth XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

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

% 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の管理画面からアプリを見ても変わってないね。

正しいやり方

% 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のトンネルをストップ

 % shopify tunnel stop

x ngrok tunnel stopped

サーバーを起動

% 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でいいかな。

? 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 にアクセスしてみよう！

% curl https://XXXXXXXXXX.ngrok.io
                                 
Redirecting to <a href="/auth">/auth</a>.%

http://localhost:8081 はどうかな？

% curl  http://localhost:8081      
                                     
Redirecting to <a href="/auth">/auth</a>.%

一緒だね！良さそう。

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

Shopify app with Node and React 🎉
ssssssfsdakjfkjsdlfjlsdalkfjls

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

お疲れ様です。