代码之家 › 专栏 › 技术社区 › good_afternoon

Webpack开发人员服务器和DDEV(没有可用的后端站点)

ddev docker

good_afternoon · 技术社区 · 2 年前

我遵循了这个问题的公认答案: Accessing webpack dev server output with specific port in ddev / docker container

正在尝试访问的URL

http://localhost:8080结果 503: No ddev back-end site available.

http:// <project> .ddev.site:8080个结果 502: Unresponsive/broken ddev back-end site.

根据其他问题的答案,我添加了 docker-compose.devserver.yaml 包含以下内容的文件:

version: "3.6"
services:
  web:
    expose:
      - 8080
    environment:
    - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,8080:8080
    - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,8081:8080

开发服务器选项如下:

const devServerOptions = {
    clientLogLevel: 'info', // 'debug',
    contentBase: [
        path.join(__dirname, webPath),
        path.join(__dirname, templatesPath),
    ],
    compress: true,
    disableHostCheck: true,
    historyApiFallback: true,
    host: devServerHost,
    hot: true,
    hotOnly: false,
    headers: {
        'Access-Control-Allow-Origin': '*',
    },
    https: devServerIsHttps
        ? {
              key: fs.readFileSync(process.env.DEVSERVER_KEY),
              cert: fs.readFileSync(process.env.DEVSERVER_CRT),
              ca: fs.readFileSync(process.env.DEVSERVER_CA),
          }
        : false,
    inline: true,
    overlay: true,
    port: devServerPort,
    public: publicPath,
    publicPath: '',
    watchContentBase: true,
    watchOptions: {
        poll: !!parseInt(process.env.DEVSERVER_POLL || 0),
        ignored: /node_modules/,
    },
}

哪个在拉动以下 .env vars:

DEVSERVER_ENABLED=true
DEVSERVER_HOST=localhost
DEVSERVER_PORT=8080
DEVSERVER_HTTPS=false

访问时尝试加载资产 http://<project.ddev.site 在 http://localhost:8080/dist/styles/main.min.css 例如,并导致提到的503错误,即没有可用的后端ddev站点。

如果我删除 docker-compose 文件,并将其添加到 .ddev/config.yaml 文件:

web_extra_exposed_ports:
  - name: devserver
    container_port: 8080
    http_port: 8080
    https_port: 8081

不运行我的 yarn dev ( cross-env NODE_ENV=development webpack serve --stats=minimal --progress )命令,然后运行 ddev exec curl localhost:8080 ,我收到 connection refused 。

运行后 纱线开发 ,我收到 index.html 我的应用程序主入口点的文件。(这是一个Craft CMS应用程序,所以它在模板中提取index.html。也提取Twig评论,所以它输出实际的文件内容)

0 回复 | 直到 2 年前

good_afternoon 2 年前

我解决这个问题的方法可能不适用于所有人。

我发现的一件事是,我必须通过DDEV url访问开发服务器,即 <project-name>.ddev.site 而不是localhost。

接下来,我遇到了端口问题。这可能因其他人而异,但我第一次尝试端口13398008000时运气不佳。直到我用了9000,我才有了运气。

对于DDEV中暴露的端口,我不需要创建新的 docker-compose 文件,而是使用 web_extra_exposed_ports 中的选项 config.yaml 中的文件 .ddev 文件夹

web_extra_exposed_ports:
  - name: devserver
    container_port: 9000
    http_port: 9000
    https_port: 9001

注意:您需要 https_port 即使您不打算使用https。

最后,在我的 package.json 在创建命令以运行webpack-dev服务器的位置,我需要添加选项 --host=0.0.0.0

当然,在导航到您的网站之前,请确保启动了webpack开发服务器。