Shopifyのアプリ開発：WSLでトンネルを作りメール送信まで
Shopifyのテーマのカスタマイズは以前行っていたのですが、パソコンをクリーンインストールしてShopifyの開発環境が着ているため、今回WSL2でShopifyのアプリ開発環境を作ることにしました。
ネットで見つけた記事を基に進めましたが、コマンドでエラーが出たので、備忘録を兼ねて書きます。
こちらの記事を参考にしました。
こちらのコマンドでエラーになりました。
shopify app create
今回こちらで、進めました。
とりあえず、コマンドを調べました。
shopify --help
出力内容です。
$ shopify --help
A CLI tool to build for the Shopify platform
VERSION
@shopify/cli/3.76.2 wsl-x64 node-v23.4.0
USAGE
$ shopify [COMMAND]
TOPICS
app Build Shopify apps.
auth Auth operations.
config CLI configuration options.
hydrogen Build Hydrogen storefronts.
theme Build Liquid themes.
COMMANDS
commands List all shopify commands.
help Display help for Shopify CLI
search Starts a search on shopify.dev.
upgrade Shows details on how to upgrade Shopify CLI.
version Shopify CLI version currently installed.
出力内容の説明
VERSION
現在インストールされている CLI のバージョン（@shopify/cli/3.76.2）や、実行環境（wsl-x64、node-v23.4.0）が表示されています。
USAGE
基本的な使い方として、$ shopify [COMMAND] の形式でコマンドを実行することを示しています。
TOPICS
Shopify プラットフォームに関連する主要な機能のカテゴリが表示されています。
app: Shopify アプリの構築
auth: 認証関連の操作
config: CLI の設定オプション
hydrogen: Hydrogen ストアフロントの構築
theme: Liquid テーマの構築
COMMANDS
具体的なサブコマンドがリストアップされています。
commands: 利用可能な全てのコマンドの一覧
help: ヘルプ情報の表示
search: shopify.dev での検索開始
upgrade: Shopify CLI のアップグレード手順の詳細
version: 現在のバージョン情報の確認
アプリのテンプレート
$ shopify app init
To run this command, log in to Shopify.
User verification code: SCPF-NTHD
👉 Press any key to open the login page on your browser
Opened link to start the auth process: https://accounts.shopify.com/activate-with-code?device_code%5Buser_code%5D=SCPF-NTHD
✔ Logged in.
? Get started building your app:
✔ Build a Remix app (recommended)
? For your Remix template, which language do you want?
✔ JavaScript
? App name:
✔ アプリ名
╭─ info ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Initializing project with `npm` │
│ Use the `--package-manager` flag to select a different package manager. │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─ success ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ アプリ名 is ready for you to build! │
│ │
│ Next steps │
│ • Run `cd アプリ名` │
│ • For extensions, run `shopify app generate extension` │
│ • To see your app, run `shopify app dev` │
│ │
│ Reference │
│ • Shopify docs │
│ • For an overview of commands, run `shopify app --help` │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
shopify app generate extension
で、作るアプリの種類を選びます。
管理画面向けの主な拡張ポイント
「Admin」セクションには複数の拡張ポイントが並んでいます。それぞれ役割が少しずつ異なるので、やりたいことに応じて選択してください。
Admin block
管理画面内に「ブロック」として独自のUIを埋め込むための拡張ポイントです。
たとえば、商品詳細ページや注文詳細ページなど、対応している場所に追加のコンポーネント（UIブロック）を表示できます。
「管理画面に独自のUIを差し込みたい」「入力フォームやダッシュボード風のUIを表示したい」といった場合に有力です。
Admin link
Shopify管理画面の「その他の操作」や特定のメニューにリンクを追加する拡張ポイントです。
リンクをクリックすると、埋め込みアプリ（または外部ページ）に飛ばせるので、「管理画面から自作アプリへの導線を追加したい」というケースに向いています。
UI自体を管理画面の中に直接埋め込むわけではなく、リンクを挿入するだけです。
Admin action / Admin print action / Conditional admin action など
管理画面上で「ボタン」や「アクション」として追加し、押下時に特定の処理を走らせる拡張ポイントです。
例: 「注文一覧にカスタムのアクションボタンを追加し、クリックすると外部APIを呼んで処理する」など。
アクションの種類によって表示できる場所や振る舞いが変わるので、要件に合わせて使い分けます。
Product configuration / Editor extension collection
商品編集画面に対して追加のフィールドや設定UIを組み込むための拡張ポイントです。
もし「商品管理画面に独自の設定項目を加えたい」という場合は、こちらを検討します。
App Support link, Purchase options action, Subscription link など
特定の用途（サブスクリプション設定や購入オプション設定、サポートリンクなど）に特化した拡張ポイントです。
一般的なカスタムUIにはあまり使わないケースが多いですが、該当する機能を拡張したい場合には便利です。
どれを選べばいいか？
-
管理画面の特定のページに独自のUIコンポーネントを直接埋め込みたい
→ Admin block や Editor extension collection（商品ページ等） -
管理画面のメニューや「その他の操作」などにリンクを追加して、自作アプリに飛ばしたい
→ Admin link -
管理画面でボタンやアクションを追加して、クリック時に処理を実行したい
Admin action や Admin print action、Conditional admin action
参考：埋め込みアプリと拡張機能の違い
-
埋め込みアプリ:
Shopify パートナーダッシュボード（あるいは CLI）で「アプリ」を作成し、Shopify 管理画面のサイドバーや「その他の操作」から開く形で、アプリ独自の画面を提供するもの。React などで自由にUIを作りこめます。 -
拡張機能（Extension）:
上記のように、Shopify 管理画面やチェックアウト、テーマ、Flow などの特定の場所に直接UIや機能を差し込むためのポイント。CLI の shopify extension create や shopify app generate extension などから生成してカスタマイズします。
Shopifyのアプリのリセット
今回アプリの再設定を行うことが、度々ありました。
その度に、アプリが新しくなってしまうので大変でした。
こちらのコマンドで、アプリをリセットできます。
npm run dev -- --reset
上記のコマンドを実行すると、ディレクトリにある内容で新しいアプリとしてスタートできます。
今回はトンネルを使いました
WSLで動いているローカルサーバーがShopifyの開発ストアで使えるように、webhookのURLを作ることができるように、トンネルを作りました。
トンネルは、Cloudflareを使いました。
ngrokは、起動するたびにURLが変わってしまうので大変です。
有料版を使えばURLを固定できますが、今回使わないです。
そのため、Cloudflareを使いました。
WSLでCloudflare Tunnelを使う手順まとめ
前提条件
- WSLがセットアップ済み（Ubuntuなど）
- cloudflared コマンドをインストール済み
- Cloudflare アカウントを作成済み
- Cloudflare に独自ドメインを登録済み（例: example.com）
Step 1: cloudflared のインストール（WSL内で実行）
sudo apt update
sudo apt install cloudflared
※ apt パッケージに cloudflared がない場合は、以下の手順を使用：
# バイナリをダウンロードしてインストール
wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
sudo dpkg -i cloudflared-linux-amd64.deb
Step 2: Cloudflare にログイン
cloudflared login
- ブラウザが起動して Cloudflare にログインするよう促されます。
- ドメインを選択（例: example.com）して認証します。
- 認証が成功すると、WSL内に証明書ファイルが保存されます：
- 通常は ~/.cloudflared/cert.pem
Step 3: トンネルの作成
cloudflared tunnel create my-tunnel
- my-tunnel の部分は任意のトンネル名にできます。
- この操作で credentials-file が自動生成されます（例：~/.cloudflared/<UUID>.json）
Step 4: 構成ファイル（config.yml）の作成
~/.cloudflared/config.yml を作成します：
tunnel: <上で作成したトンネルのUUID>
credentials-file: /home/ユーザー名/.cloudflared/<UUID>.json
ingress:
- hostname: myapp.example.com
service: http://localhost:3000 # アプリが動作しているポート
- service: http_status:404
Step 5: DNSレコードの作成
以下のコマンドで、Cloudflare に CNAME レコード（アプリ公開URL）を作成：
cloudflared tunnel route dns my-tunnel myapp.example.com
Step 6: トンネルの起動
cloudflared tunnel run my-tunnel
これで myapp.example.com でローカルアプリに外部アクセスできます！
よく使う補足コマンド
トンネル一覧表示
cloudflared tunnel list
トンネル削除
cloudflared tunnel delete my-tunnel
トンネルログ表示
cloudflared tunnel run my-tunnel --loglevel debug
ワンポイント
- トンネルを 常時起動したい場合 は systemd などを使ってサービス化することもできます（WSLの場合、tmuxやscreenで常駐させてもOK）
- 複数のトンネル・サブドメインを使いたい場合、config.yml に ingress を複数設定可能
Shopifyのアプリの起動
こちらのコマンドでトンネルのURLとポート番号を指定して起動できます。
shopify app dev --tunnel-url=https://ホスト名:ポート番号
Shopify CLIでアプリを起動するので、他の方法で個別にserver.tsなどを起動しなくても良いです。
起動すると重複などでエラーが出て、ハマってしまいます。
FLOWに設定するときの内容
Send HTTP request·Flow ACTION
-
HTTP method
POST -
Headers
-
key
Content-Type -
Value
application/json
-
-
Body
JSONでPOSTで送りたい内容を設定します。
メールの送信もできる
使用したモジュール：nodemailer
概要
- Node.js用のメール送信ライブラリ
- SMTPを使って、プログラムからメールを送信可能
- Gmailや独自SMTPサーバー、SendGridなど様々な送信方法に対応
基本的な使い方（SMTP経由）
import nodemailer from 'nodemailer';
const transporter = nodemailer.createTransport({
host: 'smtp.example.com', // SMTPサーバーのホスト（Gmailの場合は smtp.gmail.com）
port: 587, // 通常は 587（TLS）か 465（SSL）
secure: false, // trueならSSL（ポート465）
auth: {
user: 'your_email@example.com',
pass: 'your_password_or_app_password',
},
});
const mailOptions = {
from: 'your_email@example.com',
to: 'recipient@example.com',
subject: '件名',
text: 'プレーンテキストの本文',
html: '<b>HTMLメールの本文</b>',
};
await transporter.sendMail(mailOptions);
Gmailでの使用時の問題点（2024年以降）
-
「安全性の低いアプリのアクセス許可」が廃止
Gmailでは、パスワード認証による外部SMTP接続（nodemailerなど）を原則禁止するように変更 -
アプリパスワードも使えないケースが増加
二段階認証を設定してアプリパスワードを発行する方法がありましたが、現在は使えないようです。
まとめ
今回Shopifyのアプリ開発という貴重な経験が、できました。
WSLで作ったローカルサーバーをトンネルを使って、Shopifyの開発ストアで使えるようにできました。
今回メール送信も、行う方法を知ることができました。
Discussion