webpackdevserverでhttps起動しつつHMRとproxy(docker)

27/05/202004/01/2021

ローカル開発用なので
個人的にはわざわざ証明書用意しなくても
localhost にアクセスする（安全ではありません）
クリックで問題ないと思っている、
という感じなので参考になればですが
メモ代わりの内容。の抜粋

{
  devServer: {
    host: "app.local",
    contentBase: "public",
    publicPath: "/assets/js/",
    https: true,
    open: true,
    hotOnly: true,
    disableHostCheck: true,
    proxy: {
      "/api": {
        target: "http://app.local:80",
        changeOrigin: true,
        autoRewrite: true,
      },
    },
  },
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "public/assets/js"),
    publicPath: "/assets/js/",
  },
};

少し詰まったのが
outputにもpublicPath書かないと
hot-update.jsを読めなくてエラーが出る。

あとdocker側は
target: “http://app.local:443”
ってわざわざしてたけど
target: “http://app.local:80”
で普通にhttpsでアクセスできた。
(ローカル開発で困らないようには)