Liquid、JavaScriptなどに関する質問
現在、Shopify アプリ開発の準備として、チュートリアルアプリをHeroku上で動作させようとしております。
ngrokで試したときはうまく動いたのですが、herokuでデプロイすると動かなくなりました。
よろしければ、ご助言いただければ幸いです。
【チュートリアルアプリ】
https://shopify.dev/apps/getting-started/create
を、ページに記載の通りに実装しました。
【行ったこと】
1. Herokuでnodejsアプリを作成
2. heroku GITでアプリをデプロイ
3. herokuのConfig Varを入力
HOST = アプリURL
SCOPES = read_products,write_products
SHOP = shopname.myshopify.com
SHOPIFY_API_KEY = APIキー
SHOPIFY_API_SECRET = SECRETキー
4.Shopify partnerのダッシュボードのアプリ設定のURLを変更
アプリURL : アプリURL
ダイレクトURLの許可: アプリURL/auth/callback
5.4まででインストールまではできましたが、アプリ画面にherokuエラーが表示されたため、herokuのログを見ながら下記のようにコードを変更しました。
・package.jsonに、"start": "node ./web/index.js"を追加
(herokuログに、startがないことでエラーが表示されていたため)
・web/index.jsの、"const PROD_INDEX_PATH = `${process.cwd()}/dist/`;"を、
(herokuログにファイルがないと指摘されたため、アプリ画面に表示するべきと思われるweb/frontend/index.htmlを開かせようと思ったため)"
【現在の状態】
添付のように、画面に何も表示されない
ブラウザのコンソールに下記のエラー
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.
heroku側のログにはエラー表示なし
【現在の状態の推測】
web/frontend/index.htmlの、31行目 <script type="module" src="/index.jsx"></script>でエラーが発生しています。
これは、moduleがjavascriptを読み込むtypeなのに、jsではなくjsxを読み込もうとしているためだと思います。
それならばと、type="text/babel"に変更してみたところ、index.jsxの1行目のimportがmodule内でないと使えないようで、エラーが発生します。
さらにならばと、index.jsxの拡張子を.jsに変更し、<script type="module" src="/index.js"></script>にしてみたところ、" Uncaught TypeError: Failed to resolve module specifier "react-dom". Relative references must start with either "/", "./", or "../". "というエラーが発生し、やはり動きません。
のimport文の使い方がよくないみたいです。しかし種々の情報を見てみると、皆さんはこのような書き方で動いているようで、私の環境に何か致命的な抜けがあるのではと思い投稿させていただいております。(ngrokでは動いておりましたし…)
何かインストールしなければならないものが抜けているのか、どのようにすれば動くようになりそうか、ご指摘がありましたらいただけると助かります。
よろしくお願いします。
こんにちは。こちらの問題を拝見して検証致しました。2022/10/8日現在、CLI2.26でdeploymentの項目の手順通りで進めて似たような感じに手詰まりしましたが解決しましたので参考になればと思います。
Deploy your web app (shopify.dev)
まず手順通りにSTEP3の環境変数の設定まで進めてください。最初のDockerのインストールを行いherokuにコマンドラインでコンテナタイプのappのgitを作成してください。
ここで問題になるのがgitのタイプですがgit push heroku masterではheroku上で作成されたアプリの設定の起動がなぜかできませんので、gitをブランチしてmainブランチを作成してください。
私はgithub上でorigin/mainのリモートを作成してそれをherokuにプッシュしました。
プッシュコマンドはgit push heroku mainになります。
これでherokuのコンテナがmainのgitを参照して起動できる設定になりました。
そこからshopifyのアプリの設定に行ってSTEP通りアプリの参照URLを設定してリダイレクトURLでapi/auth/callbackを設定してください。
ここまで進めてアプリをshopify側で再起動(言葉がわからないですが)させる必要がありますので、ご自身のデベロッパーアカウントのアプリ一覧の項目からherokuで起動させたアプリを選択して「ストアにインストール」を行います。
アプリをテストするデベロッパーストアを選択してインストールを行ってください。
この作業をしないとストアでアプリを開いてもスタート画面が表示されません。
またheroku上で起動してもアプリのスタート画面は表示されませんので(No shop providedと文字だけでる)気を付けてください。
さらにもっと面倒なのがnpm run serveではアプリを更新するたびに上記のストアへのインストールを行わないとショップで反映されないことがあります。なので開発が終わってテストする段階ではかなり工数が発生することを覚えておいてください。
npm startなどheroku gitを使用しておこなうとなんらかのエラーメッセージがでますが、公式チュートリアルのほうで「git」でブランチのmainを作成する」「dockerをインストしてheroku containerコマンドを有効にする」という工程が抜けているのでチュートリアルとして説明不足ですが、以上の方法でherokuで起動できますのでご検証されてみてください。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024