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

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

## 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](https://shopify.dev/docs/themes/tools/cli)

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

参考: 
[Shopify CLI 2.x](https://shopify.dev/docs/themes/tools/cli/cli-2)
[Shopify Theme Kit](https://shopify.dev/docs/themes/tools/theme-kit)

## 環境構築
### 1. WSLを有効にする
WLSが使えるか確認し、なければインストールします。

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

参考: 
[WSL のインストール | Microsoft Learn](https://learn.microsoft.com/ja-jp/windows/wsl/install#install-wsl-command)

### 2. Ubuntuをインストールする
次に、Ubuntuをインストールします。

1. Microsoft Storeを開きます。
2. 「Ubuntu」で検索します。
3. 「Ubuntu」をクリックします。
Ubuntuがいくつかありますが、今回使うのはただのUbuntuです。
    [Ubuntu - Microsoft Store アプリ](https://apps.microsoft.com/store/detail/ubuntu/9PDXGNCFSCZV)
4. 「入手」をクリックします。
5. インストールできたらUbuntuを起動します。
6. ユーザー名とパスワードの設定を求められるので、おのおの設定してください。
7. パッケージを最新化するため、以下のコマンドを実行します。
途中でDo you want to continue?など確認されたら、yと入力して続行します。
    ```powershell
    sudo apt update
    sudo apt upgrade
    ```

### 3. Ubuntuでnvmを使ってNode.jsをインストールする
引き続きUbuntu上で作業します。

1. curlコマンドを使うためインストールします。以下のコマンドを実行します。
    ```powershell
    sudo apt-get install curl
    ```
1. Node.jsのバージョン管理ツールnvmをインストールします。以下のコマンドを実行します。
    ```powershell
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
    ```
1. Ubuntuを再起動します。ウィンドウを閉じてもう一度起動すればOKです。
1. nvmがインストールされているか確認します。以下のコマンドを実行してバージョンが表示されればOKです。
    ```powershell
    nvm --version
    ```
1. Node.jsの安定版をインストールします。以下のコマンドを実行します。
    ```powershell
    nvm install --lts
    ```
1. Node.jsがインストールされたか確認します。以下のコマンドを実行しバージョンが表示されればOKです。
    ```powershell
    node -v
    ```

参考: 
[WSL 2 上で Node.js を設定する | Microsoft Learn](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl#install-nvm-nodejs-and-npm)
[nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions](https://github.com/nvm-sh/nvm)
[Windows に WSL を使って Node 環境を構築する - Qiita](https://qiita.com/nekonekonekosan/items/61a6b9d4da6bdfd1d0bb)

### 4. UbuntuでShopify CLIをインストールする
やっとShopifyにたどり着きました。引き続きUbuntu上で作業します。

1. Shopify CLI実行に必要なツールをインストールします。以下のコマンドを実行します。
    ```powershell
    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
    ```
1. Shopify CLIをインストールします。以下のコマンドを実行します。
    ```powershell
    npm install -g @shopify/cli @shopify/theme
    ```
1. shopifyコマンドが使えるか確認します。以下のコマンドを実行しバージョンが表示されればOKです。
    ```powershell
    shopify version
    ```

参考:
[Install Shopify CLI](https://shopify.dev/docs/themes/tools/cli/install)

### 5. Shopifyストアに接続する
shopifyコマンドが使えるようになったので、実際にストアと接続してみます。
1. 以下のコマンドを実行して、ストアのテーマ情報を取得してみます。ストア名は管理画面URLの末尾と同じです。
`admin.shopify.com/store/ストア名`
    ```powershell
    shopify theme list --store ストア名
    ```
1. 初回接続時はメッセージが出て、ログインを求められます。
    ```powershell
    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](https://shopify.dev/docs/themes/tools/cli/commands)