【ITニュース解説】Setting Up Shopify App + NestJS Backend: A Step-by-Step Local Development Guide

ShopifyアプリとNestJSバックエンドの連携について解説する。この連携は、システムエンジニアを目指す初心者が、ShopifyというECプラットフォーム上で動作するアプリケーションと、その背後で動作する独自のサーバー（バックエンド）を連携させる基本的な考え方と具体的な手順を理解するために重要だ。

この記事の主な目的は、Shopifyアプリが特定のイベント（例えば、新しい注文が発生した時など）を受け取り、その情報をNestJSで構築された独自のバックエンドサーバーに送信し、さらにバックエンドでその情報を処理する仕組みをローカル環境で構築する方法を示すことだ。これにより、Shopifyの基本的な機能を超えた独自のビジネスロジックを実装できるようになる。

まず、Shopifyアプリのセットアップから始める。Shopifyアプリは、Shopifyストアの機能を拡張するためのプログラムであり、ウェブフックと呼ばれる仕組みを使ってShopifyからの通知を受け取ることができる。 Shopifyアプリの作成には、ターミナルで npm init @shopify/app@latest というコマンドを実行する。これは、Shopifyが提供するテンプレートを使ってアプリのひな形を自動で生成するコマンドだ。アプリ名やアプリの種類（この場合は「Public」で、広く一般のマーチャントに公開されるアプリを意味する）、使用するフレームワークとしてRemix（TypeScript）を選択し、パッケージマネージャーはnpmを使用する。これにより、bridge-appという名前のShopifyアプリのプロジェクトフォルダが作成される。 次に、作成されたプロジェクトフォルダに移動し、アプリの構成ファイルである shopify.app.toml を編集する。このファイルでは、アプリがShopifyストアに対してどのような「パーミッション（権限）」を持つかを設定する。例えば、write_products は商品情報を書き込む権限だが、記事では read_orders（注文情報の読み取り）や write_orders（注文情報の書き込み）などの権限を追加する。これにより、アプリが注文に関する情報にアクセスできるようになる。 さらに、ウェブフックの購読設定も追加する。ウェブフックとは、Shopifyストアで特定のイベントが発生した際に、その情報を指定されたURLに自動で通知する仕組みだ。ここでは orders/create というトピック（新しい注文が作成されたことを示すイベント）を購読するように設定し、その通知を受け取るURIとして /webhooks/orders/create を指定する。 これらの設定が完了したら、shopify app dev コマンドでShopifyアプリをローカルで起動する。このコマンドを実行すると、開発用のストアを選択するプロンプトが表示され、アプリが開発ストアにインストールされるためのプレビューURLが提供される。このコマンドを実行しているターミナルは、アプリが動作し続けるために開いたままにしておく必要がある。

次に、NestJSバックエンドのセットアップに進む。NestJSは、Node.js上で動作する効率的でスケーラブルなサーバーサイドアプリケーションを構築するためのフレームワークだ。 新しいターミナルを開き、NestJS CLIをグローバルにインストールしてから、nest new bridgeapp-api コマンドで新しいNestJSプロジェクトを作成する。作成後、そのプロジェクトフォルダに移動する。 ここで、「ウェブフックコントローラー」を作成する。コントローラーとは、クライアントからのリクエストを受け取り、適切なビジネスロジックにルーティングする役割を担う部分だ。src/webhook ディレクトリ内に webhook.controller.ts ファイルを作成し、ウェブフックを受信するためのコードを記述する。このコントローラーには @Controller('webhook') というデコレーターが付けられ、/webhook というパスへのリクエストを処理することを示す。 特に重要なのは、@Post('shopify/order') というデコレーターが付いた handleShopifyOrder メソッドだ。これは、/webhook/shopify/order というパスへのPOSTリクエストを受け付ける。@Body() デコレーターはリクエストの本体（送られてきたデータ）を、@Headers() デコレーターはリクエストのヘッダー情報を取得するために使われる。受信したデータは、Logger を使ってターミナルに表示されるように設定されており、ウェブフックが正常に届いたことを視覚的に確認できるようになっている。 コントローラーを作成したら、src/app.module.ts というメインのアプリケーションモジュールを更新し、作成した WebhookController がアプリケーションの一部として認識されるように設定する。モジュールは、NestJSアプリケーションの構成要素をまとめる役割を果たす。 これらの設定が終わったら、npm run start:dev コマンドでNestJSサーバーを起動する。このサーバーは通常、http://localhost:3000 で動作する。このターミナルも、サーバーが動作し続けるために開いたままにする。

ここまでで、ShopifyアプリとNestJSバックエンドがそれぞれ単独で動作する状態になった。次に、この二つを接続する。 Shopifyアプリのターミナル（最初のターミナル）に戻り、Shopifyアプリ内にNestJSバックエンドへの「ブリッジ」となるファイルを作成する。具体的には、Shopifyアプリの app/routes/webhooks.orders.create.tsx ファイルを作成し、編集する。 このファイルに記述するコードは、Shopifyから orders/create ウェブフックを受け取った際に実行される。コード内では、authenticate.webhook(request) を使ってウェブフックの正当性を検証し、ウェブフックに含まれる topic（トピック）、shop（ストア情報）、payload（注文データ本体）といった情報を取得する。 取得した注文データは、fetch APIを使ってNestJSバックエンドに送信される。具体的には、http://localhost:3000/webhook/shopify/order というURLに対して、HTTPのPOSTリクエストとしてJSON形式のデータを送信する。送信するデータには、ShopifyストアのURLと受け取った注文データが含まれる。この処理が成功したか失敗したかは、ターミナルへのログ出力で確認できる。このファイルがShopifyアプリとNestJSバックエンドをつなぐ重要な役割を果たす。

接続ができたら、実際にテストして動作を確認する。 まず、ブラウザでShopifyアプリのプレビューURLにアクセスし、開発ストアにアプリをインストールする。 次に、NestJSバックエンドが単独で正しく動作するかを確認するために、3つ目のターミナルを開き、curl コマンドを使ってNestJS APIに直接POSTリクエストを送信する。これは、バックエンドがウェブフックを受け取る準備ができているかを確認するためのテストだ。このコマンドを実行すると、NestJSのターミナルにログが表示されるはずだ。 最後に、エンドツーエンドのテストとして、Shopify管理画面で実際に新しい注文を作成する。Shopify管理画面から「注文」→「注文を作成」に進み、商品と顧客を追加して注文を作成する。この操作を行うと、Shopifyストアで orders/create イベントが発生し、設定したウェブフックを通じてShopifyアプリに通知される。Shopifyアプリはその通知を受け取ると、作成したブリッジのコードを実行し、NestJSバックエンドへ注文データを送信する。 この一連の流れが正しく動作していれば、Shopifyアプリのターミナルには「SHOPIFY WEBHOOK RECEIVED!」や「Sending to NestJS...」「Successfully sent to NestJS」といったログが表示され、NestJSバックエンドのターミナルには「WEBHOOK RECEIVED!」というログとともに、Shopifyから送られてきた注文データ（ヘッダーとボディ）が表示される。

もし途中で問題が発生した場合は、いくつかの一般的なトラブルシューティング方法がある。「Connection refused」エラーが表示された場合は、NestJSサーバーが正しくポート3000で起動しているかを確認する。「No Webhook Received」の場合は、ウェブフックファイルが正しく保存されているか、またはShopifyアプリを再起動してみると良い。ポートが既に使われている場合は、NestJSのポートを3001などに変更し、ShopifyアプリのウェブフックURLもそれに合わせて更新する必要がある。

これらの手順を通じて、ShopifyアプリとNestJSバックエンドがローカル環境で連携し、互いに通信できる開発環境が構築されたことになる。この基盤があれば、NestJSバックエンドに独自のビジネスロジックを追加したり、外部のAPI（例えばWhatsAppやメール、SMS送信サービスなど）と連携させたり、データベースを統合してデータを保存・処理したり、あるいはShopifyアプリのフロントエンドに新しい機能を追加したりと、様々な発展的な開発に進むことができる。

開発中は、Shopifyアプリのターミナル（shopify app dev）とNestJSバックエンドのターミナル（npm run start:dev）の両方を常に開いたままにしておく必要がある。サーバーを再起動する際は、NestJSを先に起動し、その後Shopifyアプリを起動するとスムーズに再接続できることが多い。

このセットアップが完了すれば、Shopifyエコシステム内で独自の強力なアプリケーションを開発するための準備が整ったと言える。