チュートリアルアプリがheroku上で動作しなくなる

[YF1]

現在、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/`;"を、

"const PROD_INDEX_PATH=`${process.cwd()}/web/frontend/`;に変更

(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 ReactDOM from "react-dom";

のimport文の使い方がよくないみたいです。しかし種々の情報を見てみると、皆さんはこのような書き方で動いているようで、私の環境に何か致命的な抜けがあるのではと思い投稿させていただいております。(ngrokでは動いておりましたし…)

何かインストールしなければならないものが抜けているのか、どのようにすれば動くようになりそうか、ご指摘がありましたらいただけると助かります。

よろしくお願いします。

[EagleTree]

こんにちは。こちらの問題を拝見して検証致しました。2022/10/８日現在、CLI２．２６でdeploymentの項目の手順通りで進めて似たような感じに手詰まりしましたが解決しましたので参考になればと思います。

Deploy your web app (shopify.dev)

まず手順通りにSTEP３の環境変数の設定まで進めてください。最初の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で起動できますのでご検証されてみてください。