Shopify CLI3.xをWSL+Ubuntu+nvmで使う #Ubuntu

導入でつまづいたのでメモしておきます。

Shopify CLIってなに

黒い画面でShopifyテーマをいじれるツールです。

Shopify CLI is a command-line interface tool that helps you build Shopify apps and themes.
（Shopify CLI は、Shopify アプリとテーマの構築に役立つコマンドラインインターフェイスツールです。）
by Shopify CLI for themes

現在(2023/04/19)のShopify CLIは3系で、2系は2023/05/31までのサポートになります。
とくに理由がなければ最新バージョンを使用します。
ただ、古いテーマを使っている場合はThemekitというさらに以前のツールでしか操作できないときもあります。

参考:
Shopify CLI 2.x
Shopify Theme Kit

環境構築

1. WSLを有効にする

WLSが使えるか確認し、なければインストールします。

コマンドプロンプトを管理者モードで開きます。
以下のコマンドを実行しバージョン情報が表示されればインストールされています。
次のステップへ進んでください。
```
wsl --version
```
wslがインストールされていない場合は以下のコマンドでインストールします。
インストールできたらPCを再起動してください。
```
wsl --install
```

参考:
WSL のインストール | Microsoft Learn

2. Ubuntuをインストールする

次に、Ubuntuをインストールします。

Microsoft Storeを開きます。
「Ubuntu」で検索します。
「Ubuntu」をクリックします。
Ubuntuがいくつかありますが、今回使うのはただのUbuntuです。
Ubuntu - Microsoft Store アプリ
「入手」をクリックします。
インストールできたらUbuntuを起動します。
ユーザー名とパスワードの設定を求められるので、おのおの設定してください。
パッケージを最新化するため、以下のコマンドを実行します。
途中でDo you want to continue?など確認されたら、yと入力して続行します。
```
sudo apt update
sudo apt upgrade
```

3. Ubuntuでnvmを使ってNode.jsをインストールする

引き続きUbuntu上で作業します。

curlコマンドを使うためインストールします。以下のコマンドを実行します。
```
sudo apt-get install curl
```

Node.jsのバージョン管理ツールnvmをインストールします。以下のコマンドを実行します。

curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh) | bash

Ubuntuを再起動します。ウィンドウを閉じてもう一度起動すればOKです。
nvmがインストールされているか確認します。以下のコマンドを実行してバージョンが表示されればOKです。
```
nvm --version
```
Node.jsの安定版をインストールします。以下のコマンドを実行します。
```
nvm install --lts
```
Node.jsがインストールされたか確認します。以下のコマンドを実行しバージョンが表示されればOKです。
```
node -v
```

参考:
WSL 2 上で Node.js を設定する | Microsoft Learn
nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
Windows に WSL を使って Node 環境を構築する - Qiita

4. UbuntuでShopify CLIをインストールする

やっとShopifyにたどり着きました。引き続きUbuntu上で作業します。

Shopify CLI実行に必要なツールをインストールします。以下のコマンドを実行します。

sudo apt install curl gcc g++ make
sudo apt install ruby-full
sudo apt install ruby-dev
sudo apt install git
sudo gem install bundler

Shopify CLIをインストールします。以下のコマンドを実行します。
```
npm install -g @shopify/cli @shopify/theme
```
shopifyコマンドが使えるか確認します。以下のコマンドを実行しバージョンが表示されればOKです。
```
shopify version
```

参考:
Install Shopify CLI

5. Shopifyストアに接続する

shopifyコマンドが使えるようになったので、実際にストアと接続してみます。

以下のコマンドを実行して、ストアのテーマ情報を取得してみます。ストア名は管理画面URLの末尾と同じです。
admin.shopify.com/store/ストア名
```
shopify theme list --store ストア名
```
初回接続時はメッセージが出て、ログインを求められます。
```
To run this command, log in to Shopify Partners.
👉 Press any key to open the login page on your browser
```
なにかしらのキーを押すと、ブラウザでShopifyログイン画面が開きます。
ショップの権限を持ったアカウントでログインしてください。
✔ Logged in.と表示され、テーマのリストが表示されたらOKです。

これでshopify themeコマンドが使えるようになりました。

参考:
Shopify CLI commands for themes