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
よしちゃんと昨日入れたゴミも入ってるな。よくできました。
お疲れ様です。