shopify cliの「npm run dev」を実施後、ngrokでエラーになる

[wwww2]

npm run dev のコマンドを実施後、以下のエラーが出力されます

throw new Error('failed to start the tunnel');
            ^
Error: failed to start the tunnel

 上記のエラーが出る原因ご存じの方いらっしゃいますでしょうか？
よろしければ、解決方法教えていただけないでしょうか？

[Qcoltd]

同じエラーメッセージに私が遭遇したことがないため、

推測になってしまうのですが、

以前使用したngrokのプロセスが生きている場合に、

ngrok関連のエラーが出ることが多いように思われます。

そのため、ngrokのプロセスを終了すれば解決すると思うのですが、

使用しているOSによって、プロセスの終了方法が異なります。

MacOSであれば、

ターミナルで下記を実行します。

killall ngrok

Windowsの場合は、私がWindowsに詳しくないため、

https://stackoverflow.com/questions/72505618/how-to-stop-an-ngrok-tunnel

を参考にしますと、

コマンドプロンプトで下記を実行するようです。

taskkill /IM ngrok.exe /F

上記でngrokのプロセスを終了してから、

npm run devを行なっても同様のエラーが出る場合、

ngrokの設定がお済みではないのかもしれません。

下記のドキュメントに記載がある設定を完了されているかご確認いただくと良いかもしれません。

https://shopify.dev/apps/getting-started/create#step-2-start-a-local-development-server

Shopify CLI uses ngrok to create a tunnel that allows your app to be accessed using a unique HTTPS URL. You need to create an ngrok account and auth token to preview your app using Shopify CLI.

下記のページの、

https://techlab.q-co.jp/articles/47/

ngrokのインストールと設定 (未設定の場合)

を参照いただいくと分かりやすいかもしれません。

参考になれば幸いです。

(キュー田辺)

[wwww2]

返信いただきありがとうございます。

以前使用したngrokのプロセスが生きている場合に、

ngrok関連のエラーが出ることが多いように思われます。

Windowsの場合は、私がWindowsに詳しくないため、

https://stackoverflow.com/questions/72505618/how-to-stop-an-ngrok-tunnel

を参考にしますと、

コマンドプロンプトで下記を実行するようです。

taskkill /IM ngrok.exe /F

---

私の環境はWindowsなため、上記コマンドを試したところ、「プロセス "ngrok.exe"が見つかりませんでした」となりました。ngrok.exe -> ngrokに変えて試してみても、同様のエラーが出るようでした

ngrokの設定ですが、ngrokのアカウントを作成し、shopify cliのコマンド
「npm run shopify ngrok auth [TOKEN]」を実行し、トークンを設定しましたが、同様のエラーが出るようでした。


ちなみに関係あるか分からないのですが、エラーが出ている@shopify/ngrok/index.jsのconnectRetry関数を呼び出しているconnect関数内の下記にログを仕込んで試してみました

    validate(opts);

    if (opts.authtoken) {

      console.log(opts); // ①

      await setAuthtoken(opts);

    }

    processUrl = await getProcess(opts).catch(reject);

    console.log(processUrl); // ②

    ngrokClient = new NgrokClient(processUrl);

①の箇所はログが出力されず、②の箇所はundefinedと出力されました。
関係ありますでしょうか？

[Qcoltd]

@wwww2 さま

返信ありがとうございます。

> 私の環境はWindowsなため、上記コマンドを試したところ、「プロセス "ngrok.exe"が見つかりませんでした」となりました。ngrok.exe -> ngrokに変えて試してみても、同様のエラーが出るようでした

紹介したStackOverflowのページでも、

I got ERROR: The process "ngrok.exe" not found.

と言っている方がいるので、どんな環境でも有効な方法ではないのかもしれません。

> ①の箇所はログが出力されず、

しっかりコードを読んでいませんが、こちらはToken設定時に入るブロックだと思われますので、

例えば、「npm run shopify ngrok auth」を実行すると、ログが出るかもしれませんが、

今回の件とはあまり関係がないかもしれません。

> ②の箇所はundefinedと出力されました。

processURLに、ngrokのURLが格納されるように見えるので、

それがundefinedということは、

何かが原因でngrokがうまく実行できていない、ということではあるかと思います。

何が原因かは分からないのですが、やはり古いngrokのプロセスが生き続けている可能性はあります。

私の手元のWindowsでも再現できないか試してみようと思います。

つきましては、

どのようにShopify CLIをインストールされたかお教えいただいても良いでしょうか？

https://shopify.dev/themes/tools/cli/installation#windows

1. Rubyをインストールして環境を作った
2. WSL2
3. Ubuntu VM

お手数おかけします。

(キュー田辺)

[wwww2]

@Qcoltd さん
確認いただきありがとうございます。

私は下記のURLを参考に作業を進めました

https://shopify.dev/apps/tools/cli

私は、npmを使用しており、以下が環境になります

・Windows10

・node 16.15.0

・npm 8.5.5

以下が実施した手順になります

１．コマンドプロンプトを立ち上げ、npm init @shopify/app@latest のコマンド実行しました

　→実行時、pythonが未インストールだったため、pythonをインストールしました

　→また、アプリ名をcustom-sample-appとしました

２．インストール完了後、作成されたcustom-sample-appへ移動

３．アプリ配下で、npm run dev を実施

　→実施後、エラーが発生しました

一度、node_modulesをアンインストールして、再度npm install を試して実施しましたが、同じエラーになりました

関係あるか分かりませんが、私の環境では、社内PCということもありZsclaerが動いています

https://www.zscaler.jp/pricing-and-plans?gclid=EAIaIQobChMI-s6kmq6G-QIVClRgCh1huABkEAAYASAAEgKmj_D_B...

---

[Qcoltd · Accepted solution]

@wwww2 さま

返信遅くなりました。

私も手元のWindowsで、

Node.jsのインストールと、下記の手段でのアプリ設定をしてみました。

https://shopify.dev/apps/tools/cli

npm run devで、問題なくngrokが動作しました。

また、あえて、ngrokプロセスを別途起動した状態で、

npm run devを行なったところ、下記のエラーメッセージを取得しました。

━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    The ngrok tunnel could not be started.

    Your account is limited to 1 simultaneous ngrok agent session.
    Active ngrok agent sessions in region 'jp':
    - ts_0000000000000000000000000 (xxx.xxx.xxx.xx)

    More info: https://ngrok.com/docs/errors/err_ngrok_108

    What to try:
    Kill all the ngrok processes with taskkill /f /im ngrok.exe

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

また、エラーメッセージにある通り、

taskkill /f /im ngrok.exe

を実行したところ、

ngorkのプロセスを終了することができました。

• ngrokプロセスが元々存在している場合のエラーメッセージと、質問者さまに最初に記載いただいたエラーメッセージが異なる。
• ngrokプロセスが元々存在している場合、taskkillコマンドでプロセスを終了できる。

という2点から、ngrokプロセスが元々存在していることが質問者さまの状況を作っている原因ではなさそうです。

> 関係あるか分かりませんが、私の環境では、社内PCということもありZsclaerが動いています

「zscaler ngrok」で検索したところ、下記の記事を見つけました。

https://community.zscaler.com/t/not-allowed-to-use-tunnels-what-does-it-exactly-mean/2983/2

どうやら、zscalerには、トンネリング(ngrok)をブロックする設定があるようです。

こちらが原因なのかを調べるために、

ngrokコマンドをグローバルインストールして、

トンネリングしてみることをおすすめします。

npm install -g ngrok
ngrok authtoken [ngorkのauthtoken]
ngrok http https://locahost:8080

上記を実行して、エラーが出る場合、

エラーの内容によっては、

zscalerの設定が原因と言えるかもしれません。

その場合は、

"Block tunneling to non-HTTP/HTTPS ports"

という設定があるそうなので、そちらがオンになっていないかご確認いただき、

オンになっていればオフにできないか社内でご相談いただくのが良いかもしれません。

ご参考まで。

(キュー田辺)

[wwww2]

@Qcoltd さん
試していただきありがとうございます。
Zsclaerの設定は中々変更することが難しいですね。

また、社内環境ではproxyを経由しおり、ngrokを使うにはどうしても問題になるため、できるだけ別方法でShopifyアプリを作成したいと思います。

※通常のnpm installでもproxyでエラーが出力されてしまいます

「npm init @shopify/app@latest」を使わずに、環境を構築しようと思うのですが

方法ご存じでしたら教えていただきたいです。

よろしくお願いします

[Qcoltd]

@wwww2 さま

> 「npm init @shopify/app@latest」を使わずに、環境を構築しようと思うのですが

方法ご存じでしたら教えていただきたいです。

私が知る限りでは、

shopifyの公式ドキュメントで紹介されているshopifyアプリのチュートリアルでは、

結局、トンネリング(ngrok)を使用することになるので、

zscalerが原因なのであれば、

いずれにしても解決は難しいかもしれません。

(一応、Cloudflareのトンネリングサービスを使用する方法も記載がありますが、結局、トンネリングするのであれば、zscalerに止められそうです。。。もし、ご興味がおありでしたら、 https://shopify.dev/apps/tools/cli/commands の「--tunnel-url」の項目をご覧ください。)

そうすると、考えられるのは下記3点でしょうか。。。

(1) 外部サーバーを立てて、そちらで作業をされる

この場合は、DNS設定をするのであれば、

そもそもngrokを使用せずに、npm run buildし、本番環境同様に扱うこともできるかと思います。

ただし、ホットリロードされないことによる開発のめんどくささは凄まじそうです。

(2) 社外のPCにリモートデスクトップし、そこで作業をする

使用するリモートデスクトップソフトによっては、

画質が荒く、コーディング時にちょっと目が疲れるかもしれませんが、

チュートリアル通りに進めることができるかと思います。

(3) 会社的にNGかもしれませんが、スマホのティザリングやモバイルWiFiを使用して、zscalerをすり抜ける

基本的に(2)とコンセプトは変わりませんが、

ご自身のPCで作業ができるので、作業はしやすいかと思います。

ご希望にかなう回答ができず恐縮です。

参考になれば幸いです。

(キュー田辺)