Windows Terminal 上でwebpack-dev-serverとdocker-composeを同時に起動し別のペインに表示

3321 ワード
WindowsTerminal docker-compose webpack Windows Windows テキストリンク

仕様

  • WindowsTerminalの別々のペインに、フロントのwebpack-dev-serverとバックのdocker-composeを起動する。
  • 下の画像のような感じ。

コード

1.npm-scriptにwebpack-dev-serverを起動するコマンドを設定

  • srv:w というコマンド名を定義。
package.json
  "scripts": {
    "srv:w": "webpack-dev-server & webpack"
  },

2.Windows Terminal実行バッチ

  • パスは可読性の為、変数に設定。
  • 「C:\Develop\Project1\」をプロジェクトルートとする。
  • プロジェクトルート配下に、「front」、「back」のディレクトリを配置。
  • 「front」にフロントのリソース（webpack含む）を配置。
  • 「back」にバックのリソース（docker-composeを含む）を配置。
run_all.bat

@echo off
::=================
:: パスの定義
::=================
set PROJECT_DIR=C:\Develop\Project1\
set FRONT_DIR=%PROJECT_DIR%front\
set BACK_DIR=%PROJECT_DIR%back\

::===================================================================
:: WindowTerminalでwebpack-dev-serverとdocker-comoseを別々タブで実行
::====================================================================
wt -d %FRONT_DIR% cmd /k npm run srv:w ; split-pane -V -d %BACK_DIR% cmd /k docker-compose up
  • 上記のバッチを起動すると、WindowsTerminalが立ち上がり、別々のペインでサーバとコンテナが起動する。

備考

  • WindowsTerminalをコマンドラインから実行する記事は、以下。

-▶ 参考：Windows Terminalをコマンドで実行し、更に、その中でコマンド実行。