npm run dev のコマンドを実施後、以下のエラーが出力されます
throw new Error(‘failed to start the tunnel’);> ^> Error: failed to start the tunnel
上記のエラーが出る原因ご存じの方いらっしゃいますでしょうか？
よろしければ、解決方法教えていただけないでしょうか？
同じエラーメッセージに私が遭遇したことがないため、
推測になってしまうのですが、
以前使用した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のインストールと設定 (未設定の場合)
を参照いただいくと分かりやすいかもしれません。
参考になれば幸いです。
(キュー田辺)
返信いただきありがとうございます。
以前使用した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と出力されました。
関係ありますでしょうか？
@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
- Rubyをインストールして環境を作った
- WSL2
- Ubuntu VM
お手数おかけします。
(キュー田辺)
@Qcoltd さん
確認いただきありがとうございます。
私は下記のURLを参考に作業を進めました
https://shopify.dev/apps/tools/cli
私は、npmを使用しており、以下が環境になります
・Windows10
・node 16.15.0
・npm 8.5.5
以下が実施した手順になります
１．コマンドプロンプトを立ち上げ、npm init @shopify/[email removed] のコマンド実行しました
→実行時、pythonが未インストールだったため、pythonをインストールしました
→また、アプリ名をcustom-sample-appとしました
２．インストール完了後、作成されたcustom-sample-appへ移動
３．アプリ配下で、npm run dev を実施
→実施後、エラーが発生しました
一度、node_modulesをアンインストールして、再度npm install を試して実施しましたが、同じエラーになりました
関係あるか分かりませんが、私の環境では、社内PCということもありZsclaerが動いています
@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 さま
「npm init @shopify/[email removed]
方法ご存じでしたら教えていただきたいです。
私が知る限りでは、
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で作業ができるので、作業はしやすいかと思います。
ご希望にかなう回答ができず恐縮です。
参考になれば幸いです。
(キュー田辺)