blog.rinsuki.net

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

投稿: 2017/11/08 06:33:14

タグ: devfrontendwebpack

前提

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が通るかどうかとかは検証してないのでもしかしたらその辺で詰むかもしれない。
おわり。