🕌

ShopifyアプリをさくっとFly.ioでデプロイしてみた

2022/11/27に公開

herokuは2022年11月28日に終了してしまうため、shopifyアプリを無料枠でできるFly.ioにデプロイしました。

前提条件

  • Fly.ioのアカウント登録が完了していること、flyctlコマンドがインストールしてあること
  • このページを元にローカルで起動できるようになっていること

環境

shopify/cli/3.23.0
flyctl v0.0.435

ディレクトリ構成

shopifyのアプリの初期構成(2022/11/27時点)は下記です。

.
├── Dockerfile
├── README.md
├── SECURITY.md
├── node_modules
├── package-lock.json
├── package.json
├── shopify.app.toml
└── web

コンフィグの作成

fly.tomlを作成します。今回はshopifyアプリは初期でDockerfileが準備されているので
下記コマンドで自動で作成します。この段階ではデプロイはしません。

$ flyctl launch
Scanning source code
Detected a Dockerfile app
? Choose an app name (leave blank to generate one): shop-sample-app
? Choose a region for deployment: Tokyo, Japan (nrt)
Created app shop-sample-app in organization personal
Wrote config file fly.toml
? Would you like to set up a Postgresql database now? No
? Would you like to set up an Upstash Redis database now? No
? Would you like to deploy now? No
Your app is ready! Deploy with `flyctl deploy`

fly.toml確認

自動で作成したコンフィグはこちら
これから現状のshopifyアプリ用に環境変数を設定します。

# fly.toml file generated for shop-sample-app on 2022-11-27T21:54:53+09:00

app = "shop-sample-app"
kill_signal = "SIGINT"
kill_timeout = 5
processes = []

[env]

[experimental]
  allowed_public_ports = []
  auto_rollback = true

[[services]]
  http_checks = []
  internal_port = 8080
  processes = ["app"]
  protocol = "tcp"
  script_checks = []
  [services.concurrency]
    hard_limit = 25
    soft_limit = 20
    type = "connections"

  [[services.ports]]
    force_https = true
    handlers = ["http"]
    port = 80

  [[services.ports]]
    handlers = ["tls", "http"]
    port = 443

  [[services.tcp_checks]]
    grace_period = "1s"
    interval = "15s"
    restart_limit = 0
    timeout = "2sあ

shopifyアプリ環境変数確認

キー/シークレットはマスク

$ npm run shopify app env show

> shopify-app-sample@1.0.0 shopify
> shopify app env show

✔ Finished log truncation process
✔ Which existing app is this for? · sample-app

    SHOPIFY_API_KEY=xxxxxxxxxxxxxxxxx
    SHOPIFY_API_SECRET=xxxxxxxxxxxxxxxxx
    SCOPES=write_products

コンフィグの環境変数を書き換え

書き換え後はこちら。追記部分のみ抜粋

...
[env]
  PORT = "8081"
  HOST = "https://shop-sample-app.fly.dev"
  SCOPES = "write_products"
  SHOPIFY_API_KEY = "xxxxxxxxxxxxxxxxx"

...
[[services]]
  http_checks = []
  internal_port = 8081

シークレット登録

$ flyctl secrets set SHOPIFY_API_SECRET="xxxxxxxxxxxxxxxxx"
Secrets are staged for the first deployment% 

デプロイ

$ flyctl deploy --build-arg SHOPIFY_API_KEY="xxxxxxxxxxxxxxxxx" --remote-only

アプリURL変更

アプリ表示確認

参考

https://fly.io/
https://fly.io/docs/languages-and-frameworks/dockerfile/
https://shopify.dev/apps/getting-started/create
https://shopify.dev/apps/deployment
https://zenn.dev/chizu_puzzle/articles/cf3692917fe78d

GitHubで編集を提案

Discussion