webpack-dev-serverとバックエンドアプリケーションを同じポートで動かす

前提

productionがhttps://app.example.comで、ここでバックエンドのアプリケーションもwebpackのbundle.jsも一緒に配信する

developmentでもwebpack-dev-serverさえ使わなければ同じポートにできるけど、webpack-dev-serverのauto reloadとか使いたいよねというお話

やりかた

webpack.config.jsにこう書く

const webpack = require("webpack")

module.exports = {
    entry: "./front/index.js" /* この辺はプロジェクトによって違うよね */,
    output: {
        path: __dirname+"/dist",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: "dist",
        // ここから本題
        proxy: {
            "/": "http://localhost:5000" // ここにbackendのURL(ここでは`http://localhost:5000`)を書く
        }
        // ここまで本題
    },
    // 省略
}

WebSocketが通るかどうかとかは検証してないのでもしかしたらその辺で詰むかもしれない。
おわり。


共有

このブログについてのお問い合わせ先: Google Forms