🛍️

Shopifyアプリ開発環境をサクッと構築する方法

2020/10/27に公開

Node.js

Shopify

tech

概要

本記事では Shopify/shopify-app-node を使って Shopfiy アプリの開発環境を構築してみた内容をご紹介します。

知っていればカンタンな内容なのですが Boilerplate を利用すると Shopify管理画面での設定を含めてカンタンに開発環境をセットアップできます。

初めて Shopify アプリ開発をされる方はぜひ Boilerplate を使ってみると良いんじゃないかなと思っております。

事前準備

Shopify Partners 登録

Shopify パートナープログラム | Shopify パートナーになるから登録します。

Shopify 開発ストア作成

開発ストアを構築する · Shopify ヘルプセンターを参考にして、やります。

shopify-cli インストール

$ brew tap shopify/shopify
$ brew install shopify-cli

Install Shopify App CLI · Shopify App CLI

shopify create で Shopify アプリ作成

$ shopify create
? What type of project would you like to create? (You chose: Node.js App)
? App name                                                                                                                                                        
> app-node-demo                                                                                                                                                   
? What type of app are you building? (You chose: Custom: An app custom built for a single client.)
Partner organization YOUR_ORG_NAME (XXXXXX)                                                                                                                       
? Select a development store (You chose: app-node-demo.myshopify.com)
✓ node v14.14.0                                                                                                                                                   
✓ npm 6.14.8                                                                                                                                                      
┏━━ Cloning https://github.com/Shopify/shopify-app-node.git into app-node-demo... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃                                                                                                                                                             100%
┗━━ ✓ Cloned into app-node-demo ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (3.32s) ━━
┏━━ Installing dependencies with npm... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ ✓ Dependencies installed
┗━━ Dependencies installed ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (25.79s) ━━
✓ .env saved to project root
✓ app-node-demo was created in your Partner Dashboard https://partners.shopify.com/XXXXXX/apps/YYYYYY
⭑ Change directories to your new project folder app-node-demo and run shopify serve to start a local server
⭑ Then, visit https://partners.shopify.com/XXXXXX/apps/YYYYYY/test to install app-node-demo on your Dev Store

shopify serve で開発環境の起動

$ shopify serve
? Do you want to convert app-node-demo.myshopify.com to a development store?
Doing this will allow you to install your app, but the store will become transfer-disabled.
Learn more: https://shopify.dev/tutorials/transfer-a-development-store-to-a-merchant#transfer-disabled-stores
? Do you want to convert app-node-demo.myshopify.com to a development store?
Doing this will allow you to install your app, but the store will become transfer-disabled.                                                                       
Learn more: https://shopify.dev/tutorials/transfer-a-development-store-to-a-merchant#transfer-disabled-stores                                                     
 (You chose: yes)
✓ Transfer has been disabled on app-node-demo.myshopify.com.
✓ curl @ /usr/bin/curl
✓ tar @ /usr/bin/tar
✓ Installing ngrok...
✓ ngrok tunnel running at https://XXXXXX.ngrok.io
⭑ This tunnel will timeout in 7 hours 59 minutes
⭑ To avoid tunnels that timeout, it is recommended to signup for a free ngrok
account at https://ngrok.com/signup. After you signup, install your
personalized authorization token using shopify tunnel auth <token>.
✓ .env saved to project root
? Do you want to update your application url? (You chose: yes)
✓ Whitelist URLS updated in Partners Dashboard                                                                                                                    
                                                                                                                                                                  
⭑ To install and start using your app, open this URL in your browser:
https://XXXXXX.ngrok.io/auth?shop=app-node-demo.myshopify.com

┏━━ Running server... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ 
┃ > shopify-node-app@1.0.0 dev /Users/tadashi_shigeoka/works/shopify-app-node-demo
┃ > cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js
┃ 
┃ [nodemon] 2.0.6
┃ [nodemon] to restart at any time, enter `rs`
┃ [nodemon] watching path(s): server/index.js
┃ [nodemon] watching extensions: js,mjs,json
┃ [nodemon] starting `node ./server/index.js`
┃ Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
┃ See here for more info: https://err.sh/next.js/built-in-css-disabled
┃ 
┃ [ ready ] compiled successfully
┃ [ wait ]  compiling ...
┃ [ ready ] compiled successfully
┃ > Ready on http://localhost:8081

Shopify開発ストアでの作業

Shopify開発ストアへアプリをインストール

⭑ To install and start using your app, open this URL in your browser:
https://XXXXXX.ngrok.io/auth?shop=app-node-demo.myshopify.com

の URL へアクセスして Shopify 開発ストアへアプリをインストールします。

Shopify開発ストアからShopifyアプリへアクセス

Shopify app with Node and React 🎉 というメッセージが無事に表示されました 👏

以上、Shopifyアプリを開発していきたい、現場からお送りしました。