下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。
Shopifyのチュートリアルに掲載されているコードを、/web/index.js にコピぺしたとき、ブラウザ上に以下のような406エラーが表示されます。
このエラーを解決するために、具体的にコードのどこをどのように修正すれば良いでしょうか？
現在、私のターミナルではこのようなエラーが表示されています。
チュートリアルの/web/index.jsのコードをVSCode上に貼り付けています。そのVSCodeは12箇所のエラーを指摘しています。
すでに英語版でのコミュニティでも同様の内容の質問をしました。質問を投稿したのち1週間が経過しましたが、解決につながるような投稿を得られないため、日本語版でのコミュニティでも質問投稿をしました。
以上ご確認をよろしくお願いします。
Echizenyayota 様
お世話になっております。
貼付いただいているコードですと、一見おかしくないように思えます。
直接的な回答ではなく恐縮ですが、envファイルは設置されているでしょうか。
また、vscode上でエラーが12箇所でているとのことですが、エラー箇所にhoverしていただき、なにかヒントがないでしょうか。
ご確認のほど、どうぞよろしくお願いいたします。
株式会社フルバランス ドウケ
株式会社フルバランス ドウケ様
コメントありがとうございます。
いただいたご質問を2つに分けて回答いたします。
おそらく設置していないと思います。
Shopifyアプリのフォルダ全体を、“env"と”.env"の文字列で検索しましたが、これらの文字列に一致するファイルは存在していません。
なおどのように検索したかについては、下記の動画でまとめています。
vscode上でエラーが12箇所でているとのことですが、エラー箇所にhoverしていただき、なにかヒントがないでしょうか。
12のエラー箇所にホバーをすると、それぞれエラーの文言が表示されます。それぞれの文言の具体的な内容については以下の動画をご覧いただければ助かります。
以上、ご確認をよろしくお願い申し上げます。
お世話になっております。
早速にご確認いただきありがとうございます。
原因として、.envファイルがないため、38〜43行目のところでエラーがでているのだと思います。
お手間になるのですが、shopify cliをインストールし、以下のページからアプリ作成をやり直して見て頂けますと幸いです。
https://shopify.dev/apps/getting-started/create
このページの「Step 2: Start a local development server」の3で「npm run dev」すると、①どのパートナーアカウントと連携するか②ngrok連携のため、ngrok tokenを要求されます。
（パートナーアカウントは事前に作成ください。また、ngrok tokenはStep2の最初に案内文がございます。）
この連携作業を終えると、envファイルが生成されると思いますので、再度こちらからサンプルアプリ構築をしてみてください。
https://shopify.dev/apps/getting-started/build-app-example
どうぞよろしくお願いいたします。
また、ご不明点ございましたら、お気軽にご質問ください。
株式会社フルバランス ドウケ
株式会社フルバランス
ドウケ様
たびたびのコメントありがとうございます。
ドウケ様からいただいたご提案について、以下2点の回答を申し上げます。
shopify cliをインストールし、以下のページからアプリ作成をやり直して見て頂けますと幸いです
自分が使用しているmacOSには、Shopify CLIをすでにインストールしています。
グローバルな環境でのShopify CLIのバージョンは2.19.0、ローカル環境(個別のアプリ開発環境)でのShopify CLIのバージョンは3.8.0です。
このページの「Step 2: Start a local development server」の3で「npm run dev」すると、①どのパートナーアカウントと連携するか②ngrok連携のため、ngrok tokenを要求されます。
私はShopify CLIのバージョンが2.x系の時から、アプリ開発をしていました。
そのせいか、新しく個別のアプリ開発環境を構築し（npm init @Shopify_77 [email removed] run dev）、「①どのパートナーアカウントと連携するか②ngrok連携のため、ngrok tokenを要求されます。」という作業は発生ぜず、ブラウザにはアプリ開発のための初期画面が表示されます。
なお、上記のターミナル画面におけるアプリ開発の環境構築と起動は、当初質問の対象としたアプリとは別のアプリですが、.envファイルは見当たりませんでした。
お忙しいところ誠に恐れ入りますが、このような状況について何かアドバイスをいただけますと幸いです。
ご確認いただきありがとうございます。
いただいた内容を元に、私の方でも検証してみたところ、現CLIでは.envファイルの設定は不要のようです。
申し分けございませんでした。
以下の方法で環境変数を読み込めるようになりましたのでお試しください。
1.アプリのルートディレクトリで
cd web/frontend/ && SHOPIFY_API_KEY=あなたのAPI_KEY npm run build
// API_KEYはパートナーページにあります。
これで、web/index.jsを見ていただくと、環境変数のエラーが消えているのではないでしょうか。
この状態でご質問者様同様、frontendとbackendのweb/index.jsのコピペまで終えると特にエラーなくアプリ動作を確認できております。
上記のことは、アプリのルートディレクトリのREADME.mdに記載されています。
ご参考までに。
途中戸惑わせてしまい大変恐縮ですが、上記内容をお試しいただけますと幸いです。
また、ご不明点ございましたら、お気軽にご質問くださいね。
ドウケ様
たびたびのコメントありがとうございます。
いただいたアドバイスに基づいて3点、回答を申し上げます。
ただ結論から申し上げると、環境変数に関するエラーと406エラーはそれぞれ表示されたままです。
特に2点目の回答について再度アドバイスをいただければ幸いです。
現CLIでは.envファイルの設定は不要のようです。
了解しました。
パートナーページの画面からSHOPIFY_API_KEYをコピペして、以下のコマンドを実行しました。
$ cd web/frontend/ && SHOPIFY_API_KEY=MY_API_KEY npm run build
$ cd ../..
$ npm run dev
ですが環境変数に関するエラーは表示されたままで、かつブラウザの406エラーも同じく表示されます。
上記のスクリーンショットのうち、1枚目は私のパートナーページで、SHOPIFY_API_KEYの引用元です。また2枚目は、"$ cd web/frontend/ && SHOPIFY_API_KEY=MY_API_KEY npm run build"のコマンド実行した時にターミナルに表示されたないようです。
環境変数の読み込みに関するREADMEの記述を見つけることができました。お忙しいところ誠に恐れ入りますが、再度のアドバイスをいただければ幸いです。
ご確認いただきありがとうございます。
406エラーの表示箇所3行目のnode_modules/・・・/error.jsの13行目をお送りいただくこと可能でしょうか。
また、環境が違うため、一概に言えないのですが、私の方でアプリを再度作成した場合、406エラーは特にでていなかったため、お手数ですがアプリ再作成されることもご検討いただけますと幸いです。
ドウケ様
コメントありがとうございます。
3点回答を申し上げます。
406エラーの表示箇所3行目のnode_modules/・・・/error.jsの13行目をお送りいただくこと可能でしょうか。
上記が/Users/MYUSERNAME/shopify_app/my-new-app/web/node_modules/@shopify/shopify-api/dist/error.js:13 のスクリーンショットとなります。
私の方でアプリを再度作成した場合、406エラーは特にでていなかったため、お手数ですがアプリ再作成されることもご検討いただけますと
私はチュートリアルのコードを写経しているだけです。
$ cd /Users/MYUSERNAME/shopify_app
$ npm init /app@latest
という感じで最初からアプリを作成すること自体は気にしていません。
（web/index.jsのエラーの様子を収録した動画）
https://www.youtube.com/watch?v=k_lC5Kgnjdk
ただアプリの雛形をインストールした時点で、web/index.js のファイルをVSCodeに表示させると、
エラーが表示されていることが気になります。
日本語版のコミュニティよりも先に質問投稿をした英語版コミュニティでは、2人の方が私と同じ問題を抱えていることが分かりました。
https://community.shopify.com/post/1712774
上記のURLはその質問に対する英語話者の方からいただいたコメントです。何かの参考になれば幸いです。
お忙しいところ誠に恐れ入りますが、ご確認よろしくお願いします。