Azure IoT Explorer開発環境をVS Code + Remote-Containersで構築する

# Azure IoT Explorer 開発環境を構築する

Azure IoT Hubをお仕事にしている場合、[Azure IoT Explorer (preview)](https://github.com/hydrangeas/azure-iot-explorer)はとっても便利な存在です。

少しだけカスタマイズしたい箇所がありましたので、環境をVisual Studio Code + Remote - Containersで構築したのですが、少しだけ罠がありましたので、書き留めておきます

## 各種設定ファイル

ソースコードをダウンロード(clone)して、以下のように4つのファイルを追加します。

```
./azure-iot-explorer/
├── .devcontainer
│   └── devcontainer.json
├── .dockerignore
├── Dockerfile
└── docker-compose.yml
```

### devcontainr.json

```json
{
  "dockerComposeFile": [
      "../docker-compose.yml"
  ],
  // docker-compose.ymlのservice名と一致させる
  "service": "app",
  // docker-compose.ymlのvolume targetと一致させる
  "workspaceFolder": "/app",
  // オプション
  "shutdownAction": "stopCompose",
  "extensions": [
  ]
}
```

### Dockerfile

```dockerfile
FROM node:14-alpine3.13

# Common OS packages
RUN apk update && \
    apk upgrade && \
    apk add git && \
    apk add openssh
# for azure-iot-explorer
RUN apk add curl g++ make python2 

# Common Node.js packages
RUN npm install -g npm
# for azure-iot-explorer
#RUN npm install -g ...

# Environment Arguments
ENV PROJECT_ROOTDIR /app/
WORKDIR ${PROJECT_ROOTDIR}

ARG NODE_ENV=development
ENV NODE_ENV=${NODE_ENV}

# Constructs dependencies
COPY package*.json ${PROJECT_ROOTDIR}
RUN npm install

# Copy ALL files
COPY . ${PROJECT_ROOTDIR}
RUN npm run build
```

Nodeのバージョンは14か15。依存しているnode-sassが16ではサポートされていないからとのこと。

pythonも3だと動かず、2で動いた（本当はちゃんと原因をみた方がいいのだろうけども）。

このコンテナは開発でしか使わないので`NODE_ENV`は`development`固定。

`openssh`はプライベートリポジトリにpushしないなら不要かな？

### dokcer-compose.yml

```yml
version: "3"
services:
  app:
    container_name: app
    build: .
    ports:
      - 8080:8080
    volumes:
      - .:/app
      - ~/.ssh:/root/.ssh:ro
    privileged: true
    tty: true
    stdin_open: true
```

`.ssh`はVisual Studio Code上からpushしたいかったのでコピーしてる。プライベートリポジトリじゃなきゃ不要かも？

### .dockerignore

```
node_modules
dist
```

`node_modules`をコピー対象外にしておかないと、なぜか2回目以降にエラーになっちゃうんですよね・・。

### 注意点

なんでか知らないですが、`NODE_ENV`を設定しても`npm install`時の環境に反映されません。なので、dockerは立ち上がりますが、`npm run build`とか`npm start`ビルドで躓きます。

初回だけ立ち上げ後に`npm install && npm run build && npm start`すればいいので、それで回避してます。

## チェック

ちゃんと動くか確かめます。とりあえずタイトルを変更したいので、`en.json`を書き換えることにします。

```
./src/
└── localization
    └── locales
        └── en.json
```

以下のように`applicationName`を変更しました（`-ng`を追加しています）

```json
    "header": {
        "applicationName": "Azure IoT Explorer (preview-ng)",
```

`npm start`して`http://127.0.0.1:3000/`にアクセスしてみると正常に反映されていることが分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7886/6625c79b-cd1a-e12e-4693-82148ec2655c.png)

## FAQ

何回かエラーが出てしまったのでメモ。

### Can't find Python executable "python", you can set the PYTHON env variable. 

Python3を入れるとここで躓きます。Python2をインストールしましょう。

### v8-internal.h:452:38: error: 'remove_cv_t' is not a member of 'std'; did you mean 'remove_cv'

- [error: no template named 'remove_cv_t' in namespace 'std'; did you mean 'remove_cv'?](https://stackoverflow.com/a/67303155)

> The problem is node-sass doesn't support Node 16
> (意訳）Node 16ではnode-sassはサポートされていません

> downgrade your Node installation to a supported version(I can see both 14 and 15 tested in their CI)
> (意訳) Nodeバージョンをダウングレードして(node-sassが）サポートされているバージョンをインストールしましょう（CIをみると14か15なら使えそうですね）

### 起動が遅い

うん。
なんでかな・・？

# 雑感

開発環境によってNodeのバージョン切り替えるのだるかったのですが、Remote-Containersがあるお陰で、試行錯誤のハードルが大分下がりました。

今日はこれでおしまい。