错误：在 dockerized vue 应用程序中连接 ECONNREFUSED 127.0.0.1:8080答案

【问题标题】：Error: connect ECONNREFUSED 127.0.0.1:8080 inside dockerized vue application错误：在 dockerized vue 应用程序中连接 ECONNREFUSED 127.0.0.1:8080
【发布时间】：2021-08-09 08:59:11
【问题描述】：

我有一个 vuejs 应用程序，我正在尝试设置使用 docker + docker-compose 的无头测试。我似乎无法解决服务似乎都可以正确启动但似乎无法相互通信的问题：

Dockerfile：

FROM node:lts-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install -f

EXPOSE 8080
# Note 8080 is exposed! I'm not crazy!
CMD ["npm", "run", "serve"]

docker-compose 文件：

version: '3.5'
services:
    my-app:
        build: .
        ports: 
            - "8080:8080"
        volumes:
          - type: bind
            source: ./app
            target: /app
          - "/app/node_modules"
    cypress:
      image: "cypress/included:8.2.0"
      depends_on:
        - my-app
      #environment:
      #  - CYPRESS_baseUrl=http://localhost:8080
      working_dir: /app
      volumes: 
        - type: bind
          source: ./app
          target: /app

volumes: 
  app:

但是，cypress 会吐出如下错误：

cypress_1  | http://localhost:8080/thank-you
cypress_1  | 
cypress_1  | We attempted to make an http request to this URL but the request failed without a response.
cypress_1  | 
cypress_1  | We received this error at the network level:
cypress_1  | 
cypress_1  |   > Error: connect ECONNREFUSED 127.0.0.1:8080
cypress_1  | 
cypress_1  | Common situations why this would fail:
cypress_1  |   - you don't have internet access
cypress_1  |   - you forgot to run / boot your web server
cypress_1  |   - your web server isn't accessible
cypress_1  |   - you have weird network configuration settings on your computer
cypress_1  |       at http://localhost:44829/__cypress/runner/cypress_runner.js:143973:23
cypress_1  |       at visitFailedByErr (http://localhost:44829/__cypress/runner/cypress_runner.js:143332:12)
cypress_1  |       at http://localhost:44829/__cypress/runner/cypress_runner.js:143972:11
cypress_1  |       at tryCatcher (http://localhost:44829/__cypress/runner/cypress_runner.js:13212:23)
cypress_1  |       at Promise._settlePromiseFromHandler (http://localhost:44829/__cypress/runner/cypress_runner.js:11147:31)
cypress_1  |       at Promise._settlePromise (http://localhost:44829/__cypress/runner/cypress_runner.js:11204:18)
cypress_1  |       at Promise._settlePromise0 (http://localhost:44829/__cypress/runner/cypress_runner.js:11249:10)
cypress_1  |       at Promise._settlePromises (http://localhost:44829/__cypress/runner/cypress_runner.js:11325:18)
cypress_1  |       at _drainQueueStep (http://localhost:44829/__cypress/runner/cypress_runner.js:7919:12)
cypress_1  |       at _drainQueue (http://localhost:44829/__cypress/runner/cypress_runner.js:7912:9)
cypress_1  |       at Async.../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:44829/__cypress/runner/cypress_runner.js:7928:5)
cypress_1  |       at Async.drainQueues (http://localhost:44829/__cypress/runner/cypress_runner.js:7798:14)
cypress_1  |   From Your Spec Code:
cypress_1  |       at Context.eval (http://localhost:44829/__cypress/tests?p=tests/e2e/specs/views/ThankYou.js:101:8)
cypress_1  |   
cypress_1  |   From Node.js Internals:
cypress_1  |     Error: connect ECONNREFUSED 127.0.0.1:8080
cypress_1  |         at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16)

我曾经提出此设置的参考：

注意：我尝试了许多 baseUrl 的变体（localhost、my-app 等）。所有这些都会导致相同的问题。

【问题讨论】：

也许 0.0.0.0:8080 会起作用？
CYPRESS_baseUrl env 变量在 compose 文件中被注释掉，Cypress 是否需要它才能工作？
@MarkoE 我已经尝试了很多变体，如我的帖子末尾所述。如果你有什么具体的，你认为我应该尝试，请指定。

标签： docker vue.js cypress

【解决方案1】：

localhost 在容器上下文中是容器本身。因此，当您的 cypress 容器尝试连接到 localhost:8080 时，它会尝试连接到自身的 8080 端口。

Docker compose 创建了一个虚拟网络，每个容器都可以通过其服务名称来寻址。所以 cypress 需要连接到http://my-app:8080/thank-you 而不是http://localhost:8080/thank-you。

当连接来自同一虚拟网络上的容器时，它连接到的端口是内部端口。因此，即使您不映射端口，它也可以工作。如果你想从主机访问容器，你只需要映射端口。

要考虑的另一件事是，您的节点应用程序需要接受来自 localhost 以外的其他来源的连接。如果没有，请确保在 app.listen 上绑定到 0.0.0.0。

【讨论】：

我在底部注意到我确实尝试过这个。即，将我的 cypress 测试中的链接从 localhost:8080 更改为 my-app:8080。这些设置与更改我的第一个 cy.visit 一起没有成功。你能为你的最后一句话提供更明确的说明吗？（绑定到 app.losten 上的 0.0.0.0）
app.listen 位只是我的假设，即您的 vue 应用程序连接到用 nodejs 编写的 API。这不是我很清楚的。如果您没有 nodejs 后端，我的评论没有任何意义。对此感到抱歉。
谢谢汉斯。这个应用程序没有后端，只有一个 vuex 商店。感谢这里的帮助和 docker compose 虚拟网络的描述。我还尝试通过将它们添加到 docker-compose 文件中来将它们放在同一个“网络”中。我的理解是，通过让他们在同一个网络上，他们会在端口暴露的情况下“看到”彼此，但这也不起作用。
我尝试制作 2 个容器的最小示例，其中一个容器在这里与另一个容器对话：gist.github.com/kodedylf/6812f761912b9ca0d0f2bfab77e57474。客户端向webserver 发出请求，然后调用转到另一个容器。

【解决方案2】：

您可以指定组合服务使用主机的网络。用钥匙：network_mode: host。您还需要将 baseUrl 指定为 localhost:8080。这是一个功能齐全的 docker-compose 文件：

version: '3.5'
services:
    my-app:
        build: .
        ports: 
            - "8080:8080"
        volumes:
          - type: bind
            source: ./app
            target: /app
          - "/app/node_modules"
    cypress:
      image: "cypress/included:8.2.0"
      depends_on:
        - my-app
      #environment:
        - CYPRESS_baseUrl=http://localhost:8080 # and this
      working_dir: /app
      network_mode: host # this
      volumes: 
        - type: bind
          source: ./app
          target: /app

volumes: 
  app:

【讨论】：