もし、Shopify CLI を使用して Remix を使ったフルスタック Shopify アプリを構築している場合、最終的にバックグラウンド処理（例えば、商品データの同期やウェブフックイベントの処理、メール送信など）を Workers にオフロードしたいと考えるでしょう。
本記事では、以下の内容について解説します：
-
Remix を使った Shopify アプリのフロントエンドの構築
-
バックグラウンドジョブ用の TypeScript Workers の作成
-
Heroku 上で Workers と Web Dyno を並行して動かす設定
-
ts-node を使用して、最新の ESM ローダーに対応する設定方法
このセットアップにより、Web-facing のロジックとバックグラウンドロジックを明確に分離したスケーラブルなアーキテクチャを実現できます。
セットアップの始め方
まず、Shopify CLI を使って Remix プロジェクトを作成します。この手順に従うと、以下の特徴を持ったアプリが生成されます：
-
Remix を使った React ベースのフロントエンド
-
Shopify OAuth とセッション管理の設定
-
サーバーサイドのロジック用 API ルート
-
TypeScript サポートが事前に設定済み
以下のコマンドでプロジェクトを生成します：
npm init @shopify/app@latest
プロジェクトの設定時に、Remix をフレームワークとして選択し、セットアップを進めます。CLI がアプリを生成すると、Remix アプリがモノレポ形式で作成され、Shopify の認証や Polaris UI などの基本的な設定も自動で行われます。
バックグラウンドジョブの作成
たとえば、商品データをバックグラウンドで同期するジョブを作成したい場合、API ルート内に長時間実行されるロジックを追加するのではなく、専用の worker.ts ファイルを作成してそのロジックを処理します。
ディレクトリ構成
/worker.ts # バックグラウンドジョブのスクリプト
/tsconfig.json # メインアプリの設定
/tsconfig.worker.json # Worker 専用の TypeScript 設定
/package.json # パッケージ設定
以下は、バックグラウンドジョブでコンソールにメッセージを表示するシンプルな例です。
// worker.ts
console.log("バックグラウンドジョブが実行されています");
Heroku での実行設定
Heroku 上でこの Worker を実行するために、ts-node を使って TypeScript を実行できるように設定を行います。
まず、tsconfig.json は Remix アプリと Shopify アプリのフロントエンド向けに最適化されています。Worker を独立したプロセスとして実行するために、Worker 専用の設定を用意します。
// tsconfig.worker.json
{
"compilerOptions": {
"module": "ESNext",
"target": "ESNext",
"moduleResolution": "node",
"esModuleInterop": true,
"strict": true,
"jsx": "react-jsx"
}
}
Worker のローカル実行
ローカル環境で Worker を実行するには、以下のコマンドを使用します：
ts-node --project tsconfig.worker.json worker.ts
または、Node の ESM ローダーを直接使用して実行することもできます：
node --loader ts-node/esm worker.ts
package.json に "type": "module" を追加して、ESM サポートを有効にしておくことを忘れないでください。
Heroku 上での実行
Heroku では、Web Dyno と Worker Dyno を並行して動かすために、Procfile を設定します。これにより、Heroku は以下のように Dyno を起動します：
-
Web Dyno: Remix フロントエンドの実行
-
Worker Dyno: バックグラウンドジョブの実行
web: npm run start
worker: ts-node --project tsconfig.worker.json worker.ts
これにより、Heroku は Remix のフロントエンドとバックグラウンドジョブを独立して実行できます。
必要なパッケージのインストール
次に、ts-node と TypeScript、Node.js 用の型定義パッケージをインストールします：
npm install --save ts-node typescript @types/node
ローカルでの実行
ローカル環境で Worker を実行するには、以下のコマンドを使用します：
ts-node --project tsconfig.worker.json worker.ts
Heroku にコードをプッシュした後、Worker のログを確認するには、以下のコマンドを使用します：
heroku logs --tail --dyno worker
まとめ
このセットアップにより、以下のことが可能になります：
-
Remix フロントエンドとバックグラウンド処理ロジックを分離することができる。
-
Heroku の Dyno モデルを使用して、Shopify アプリとバックグラウンドジョブを並行して実行できる。
-
最新の TypeScript と ESM サポートを活用し、モダンな構文でバックグラウンドジョブを実行できる。
これで、Shopify アプリの構築とバックグラウンドジョブのオフロードがスムーズに行えるようになります。
もしこの記事が役立ったと思ったら、他の Shopify や Remix のヒントについてもフォローしていただけると嬉しいです。