CLIでShopifyアプリの開発環境を用意する

概要

Shopify アプリことはじめ 2回目に当たる今回は、Shopify CLIを使ってローカル開発環境の立ち上げまでを行います。

前回記事より開発フローを再掲します。

• パートナーアカウントの作成
• 開発ストアの設定
• Shopify CLIのインストール
• CLIで開発ストアへのログイン
• CLIでShopify アプリの作成
• ngrokでローカル開発環境を公開
• 開発
• 本番環境へのアップ
• 公開設定

今回は、「CLIで開発ストアへのログイン」から「ngrokでローカル開発環境を公開」までを行います。

CLIで開発ストアへのログイン

スタッフの追加

CLIで開発ストアにログインする際、自身のメールアドレスで作成したアカウントでは開発ストアに対する各権限がない状態です。そこで開発ストア内にスタッフ登録を行い権限を与えます。

開発ストアの管理画面内左メニューの「設定」へ移動します。設定モーダルが開きますので、同モーダル左メニューの「ユーザーと権限」をクリックしてください。ユーザーと権限の設定画面が表示されましたら、スタッフ項目内の「スタッフを追加」をクリックしてください。

権限はすべてを選択し、アプリとチャネルも選択しておいてください。何か問題がある場合は、適宜権限を調整してください。

必要な項目を入力したら「招待を送信する」をクリックすることで入力したメールアドレス宛に、招待メールが送信されます。

メール内「Create staff acount」をクリックすれば登録完了です。

CLIでのログイン

まずは、CLIでshopifyコマンドが実行可能か確認してください。

shopify version
> 2.15.6

バージョンのみ表示されたら問題ありません。最新バージョンの案内をされた場合は適宜更新などを行なってください。

次いでCLIから開発ストアにログインします。

shopify login —store=xxx.myshopify.com
> ✓ Initiating authentication
> ✓ Loading available partner organizations
> Logged into store xxx.myshopify.com in partner organization yyy

Storeオプションの値は開発ストアのドメインになります。テストするデータは指定した開発ストアのものを利用します。

また、複数開発ストアを用意しており、ログアウトをしたい場合はshopify logoutでログアウトすることができます。

CLIでShopify アプリの作成

では実際にshopifyアプリを作っていきます。

Shopifyアプリに関するコマンドは全てshopify app xxxです。 コマンドがわからなくなった場合は、shopify appで関連コマンドのhelpが確認できます。shopify cliのバージョンによってコマンドが違う場合があります。上手くいかない場合はshopify helpで確認してください。

Nodeアプリをテンプレートから作成する場合は以下のコマンドを実行します。

Shopify app create node
// 以下対話形式

// アプリ名: 管理画面での表示、ディレクトリ名などに
? App name 
> {アプリ名}

// アプリのタイプ: 公開アプリかカスタムアプリか、変更不可
? What type of app are you building? (Choose with ↑ ↓ ⏎, filter with 'f') 
> 1. Public: An app built for a wide merchant audience.
> 2. Custom: An app custom built for a single client.

// 使用する開発ストア: ログインした開発ストアを選択、変更可能
? Select a development store (Choose with ↑ ↓ ⏎, filter with 'f', enter option with 'e')
> 1. xxx.myshopify.com
> 2. yyy.myshopify.com
…

// 以下が表示されたら成功
…
⭑ Then, visit https://partners.shopify.com/0000000/apps/1111111/test to install young-day on your Dev Store

作成が成功すると、指定したアプリ名と同名のディレクトリが出来ています。後の作業はこちらで行います。

作成時Nodeのバージョンが不適切だと、必要モジュールがインストール出来ない場合があります。その場合は指定のNodeのバージョンに合わせてから、npm iでモジュールをインストールし直してください。

ngrokのインストールと設定 (未設定の場合)

Shopifyアプリは、ストアからアプリ用のサーバーにhttpsで通信する必要があります。Shopify cliではngrokを利用してローカルホストをHTTPS対応の適当なドメインでトンネリングしてくれます。

Ngrokの設定をしていない場合は以下の手順で設定を行なってください。

ngorkアカウントの作成

ngrokのアカウントを作成します。ngrokのページにいきSign upを行ってください。

登録が完了したら、管理画面のサイドメニューから「Your Authtoken」を選択し、トークンをコピーしてください。トークンはngrokインストール後に利用します。

ngrokのインストール

CLIに戻ります。以下のコマンドでngrokのインストールを行ってください。（Macのパッケージ名が3つ連なっているのは記述ミスではありません。）

// Mac
brew install ngrok/ngrok/ngrok

// Windows
choco install grok

アカウントの紐付け

インストールが成功したら、下記のコマンドで先ほどコピーしたトークンを登録してください。

ngrok config add-authtoken {アカウント画面で取得したトークン}

ngrokでローカル開発環境を公開

まだアプリには何も手を入れていない状態ですが、動作確認のためにローカルサーバーを立ち上げます。

ローカルサーバーの立ち上げ

shopify app serve

// 以下が表示されたら成功
// ローカルサーバー起動中は、Running server…の表記が出続けます。
> ⭑ To install and start using your app, open this URL in your browser:
https://hhh.ngrok.io/login?shop=xxx.myshopify.co

こちらのコマンドで、アプリケーションの開発モードでの起動(next dev)とローカルホストのトンネリング(ngrok http)を良しなに実行してくれます。

先述の開発ストアの選択とアプリ名の指定を行なっていると、.envファイルに環境変数が設定されます。こちらが存在しない場合は、対話形式で開発ストアとアプリ名を選択することになります。

Running server...の記述内でエラーが出ている場合は、「指定されたポートが別プロセスで使われている」、「ngrokを別のプロジェクトで使用し、制限がかかっている」などの理由が考えられます。ポートはShopify app serve —port={ポート番号}で指定可能です。
ngrokで制限がかかっている場合は、ngrokのプランを変更するか、使用していないngrokのプロセスを止めてください。

開発ストアへのインストール

ここまで上手く行きましたら、To install and start using your app, open this URL in your browser:で指定されているURLにブラウザからアクセスしてください。

指定した開発ストアでアプリをインストールするかの確認が表示されます。

アプリのインストールをクリックしてください。上手くいくと、一時的にトンネリングしたurlでアプリが表示された後、開発ストアが表示されます。

開発ストア内で以下のようなコンテンツが表示されていれば成功です。

ローカルサーバーの終了

Ctrl+Cでプロセスを終了します。この時、ngrokのプロセスが生きていたことがありました。何か別件で問題があった場合はngrokのプロセスが残っていないか確認をしてください。

まとめ

Shopify cliを利用してNodeアプリのローカル開発環境の立ち上げまでを行いました。次回はShopifyのReact UIコンポーネント集 Polarisを使って、独自の管理画面を作り上げていきます。