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

Azure IoT Hubをお仕事にしている場合、Azure IoT Explorer (preview)はとっても便利な存在です。

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

各種設定ファイル

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

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

devcontainr.json

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

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

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を追加しています）

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

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

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'?

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があるお陰で、試行錯誤のハードルが大分下がりました。

今日はこれでおしまい。

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