渋谷の隅から

東京都に住んでるわけではないです

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

開発 ≫ Webフロントエンド

公開日: / タグ: dev, frontend, webpack

⚠️ この記事は公開されてから8年以上経過しており、現在では内容が古く・正しくなくなっている可能性があります。別途最新の情報を参照することを推奨します。

前提

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


共有

Twitterでツイート (Xでポスト)はてなブックマークBluesky (bsky.app) でシェア・コピー用テキスト

この記事を書いた人の活動を GitHub Sponsors もしくは pixiv FANBOX で支援できます!! GitHub Sponsors なら一回のみの支援もできます。ぜひご検討ください。