Docker Compose/Azure WebApp/Nest.JS&；Nuxt.js:在尝试使用axios获取后端服务器容器时发现Enotfind

我是新来的，我希望能找到解决我问题的办法：）

所以

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

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

我用各自的dockerfile创建了我的两个应用程序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协议
• 我尝试在localhost上获取，127.0.0.1，0.0.0.0.0，back，thomassason back地址

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

它在本地工作

这是我的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

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"]

嵌套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

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 compose：

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: {},
}

---

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

取决于

：

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:

---

我不确定，但也许您可以将baseURL的值更改为

https://thomassaison-back:5000

在nuxt.config.js文件中，例如

取决于您在docker compose中设置的
。
这些组件之一是基于浏览器的应用程序吗？你的浏览器不在Docker中，因此它将永远无法解析Docker内部主机名。我不确定我是否理解这个问题，但Nuxt.js呈现了一个Web应用程序（SSR），Nuxt.js是我的API，这两个应用程序在nodejs环境中运行。对此问题有任何更新吗？它解决了你的问题吗？是的，它解决了我的问题