Question

我有一个生产docker-compose环境，运行Nginx容器，将每个PHP请求代理到一个PHP-FPM容器（PHP 7.2）。

距离我开始使用Webpack 4来构建前端资产已有几个月了，但是使用--watch选项的工作流程是如此缓慢，因此我决定将所有内容移至WebpackDevServer，我认为这是一个超酷的功能。

我想做的是使用WebpackDevServer绑定内存中的构建，并将每个PHP请求传递给Fpm容器，但由于端口和网络问题，我一直不知所措。

我天真地想了两种解决此问题的方法：

使用webpackdevserver代替Nginx并将每个PHP请求代理到FPM容器
使用Nginx + FPM并让FPM使用<script>和<link>之类的<script src="webpack:3000/bundles/home.js"></script>标签而不是<script src="/bundles/home.js"></script>中的绝对路径从manifest.json加载资产。

==第一种方法==

** docker-compose.yml **
services:
  fpm:
    build:
      context: ./docker/php
    image: fpm:latest

  webpack:
    build: ./docker/webpack
    links:
      - fpm
    ports:
      - 3000:3000
    command: npm run server


** webpack.config.js **
output: {
    filename: '[name].js',
    publicPath: WEB_ROOT,
    path: PATH_ROOT
},
devServer: {
    hot: true,
    inline: true,
    host: '0.0.0.0',
    port: 3000,
    contentBase: PATH_ROOT,
    proxy: {
        '/./': {
            target: 'fpm:9000',
            secure: 
        }
    },
},

但是当我docker-compose up并从浏览器打开localhost:3000时，什么也没发生。

==第二种方法==

** docker-compose.yml **
fpm:
  build:
    context: ./docker/php
    image: fpm:latest
  links:
    - webpack

** webpack.config.js **
output: {
    filename: '[name].js',
    publicPath: 'https://localhost:3000/public/',
    path: PATH_ROOT
},
devServer: {
    hot: true,
    inline: true,
    host: '0.0.0.0',
    publicPath: 'https://localhost:3000/public/',
},

然后，我将Twig的（我使用Twig作为模板引擎）资产的基本路径更改为webpack:3000/，但找不到任何内容。奇怪的事实：如果我从FPM容器ping webpack:3000会发现一些问题，如果我尝试ping webpack:3000/bundles/somebundle.js会抱怨端口无效。

我错了吗？谢谢！

通过Docker将WebpackDevServer连接到PHP-FPM

0 个答案: