【Shopify.dev和訳】Apps/Dev Tools/Shopify CLI/Getting Started
この記事について
この記事は、Overview の記事を和訳したものです。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Shopify CLI を始めよう | Getting started with Shopify CLI
Shopify CLI は Shopify のテーマやアプリを作るのに役立ちます。Node.js アプリ、Ruby on Rails アプリ、アプリ拡張、Shopify テーマを素早く生成します。また、多くの一般的な開発タスクを自動化します。
このドキュメントでは、アプリ開発のための Shopify CLI の使い方を説明します。テーマ開発のための Shopify CLI の使い方については、テーマのための Shopify CLI を参照してください。
仕組み | How it works
Shopify CLI では、コードの足場となるディレクトリをプロジェクトと呼びます。
CLI で作成、管理できるアプリプロジェクトには 2 つのタイプがあります。
それぞれのプロジェクトタイプは、似たような機能を持つ Shopify アプリを作成します。しかし、プロラミング言語やフレームワークが異なるため、開発体験は異なります。
始める前に | Before you start
テーマを開発するために Shopify CLI を使い始める前に、以下のことを行ってください。
- Windows 用の RubyInstaller(2.7 以上)を使って、Ruby または Ruby+Devkit をインストールする。
- まだしていなければ、Shopify パートナーアカウントを作成する。
- アプリをインストールしてテストするための開発ストアを作成する
1. Shopify CLI をインストールする | Install Shopify CLI
macOS または Windows に Shopify CLI をインストールしてください。他のプラットフォームやパケージマネージャーについては、Shopify CLI のインストールを参照してください。
macOS (Homebrew)
brew tap shopify/shopify
brew install shopify-cli
Windows (RubyGems.org)
gem install shopify-cli
2. 認証する | Authenticate
shopify login でパートナーアカウントにログインします。
- ターミナルで shopify login と入力してください。
- ブラウザのウィンドウで、パートナーアカウントにログインします。
3. 新しいプロジェクトの作成 | Create a new project
shopify node create または shopify rails create を実行して、新しい Node.js アプリまは Rails アプリをサブディレクトリに作成します。これらのコマンドを実行すると、PartnerDashboard にアプリが作成されます。
コマンドの実行が終了すると、ターミナルに以下のような指示が表示されます。
┏━━ Cloning https://github.com/Shopify/shopify-app-node.git into my_first_app...
┃ 100%
┗━━ ✓ Cloned into my_first_app ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (2.17s) ━━
┏━━ Installing dependencies with npm... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ ✓ Dependencies installed
┗━━ Dependencies installed ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (43.81s) ━━
✓ .env saved to project root
✓ My first app was created in the organization's Partner Dashboard https://partners.shopify.com/1565875/apps/5260263
⭑ Change directories to your new project folder my_first_app and run shopify serve to start a local server
⭑ Then, visit https://partners.shopify.com/1565875/apps/5260263/test to install My first app on your Dev Store
4. ローカル開発サーバーの起動 | Start a local development server
アプリが作成されたら、shopify node serve または shopify rails serve を実行してローカル開発サーバーを起動することで、すぐに作業を行うことができます。
Shopify CLI は ngrok を使ってトンネルを作ります。ngrok はあなたのアプリのためにユニークな URL を選びます。
shopify node serve
✓ ngrok tunnel running at https://example.ngrok.io
✓ writing .env file...
5. 開発ストアにアプリをインストールする | Install your app on your development store
サーバーが稼働している状態で、新しいターミナルウィンドウを開き、以下のコマンドを実行して、ブラウザでアプリを開き、開発ストアにインストールします。
Rails アプリの場合。
shopify rails open
Node アプリの場合
shopify node open
6. テストデータの投入 | Populate test data
Shopify CLI は、アプリの動作をテストするためのサンプルデータ（商品、顧客、ドラフトオーダーなど）を追加するプロセスをサポートします。テストデータを投入するには、以下のコマンドを実行します。
shopify populate
このコマンドは、ログインしているストアのリソースを投入するかどうかの確認を求めます。
7. アプリのデプロイ | Deploy your app
Shopify CLI を使って、アプリを外部プラットフォームにデプロイすることができます。現在、利用可能なプラットフォームは Heroku のみです。アプリをデプロイするには、以下のコマンドを実行します。コマンドには必ずプロジェクトタイプを指定してください。
rails アプリをデプロイするには。
shopify rails deploy
node アプリをデプロイする場合
shopify node deploy
次のステップ
プロジェクトの種類ごとに用意されているコマンドについては、リファレンスドキュメントをご覧ください。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion