Zenn
🔮

ShopifyアプリをHerokuでデプロイした話

2021/06/17に公開
Heroku
Shopify
tech

前回Shopify CLIを使って作ったチュートリアルアプリを公開したい、と思いHeroku使ったけど結構苦戦した話。
結構その場凌ぎ的な部分もあるので、良い方法があれば御教授願います🙇‍♂️
前回のアプリ作成の方はこちらから

やりたいこと

Shopifyの埋め込みアプリ(node.js+React)をHerokuでデプロイしたい。
現状、Shopifyアプリはgithub等にあげていなく、git連携していない。
※インストール済みのバージョン等は前回の記事を参照

過程

Herokuデプロイをするために必要な過程は以下5つです。

  1. 作成したShopifyディレクトリとHerokuを繋げる
  2. Heroku側の設定
  3. .envファイルの変更
  4. Shopifyサイトからアプリの設定を変更
  5. AppBridgeError対策

1.作成したShopifyディレクトリとHerokuを繋げる

実はHerokuを触るのが初めてだったのでSignUpから。無料枠で普通にデプロイできるって太っ腹すぎる。
Heroku

できたらプロジェクトを立ち上げます。名前はなんでもよし。

そしたらDashbordのDeploy部分に書いてあるコマンドをShopifyのディレクトリで実行していきます。
ここではローカルにある、私が作ったアプリ名をshopifyAppとしています。

// まずはherokuにログイン
$ heroku login

// gitリポジトリの作成 と herokuのgitへ接続する
$ cd shopifyApp
shopifyApp $ git init
shopifyApp $ heroku git::remote -a {作ったプロジェクト名}

// first commitをする
shopifyApp $ git add .
shopifyApp $ git commit -m "first commit"
shopifyApp $ git push heroku master

最初にコミットしておけば、間違えてパッケージをヘンテコにしてしまってもいつでも戻って来れます。(私はこれで命拾いしました笑)

2.Heroku側の設定

次にHeroku側に.envファイルに定義している値を設定します。
私の場合は5つの項目を設定していたため、そのまんまHerokuへ入力します。

Herokuの設定はこれでOKです。

3..envファイルの変更

元々作成したディレクトリはngrokで動作するように作成していたため、.envファイル内のHOST値はngrokのものになっています。それをHerokuへ変更します。

SHOPIFY_API_KEY=123456789012
SHOPIFY_API_SECRET=123456789012
SHOP={your-shopName}.myshopify.com
SCOPES=read_products,write_products,read_script_tags,write_script_tags
HOST=https://{your-projectName}.herokuapp.com         //ここを変更

4.Shopifyサイトからアプリの設定を変更

Shopify自体の設定も忘れてはいけません。
Shopify partnerのダッシュボードから
アプリ管理 > 作成したアプリ > アプリ設定
を開き、ngrokのURLをHerokuのURLに書き換えます。

5.AppBridgeError対策

４までの過程で設定は完了し、リダイレクトが起こるようになりますが、コンソールを見ると大量のAppBridgeErrorが出てしまいます。
それを解決するためにはpackage.jsonに以下のコードを加える必要があります。

package.json
"engines": {
  "node": "10.x"
}

コードを変更したので、commitします。

shopifyApp $ git add .
shopifyApp $ git commit -m "change package.json"
shopifyApp $ git push heroku master

commit時にconfigファイルを確認しろよーみたいな英語が出てきても、commit自体はできているので今回は一旦無視します。

これでデプロイが完了しました！

https://{your-projectName}.herokuapp.com/auth?shop={your-shopName}.myshopify.comへアクセスし、リダイレクトが起こればOKです🎉
またshopifyのダッシュボードから作成したアプリが表示できれば完了です🎉

出会ったエラー備忘録

ApplicationError


私の場合、多くがHeroku側の設定が足りていなかった。他のサイトだとHOSTやSHOPを指定していない方もいたのですが、私は必要でした。

shopify deploy herokuが通らない

shopify deploy herokuがだめだったら、git push heroku masterコマンドを使いましょう。やっていることはほとんど同じです。
shopify deploy herokuが非推奨なのでは？という声もありましたが、公式には載ってますね。このあたりは様子見になりそうです。

リダイレクト先がundefined

HerokuのURLにアクセスすると、https://undefined/admin~~~にリダイレクトされてアクセスできない…これは正常か…？
未解決です。

Discussion