💨

【Windows版】Shopifyのアプリ開発環境を整える

2022/09/30に公開

Shopify

tech

今回、はじめてShopifyのアプリを開発することになったのですが、結構ハマったのでメモを残しておきます。

特に、私と同じように「サーバーサイドはあまり得意でない」という方、ぜひ参考にしてみてください。

開発環境の構築手順（Windows版）

Shopify CLI（バージョン3.x）を使用して、Windowsパソコンに開発環境を構築していきます。

基本的には、Shopify公式のチュートリアルに沿っています↓

1. パートナーアカウントの作成

https://www.shopify.com/jp/partners

2. 開発ストアを作成

3. Node.jsのインストール

4. Gitのインストール

5. ChromeまたはFirefoxの最新バージョンを用意

https://www.google.co.jp/chrome/

https://www.mozilla.org/ja/firefox/new/

6. Composerのインストール

7. XAMPPのインストール

8. XAMPP・Apacheの起動

XAMPPを起動
Apache － Startをクリック

9. サンプルアプリのインストール

XAMPP内の画面右側にあるShellをクリック
起動したコマンドプロンプトに以下を入力
1.「cd htdocs」
2.「npm init @shopify/app@latest」
3.アプリ名を入力
4.使用する言語を選択（私はPHPを選択）

10. Laravelアプリのセットアップ(※PHPを選択した場合）

cd アプリ名（アプリがインストールされたディレクトリに移動）
cd web（webディレクトリに移動）
composer install（composerをインストール）
~~cp .env.example .env~~ → copy .env.example .env（.envファイルをコピーして.env.exampleという名前のファイルを作成）
~~touch storage/db.sqlite~~ → type nul > storage/db.sqlite（storageディレクトリ内にdb.sqliteという名前の空ファイルを作成）
php artisan key:generate（Laravelコマンド：暗号化のためのキーを作成）
php artisan migrate（Larvelコマンド：データべース自動構成）
cd ..（一つ上のディレクトリに戻る）

11. 「.env」ファイルの書き換え(※PHPを選択した場合）

先ほど作成した「.env.example」ファイルは、ローカルで開発する際の設定を記載しているファイルだそうですが、実際に読み込まれるのは、コピー元の「.env」でした。

また、Windowsの場合、「.env」の中身をフルパスに書き換える必要があります↓

DB_DATABASE=~~storage/db.sqlite~~ → DB_DATABASE=C:\Users\xxx\xxx\xxx\xampp\htdocs\アプリ名\web\storage/db.sqlite

12. ngrokの登録・設定

https://ngrok.com/

ngrokに登録・ログイン
画面左メニュー内の「Your Authtoken」をクリック
Command Lineのところに記載してある「ngrok config add-authtoken xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx」をコマンドプロンプトに入力

13. ローカル開発サーバーを起動

引き続き、以下をコマンドプロンプトに入力します。

cd アプリ名（ディレクトリを移動）
npm run dev（ローカルサーバーを起動）

14. 接続するストアを選択

何かボタンを押すように促され、ブラウザで接続するストアが表示されます。

ここで選択できるのは、開発ストアではなく通常ストアです。

接続後、自動で開発ストアに接続されます。

15. アプリを開発ストアにインストールする

「Shareable app URL」の下に表示されているURLをコピーして、ブラウザに貼り付けてください。

アプリインストール画面が表示され、デモアプリが開発ストアにインストールされます。

デモアプリは、ボタンを押すと商品が5個追加される仕様となっています。

17. アプリの更新・アップデート

開発ストアに接続したままの状態で、ローカルPC内のプログラムを書き換えれば、アプリの変更がリアルタイムで反映されます。

アプリ開発の際は、ぜひこちらの記事も参考にしてみて下さい↓

18. アプリの配布方法を選択する

開発したアプリを「公開アプリとして配布するか？」「カスタムアプリとして配布するか？」を選択してください。

この設定を事前に行っていないと、アプリを改造した際、正常にAPIを呼び出せない場合があります。

Shopifyパートナーにログイン
画面左側メニューの［アプリ管理］を選択
アプリ名をクリック
画面右上にある「本番環境の準備を整える」のところにある「配布方法を選択する」ボタンをクリック
「Shopifyアプリストアを選択（公開アプリ）」もしくは「単一マーチャントのインストールリンクを選択（カスタムアプリ」を選択してください。

本番サーバーへのアップ

開発途中で発生したエラー類

XAMPPのPHPバージョンを7.4にしようとしたときのエラー

バージョンの古いXAMPPを使用していた為、PHPサンプルアプリを動かすために必要なLaravelがインストールできず。

PHPバージョンを7.2 → 7.4に上げようとするも、エラー。

Error: Apache shutdown unexpectedly
This may be due to a blocked port, missing dependencies,
improper privileges, a crash, or a shutdown by another method.
Press the Logs button to view error logs and check
the Windows Event Viewer for more clues
If you need more help, copy and post this
entire log window on the forums

最終的に、PHPだけアップデートするのは中止。

複数のXAMPPを用意することにしました。

XAMPPのPortable版ならインストール不要なので、解凍すればすぐ使えます。

もし、新しくダウンロードしたXAMPPの方でも上記と同じエラーが出る場合は、「setup_xampp.bat」をクリックして、ディレクトリ情報を更新してください。

最初にApache起動する際は、かなり時間が掛かります（1分ぐらい？）

Startボタンの背景が黄色になり、「Status change detected: running」のまま止まったように見えますが、気長に待ってみてください。

ERR_NGROK_3200エラー

コマンドプロンプトで「npm run dev」と入力後、色々なエラーが表示されたが、一応ngrokのURLが生成されていたので、アクセスしてみたところ表示されたエラー。

ERR_NGROK_3200
Tunnel xxxx-xxx-xxx-xxx-xxx.jp.ngrok.io not found

原因は２つ。

PHPサンプルアプリを動かすために必要なLaravelアプリのセットアップが抜けていた
ngrokから届く承認メールの中のURLをクリックしていなかった

それでも解決しない場合は、「npm run dev -- --reset」と入力し、一旦リセットしてみると良いかもしれない。

Database (storage/db.sqlite) does not exist. (SQL: PRAGMA foreign_keys = ON;)エラー

windowsでは、「.env」の中身を書き換える必要がありました。