岐阜のホームページ制作｜sober design › ブログ › 【最新版】Shopify Cliにログインできない場合の対処法

【最新版】Shopify Cliにログインできない場合の対処法

2023/4/18

ホームページ制作

初めに
shopify cliとは？
shopify cliをインストール
shopifyのディレクトリを作成
shopify ローカル開発サーバーの起動
shopify テーマをストアにアップロードする
最後まで読んでいただきありがとうございました。

初めに

Shopifyテーマのローカル開発を行うために、Shopify Cliのインストール、ローカルサーバーの起動までを行おうとしたところ、Shopify Cli にログインができないエラーが出ました。

Shopify CLIについての記事が少ないため、エラーから解決までを備忘録として解説していきます。

今回のエラー箇所の説明

以下のコマンドで、Shopify CLIへ接続を行おうとしたところ、

shopify login --store [ストアドメイン]
A store is required
Specify the store passing --store={your_store_url} 
or set the SHOPIFY_FLAG_STORE environment variable.

同じ現象で困っている方は、「shopify、テーマ初期化」まで飛ばしていただければと思います。

Shopify CLIとは？

Shopify CLIは、Shopify（ショッピファイ）のテーマやアプリをターミナルからShopify ストアを管理することができる、コマンドラインインターフェースツールです。Shopify CLIをインストールする事により、ストアの設定や開発プロセスを効率良く行うことができます。

Shopify CLI を使用すると、Shopify アプリケーションの開発、テスト、デプロイ、および管理を迅速かつ簡単に行うことができます。また、Shopify ストアの作成や管理に必要なコマンドラインツールを提供するため、開発者にとって非常に便利なツールとなっています。

WordPressを使用している方は、MAMPを使いローカル環境で開発を行なっていると思いますが、Shopif CLIは、Shopifyのブラウザ上のエディタではなく、ローカル環境での開発を行えるようにするツールと思ってください。

以前までは、shopifyのTheme Kitが使われていましたが、2023年4月現在では、Shopify CLIが推奨されています。shopify CLIとThme Kitの違いは今回は、割愛いたします。詳しく知りたい方は、ググってください。

Shopify CLIをインストール

今回の記事では、既にHomebrewとRubyをインストールされた方を対象としています。HomebrewとRubyのインストール方法は検索を行なって下さい。他の記事で丁寧に説明されています。

Shopify CLIをインストールするために、まずは、ターミナル起動してください。

Macユーザーの方は、

Command + Space
「ter」と入力
エンターを押す

と起動されます。

Windowsユーザーの方は、

Ctrl+Alt+T

で起動します。

起動後に以下のコマンドでShopify CLIをダウンロードしてください。

macOS

brew tap shopify/shopify
brew install shopify-cli

Windows and Linux

テーマ用のShopify CLIをインストールするには、コマンドラインを使用して@shopify/cliと@shopify/themeのNode.jsパッケージをグローバルにインストールしてください。

npm install -g @shopify/cli @shopify/theme

次にshopify、テーマ初期化を行なっていきます。

shopify、テーマ初期化

shopify theme initを使用して、公式テーマDawnをローカル環境に構築します。

DawnはShopifyの公式テーマで、パフォーマンス、柔軟性、使いやすさを重視して作られています。Dawnをテーマ構築の出発点として使用することができます。

Step.1

コマンドでshopifyを構築する任意の場所へ作業ディレクトリを作成して下さい。

任意の場所で mkdir shopify-themeなど

Step.2

次に以下のコマンドでテーマを初期化、インストールします。

shopify theme init

my-new-themeのようなテーマの名前を入力するよう促されます。テーマは、同じ名前のフォルダにクローンされます。

テーマのクローンができたら、そのフォルダに移動します

cd "my-new-theme"

shopify ローカル環境の構築

テーマを初期化した後、shopify theme devを実行してブラウザでテーマと対話することができます。Shopify CLIは、テーマを開発テーマとしてストアにアップロードします。

このコマンドは、CSSとセクションのローカルな変更をホットリロードするURLを返し、ストアのデータを使ってリアルタイムに変更をプレビューすることができます。このプレビューは、Google Chromeでのみ利用可能です。

devコマンドを初めて実行すると、Shopifyにログインするよう促されます。

ここで、–storeは、テーマのプレビューに使用するストアの名前を表します。

shopify theme dev --store ストアの名前または〇〇〇.myshopify.comなどのドメイン

テーマを最初にプレビューするときに、–storeを渡す必要があります。指定したストアは、新しい値で–storeを渡すまで、今後のコマンドに使用されます。どのストアに接続されているかを確認するには、shopify theme infoを実行します。

以下の画面が表示されたら、起動が成功しています。

hopify theme dev –store を行うと自動的にshopifyのログイン画面へ移行します。

パスワード入力を求められますので、shopifyパートナーの方は、shopify管理画面の各種設定から「ストアへのアクセスを制限する」のパスワードを入力ください。私の場合は、こちらのパスワードを設定した記憶がなくどこかわからずに、苦戦しました。また、ストアオーナーからログインを試みましたが、エラーページに遷移してしまい。ログインができませんでした。以下画像参考