株式会社アイオーアーキテクトは、オープンソースなどを活用してシステム運用を最適にご提供します。

今回は開発者向けのおはなしです。

お遊びでVue.js触ろうと思って、vue-cliでプロジェクトのscaffoldを作成したのですが、ホットリロードが効かない。ググると結構あるあるのようです。ただ、スタックのバージョンによってころころ変わるようで、ググった限りで同じ方法で解決している方いらっしゃらなかったのでメモ兼ねてご紹介しておきます。

スタックは以下の通り。2022/5/15時点の組み合わせです。

• nodejs: 18.1.0
• npm: 8.8.0
• @vue/cli : 5.0.4
• vue: 3.2.33

Node.jsはWSL上で動かしてブラウザはWindows側です。

結論から行くと、vue.config.jsを以下のように編集。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    watchOptions :{
      aggregateTimeout: 300,
      poll: 1000
    }
  }
})

私の環境ではこの設定でホットリロードかかるようになりました。

ググって試したのを書いておくと、

https://qiita.com/ntm718/items/6023b0063f78d53192a1

module.exports = {
  configureWebpack: {
    devServer: {
      watchOptions: {
        poll: true
      }
    }
  }
}

defineConfigがないので合わず。

https://www.miracleave.co.jp/contents/1333/post-1333/

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    watch: true
  }
})

[DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A ‘callback’ argument needs to be provided～みたいな警告が出て、起動はするものの効かず。

https://stackoverflow.com/questions/53589853/vue-cli-3-hot-reload-suddenly-not-working-in-browsers

やっぱだめ

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    watchOptions: {
      poll: true
    }
  }
})

Invalid optionsで起動せず。

webpackまわりっぽいので、そっちで調べて

https://github.com/vuejs-templates/webpack/issues/432

あたりからこれまでのいくつかの設定方法を組み合わせて冒頭の設定に行き着きました。

スタックが大きいと厄介ですねぇ。ともあれこれまでの対応を残してくださってる皆様に感謝です。

OTOBO 10.1が2022年3月3日にリリースされました。大きな機能追加はされていませんが、内部のプログラム修正がされたり、細かな機能追加をされています。OTOBO 10.0にはFAQの権限系の脆弱性がありましたので、最新の10.1にアップグレードすることを推奨します。詳しくは、以下のリンクでご確認下さい。

こちら

以前記事に上げたFAQ一覧に権限がない記事のタイトルが表示されるというバグの修正ですが、提示していたプルリクエストが本家に取り込まれました。

https://github.com/RotherOSS/FAQ/issues/11

次のFAQ10.0.6でFIXとなりますので同じ問題でお困りの方は更新すると良いかと思います。

プリリクエストを送ったのが1月の頭なので3ヶ月強での採用となっています。間にOTOBO 10.1のリリースがありましたので取り込みは遅れるだろうなとは予想していましたが、10.1がリリースされてOTOBO側が落ち着いてきてリソースが回ってきた感じでしょうか。

多くのアプリケーションでは開発リソースは最新版とメンテ版両方を見ていますので、githubを追っていると開発の動きがある程度予想できます。興味がある方は覗いてみると良いかもしれません。

　ジョブ管理ソフトウェアというと、SenjuやJP1を思い浮かべる方が多いかと思います。でも、費用が高いので、もう少し廉価にジョブ管理が出来ないかと、オープンソースを探すとHinemosやJS7が出てきます。私は、どの製品も触ったことがありますが、どれも一長一短があると認識しています。その中でも弊社で取扱いの多いOTRSと親和性のあるJobScheduerと連携して、リリース管理システムを構築したことのある最近のJobScheduerについてご紹介します。

　最近のJobSchedulerは、2021年7月にJS7® JobScheduler V.2.0.0としてブランド名を変えてリリース致しました。これまでとは、JobSchedulerコントローラ、エージェント、JOCコックピットが一新されました。以下、JS7® JobScheduler V.2.0.0を「JS7」と言います。まず、JS7を簡単に紹介します。

JS7の動作環境

　ジョブを実行する対象サーバは、以下のプラットフォームに対応しています。

JS7のメリット

JS7の導入メリットは以下の2点考えられます。

(1)プログラマブルな管理が可能
ジョブの定義は、プログラミングすることで実現できます。対応言語は、他言語対応（Java, Perl, JavaScript, VBScript, Powershell, シェル等）しており、プログラマブルに定義する特徴があります。従って、外部のOSSから動的にジョブを投入、定義したい時などは、お勧めなOSSとなっております。
(2)プロダクトの保守サポート費が安価

詳しくは、OSSラボ株式会社のサイトをご覧ください。（こちら）

開発環境でdockerを使っているとだんだんイメージ、コンテナが増えてきていざ整理しようとすると収集がつかなくなることが多々あります。イメージは階層構造をとるため、「こいつは一体どのイメージから参照されているのか？消していいものなのか？」と悩むことになりがちです。

皆考えることは似たようなもので以前グラフ表示をしてくれるツールを使っていたのですが名前がわからなくなってしまったのでさらっと作ってしまいました。

グラフ表示は自力でやると大変ですのでCytoscape.jsというライブラリにお世話になることにします。グラフ表示といっても棒グラフや折れ線グラフのほうではなく、依存関係を表す有向グラフの方です。これを使うと有向グラフをいい感じに表示してくれます。ということで、こんな感じのグラフを(比較的)簡単に表示できます。

画像から想像つくかもしれませんが、拡大・縮小や、ノードの位置の移動などもCytoscape.jsがよろしくやってくれます。実際の画面も置いておきますので、気になる方は触ってみてください。

Cytoscape.jsが動いてる画面サンプル

※ 画面サンプルは少し加工してスタティックなHTMLにしていますのでdockerからデータは取ってきていません

ニーズがあるかどうかはわかりませんがせっかくなのでソースはgithubに置いておくことにします。

docker-graph -Show dependency graph of docker images/containers

こちらはコンテナやイメージの状態を取得してそれに応じた表示をしてくれます。

ネタとして今回はdockerのイメージを使いましたがCytoscape.jsは結構使いでがあるライブラリで、構成管理などで複雑な依存関係がある場合などにわかりやすく表示するなど、色々用途が考えられます。時間とやる気ができたらOTOBO/Znuny上で実装するかもしれません。