WSL 2 上での AITRIOS のサンプルアプリの動かし方

# 本記事の対象読者
- AITRIOS のサンプルアプリを Codespaces ではなく、自身の Windows PC 上で動かしたい方。

# 手順の概要

- WSL 2 をインストールする。
- WSL に Docker Engine と Docker Compose をインストールする。
- VS Code をインストールし、WSL と Dev Container の拡張機能をインストールする。
- WSL 上でサンプルアプリの Dev Container を動かす。

# 0. 前提
- Windows PC を使用する。 (WSL 2 を使うと言っているので当たり前ですが。)
- 今回は、[棚占有率監視アプリ](https://github.com/SonySemiconductorSolutions/aitrios-sample-application-object-occupancy-rate)を例として使用するが、ほかのサンプルアプリでも同様に動かせるはず。

  - なお、現在公開されている AITRIOS のサンプルアプリの一覧は、[こちら](https://developer.aitrios.sony-semicon.com/edge-ai-sensing/guides#secondary-menu-desktop) のページで「種類で探す」を選択すると**サンプルアプリケーションリポジトリー**のセクションで確認できる。

# 1. 今回のインストールするもの
## 1.1. VS Code (Visual Studio Code)
- 超有名な高機能コードエディタのひとつ。
- Dev Container (次項) を使用するのに必要。

## 1.2. Dev Container 
- VS Code の拡張機能のひとつで、Docker コンテナ上で VS Code を使った開発を可能にするもの。詳細は[こちら](https://code.visualstudio.com/docs/devcontainers/containers)
  - Dev Container を使用することで、複数人での開発において、開発環境を統一することが容易になる。
- AITRIOS のサンプルアプリは、Dev Container 上で動かすことを想定して作成されている。 (もしかしたら、そうでないものもあるかも)
  - ちなみに GitHub の Codespaces でも Dev Container を使ってる。なので、今回の手順を踏むことで、ローカル環境でも Codespaces 上と同じようにサンプルアプリを動かすことができる。

## 1.3. Docker Engine & Docker Compose
- **Docker Engine**: 仮想環境用のプラットフォームである Docker のコアのコンポーネント。詳細は[こちら](https://docs.docker.com/engine/)
  - Dev Container を使用するのに必要。
- **Docker Compose**: Docker をより簡単に使用できるようになる Docker の拡張機能。
  - AITRIOS サンプルアプリでは、Docker Compose の機能を使用している。(一部のサンプルアプリでは、Docker Compose を使用していない。その場合はインストールは不要。使用しているかどうかわからない場合は、とりあえずインストールすることを推奨。)

### 1.4. WSL (Windows Subsystem for Linux)
- Windows 上で動く Linux の仮想環境。詳細は[こちら](https://learn.microsoft.com/ja-jp/windows/wsl/)
  - WSL には WSL 1 と WSL 2 があり、今回は WSL 2 を使用する。
- Docker を動かすのに使用する。
  - Windows 上で Docker を動かす選択肢として Docker Desktop があるが、商用利用には有料サブスクリプションに加入する必要がある。
  - Linux 上であれば、Docker Desktop を使用せずに Docker Engine を使用できる (Docker Engine は無償で商用利用可能。 (2024/08/29 現在)) ので、今回は WSL 上に Docker Engine をインストールして使用することにした。

# 2. 手順
## 2.1. WSL 2 のインストール
- [公式の手順](https://learn.microsoft.com/ja-jp/windows/wsl/install)に従ってインストールする。
  - Windows 10 バージョン 2004 以上 (ビルド 19041 以上) または Windows 11 の場合は、以下のコマンドを**管理者モード**の PowerShell (またはコマンドプロンプト) で実行して、PC を再起動するだけ。
    ```PowerShell
    wsl --install
    ```
  - それより前のバージョンの Windows を使う場合や、上記でうまくいかない場合は、[公式の手順](https://learn.microsoft.com/ja-jp/windows/wsl/install)等を参照すること。

- インストール後、 (WSL 1 ではなく) WSL 2 がインストールされていることを確認する。
  - 以下のコマンドを (管理者モードではない) PowerShell で実行し、VERSION が 2 になっていることを確認する。
    ```PowerShell
    wsl -l -v
    ```

  - 以下のような出力になっていれば OK。
    ```
      NAME            STATE           VERSION
    * Ubuntu-22.04    Stopped         2
    ```
  
  - VERSION が 1 になっている場合は、[こちら](https://learn.microsoft.com/ja-jp/windows/wsl/install#upgrade-version-from-wsl-1-to-wsl-2)などを参照。

## 2.2. WSL に Docker Engine と Docker Compose をインストールする。
- PowerShell で 以下のコマンドを実行し、WSL を起動する。
  ```powershell
  wsl
  ```
  - 上記を実行すると、同じウィンドウで WSL が起動する。 (次の行に WSL のプロンプトが表示される)

      ![boot_wsl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3887841/58ca5b5e-b05c-1662-74da-4c9a27936cb3.png)

  - 以下の作業はすべて WSL 上で実行する。

- Docker Engine をインストールする。
  - [公式ページ](https://docs.docker.com/engine/install/)に従ってインストールする。
    - 特に指定をしていなければ、WSL は Ubuntu がインストールされているので、以下のコマンドを実行すればよい。 (2024/08/29 時点)
      ```bash
      # uninstall all conflicting packages:
      for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done

      # Add Docker's official GPG key:
      sudo apt-get update
      sudo apt-get install ca-certificates curl
      sudo install -m 0755 -d /etc/apt/keyrings
      sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
      sudo chmod a+r /etc/apt/keyrings/docker.asc

      # Add the repository to Apt sources:
      echo \
        "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
        $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
        sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
      sudo apt-get update

      # Install the latest version:
      sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
      ```
      - 手順は[こちら](https://docs.docker.com/engine/install/ubuntu/)に記載されている。

  - 以下の実行に成功すれば、インストールに成功している。
    ```bash
    sudo docker run hello-world
    ```
    - 上記のコマンドが成功すると以下のような出力になる。
      ```
      Hello from Docker!
      This message shows that your installation appears to be working correctly.

      To generate this message, Docker took the following steps:
      1. The Docker client contacted the Docker daemon.
      2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
          (amd64)
      3. The Docker daemon created a new container from that image which runs the
          executable that produces the output you are currently reading.
      4. The Docker daemon streamed that output to the Docker client, which sent it
          to your terminal.

      To try something more ambitious, you can run an Ubuntu container with:
      $ docker run -it ubuntu bash

      Share images, automate workflows, and more with a free Docker ID:
      https://hub.docker.com/

      For more examples and ideas, visit:
      https://docs.docker.com/get-started/
      ```

- docker コマンドを sudo なしで使えるようにする。
  - 以下のコマンドを実行する。
    ```bash
    sudo usermod -aG docker $USER
    ```
  - 先ほど実行した hello-world を sudo なしで実行できれば、設定に成功している。
    ```bash
    docker run hello-world
    ```

- Docker Compose をインストールする。
  - [公式ページ](https://docs.docker.com/compose/install/linux/#install-using-the-repository) に従ってインストールする。
    - Ubuntu の場合は、以下のコマンドでインストールできる。
      ```bash
      sudo apt-get update
      sudo apt-get install docker-compose-plugin
      ```
  - 以下のコマンドが正常に実行できれば、インストールに成功している。
    ```bash
    docker compose version
    ```
    - 上記のコマンドの出力が以下のようになれば OK。 (バージョンの数字は異なる可能性がある)
      ```
      Docker Compose version v2.24.2
      ```

## 2.3. WSL 上にサンプルアプリの Git Repository の Clone
- WSL の適当な場所に、サンプルアプリの Git Repository を Clone する。 (~/aitrios/ に棚占有率監視アプリを Clone する場合↓)
  ```bash
  cd ~/aitrios/
  git clone https://github.com/SonySemiconductorSolutions/aitrios-sample-application-object-occupancy-rate
  ```

## 2.4. VS Code のインストール
- [公式ページ](https://code.visualstudio.com/download)からインストールする。

## 2.5. VS Code の拡張のインストール
- VS Code を起動し、拡張機能 WSL をインストールする。

  ![vscode_extension_wsl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3887841/6410bc83-d4b5-35cb-eb39-51b5ff23b7b8.png)

- VS Code を WSL に接続する。
  - Ctrl + Shift + P でコマンドパレットを開き、"WSL: Connect to WSL" を実行する。

    ![vscode_extension_wsl_connect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3887841/4d97e30a-fe20-869e-db25-55d4f1bd871a.png)

  - しばらく待つと、WSL に接続され、VS Code の左下が以下のように変わる。

    ![vscode_extension_wsl_connected.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3887841/9b150d6e-1733-a1fc-ef24-0a146a53f2df.png)
  
- Dev Containers 拡張機能をインストールする。

  ::: note warn
  注：VS Code を WSL に接続した状態でインストールすること。
  :::

  ![vscode_extension_dev_containers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3887841/0bd8612d-1b74-2c13-e0b0-15ef5be5612b.png)

## 2.6. VS Code でサンプルアプリの Dev Container を開く。
- VS Code で 1.3 で Clone した Git Repository のディレクトリを開く
  - Ctrl + Shift + P でコマンドパレットを開き、"WSL: Open Folder in WSL..." を実行する。

    ![vscode_extension_wsl_open_folder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3887841/4fa45c05-5fd6-15bd-90c9-8911836428e0.png)
  
  - 先ほど Clone したサンプルアプリのディレクトリを選択する

    ![vscode_extension_wsl_open_folder_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3887841/2a9a1749-2352-0620-f226-7b4deedf273a.png)

- 右下に以下のようなポップアップが現れるので、"Reopen in Container" をクリックする。

  ![vscode_extension_reopen_in_container.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3887841/d9d4e956-3f88-28d5-bef2-d3a45b451582.png)

  - ポップアップが出てこない場合や、消えてしまった場合は、Ctrl + Shift + P でコマンドパレットを開き、"Dev Containers: Reopen in Container" を実行する。

- 少し待つと、以下のような状態になる。
  - 左下の青い部分が、"WSL: ..." ではなく、 "Dev Container: ..." になっている。
  
  ![vscode_sample_app_in_dev_container.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3887841/23187857-39c8-3d37-3e30-1212ef4c7236.png)

## 2.7. サンプルアプリを起動する。
- アプリによって手順が異なるので、それぞれのアプリの手順書を参照すること。
- 棚占有率監視アプリの場合の概要 (詳しくは、アプリの手順書を参照)
  - console_access_settings.yaml を書き換える。
  - Terminal で以下を実行する。

    ```bash
    npm run dev
    ```

  - 少し待つと、右下に以下のようなポップアップが出てくるので、"Open in Browser" をクリックする。

    ![vscode_open_in_browser.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3887841/87c0372d-1d12-56ed-6305-2f67b1521905.png)

    - ポップアップが出てこない場合や、消えてしまった場合は、以下の手順を実施する。
      - Ctrl + Shift + P でコマンドパレットを開き、"Open Port in Browser" を実行する。
      - 3000 を選択する。

  - ブラウザが立ち上がり、サンプルアプリが起動する。

    ![sample_app_top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3887841/a9ed2caa-b943-3522-7f2e-58130a193735.png)



# 3. おわりに
- 棚占有率監視のサンプルアプリの詳しい使い方については、別途記事にする予定。


# 注意事項
- AITRIOS サンプルアプリを動かすには、AITRIOS のエッジデバイスの購入と AITRIOS Console の契約 (有償) が必要です。
- 本記事の内容は、できるだけ正確に記載するように心がけていますが、誤った情報が含まれている可能性があります。特に各ソフトウェアの利用に際しては、ライセンス等を確認の上、**ご自身の責任**でインストール・使用をお願いします。

# 困った時は
 
もし、記事の途中でうまくいかなかった場合は、気軽にこの記事にコメントいただいたり、以下のサポートのページもご覧ください。  
コメントのお返事にはお時間を頂く可能性もありますがご了承ください。
 
- [Support (FAQ)](
https://developer.aitrios.sony-semicon.com/edge-ai-sensing/support)
 
また、記事の内容以外で AITRIOS についてお困りごとなどあれば以下よりお問い合わせください。
- [Contact Us](
https://developer.aitrios.sony-semicon.com/edge-ai-sensing/contact-us)