shopify-app-node の ngrok を固定URLで使う方法

概要

本記事では Shopify/shopify-app-node の開発環境で利用している ngrok を固定URLで使う方法をご紹介します。

前提条件

Shopifyアプリ開発環境をサクッと構築する方法 に沿って、開発環境が構築済みを前提としています。

ngrok 有料プラン契約

まず、ngrok で固定URLを使い続けるために ngrok pricing の BASIC 以上のプランに加入します。

ngrok 管理画面からサブドメイン発行

https://dashboard.ngrok.com/endpoints/domains から固定URLで利用するために、サブドメインを発行します。

今回は日本国内のみの利用なので jp region でサブドメインを発行しました。

Example Configuration Files | ngrok – documentation

事前準備 shopify tunnel auth

shopify service で利用する ngrok を有料アカウントのものを認証するために shopify tunnel auth を初回だけ実行します。

shopify tunnel auth

普段使う ngrok と shopify serve のオプション

ngrok

jp region のサブドメインを利用する場合 -region jp オプションを付ける点がポイントです。

ngrok http -hostname=YOUR_CUSTOM_SUBDOMAIN.jp.ngrok.io -region jp 8081

shopify servce

shopify serve --host=https://YOUR_CUSTOM_SUBDOMAIN.jp.ngrok.io

以上、Shopifyアプリの開発環境でも固定URLにして、快適に開発していきたい、現場からお送りしました。