Docker-Compose / Azure WebApp / Nest.JS & Nuxt.js ：得到 ENOTFOUND 试图用 axios 获取后端服务器容器

Question

我是新来的，我希望能够找到解决我问题的方法:)

所以，

我正在使用 Nuxt.JS 和 Nest.JS 开发一个应用程序（前端 + 后端），我希望能够在一个 azure webapp 中部署这两个应用程序。

所以我使用了docker-compose来组合这两个应用程序

我用它们各自的 docker 文件创建了我的两个应用程序 nest 和 nuxt，但是当我启动我的 azure webapp 时，我的应用程序向我抛出一个在后端服务器地址上被拒绝的连接。

2021-01-04T14:25:40.285318405Z > app@1.0.0 start /src
2021-01-04T14:25:40.285328805Z > nuxt start
2021-01-04T14:25:40.285332905Z
2021-01-04T14:25:48.450602161Z ℹ Listening on: http://172.16.1.3:3000/
2021-01-04T14:27:27.474295806Z
2021-01-04T14:27:27.474325906Z  ERROR  getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:27:27.474331907Z
2021-01-04T14:27:27.474336207Z   at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:27:27.474340707Z
2021-01-04T14:27:27.502576941Z
2021-01-04T14:27:27.502597541Z  ERROR  getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:27:27.502654542Z
2021-01-04T14:27:27.502660442Z   at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:27:27.502664942Z
2021-01-04T14:43:42.908712507Z
2021-01-04T14:43:42.910087624Z  ERROR  getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:43:42.910098524Z
2021-01-04T14:43:42.910103124Z   at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:43:42.910107624Z
2021-01-04T14:43:42.942548608Z
2021-01-04T14:43:42.942574408Z  ERROR  getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:43:42.942592008Z
2021-01-04T14:43:42.942598908Z   at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:43:42.942605409Z

我试过的:

我试图创建一个 docker compose 网络，但据我所知，这两个应用程序都在同一个虚拟网络中 docker compose
我尝试更改 axios 协议
我尝试在本地主机上获取，127.0.0.1，0.0.0.0.0，返回，thomassaison-返回地址

而且我真的不知道如何解决这个很难调试的问题

在本地工作

这是我的 docker 文件：

Nuxt Dockerfile:

# Dockerfile
FROM node:10-alpine

ENV APP_ROOT /src

RUN mkdir ${APP_ROOT}
WORKDIR ${APP_ROOT}
ADD . ${APP_ROOT}

RUN npm install
RUN npm run build

ENV HOST 0.0.0.0

嵌套 Dockerfile：

FROM node:10 AS builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build


FROM node:10-alpine
WORKDIR /app
COPY --from=builder /app ./
CMD ["npm", "run", "start:prod"]

docker-compose.yml:

version: "3.3"
services:
  thomassaison-front:
    build: "./app/"
    container_name: "front"
    image: "thomassaison.azurecr.io/thomassaison-front"
    restart: always
    depends_on:
      - thomassaison-back
    ports: 
      - "80:3000"
    command:
      "npm run start"
      

  thomassaison-back:
    build: "server/"
    container_name: "back"
    image: "thomassaison.azurecr.io/thomassaison-back"
    restart: always
    ports:
      - "5000:5000"

Azure WebApp docker-撰写：

version: "3.3"
services:
  thomassaison-front:
    image: "thomassaison.azurecr.io/thomassaison-front:latest"
    container_name: "front"
    depends_on:
      - thomassaison-back
    ports: 
      - "80:3000"
    command:
      "npm run start"
      

  thomassaison-back:
    image: "thomassaison.azurecr.io/thomassaison-back:latest"
    container_name: "back"

nuxt.config.js:

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'app',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {
    baseURL: 'https://back:5000',
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {},
}

Answer 1

在 Azure Web App 中，当您使用 docker-compose 到运行多个容器时，所有容器都可以通过其他容器公开的端口相互通信，它们正在使用同一个主机。参见示例here，您需要为要连接的容器设置环境变量和选项depends_on：

version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:                          # here 
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306         # here
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:

我不确定，但也许你可以在 nuxt.config.js 文件中将 baseURL 的值更改为 https://thomassaison-back:5000，就像你在 docker 中设置的 depends_on ]-撰写。

Docker-Compose / Azure WebApp / Nest.JS & Nuxt.js ：得到 ENOTFOUND 试图用 axios 获取后端服务器容器

Docker-Compose / Azure WebApp / Nest.JS & Nuxt.js : got ENOTFOUND trying to fetch backend server container with axios

azure

docker

docker-compose

nestjs

nuxtjs