docker - 使用asyncData为nuxt.js页面获取http://api:1337/games net::ERR_NAME_NOT_RESOLVED

Question

我使用docker进行了一些复杂的设置。一切都按预期工作，除了我有这个奇怪的问题。
访问索引页面或/ pages / _id页面我没有错误。但是，当我尝试打开/ other-page时，它崩溃了。所有人都使用相同的API网址。

打开/ other-page时在控制台中发现错误:

GET http://api:1337/games net::ERR_NAME_NOT_RESOLVED

不知道该怎么办，有什么建议吗？

nuxt.config.js

  axios: {
    baseURL: 'http://api:1337'
  },

docker-compose.yml

version: '3'

services:
  api:
    build: .
    image: strapi/strapi
    environment:
      - APP_NAME=strapi-app
      - DATABASE_CLIENT=mongo
      - DATABASE_HOST=db
      - DATABASE_PORT=27017
      - DATABASE_NAME=strapi
      - DATABASE_USERNAME=
      - DATABASE_PASSWORD=
      - DATABASE_SSL=false
      - DATABASE_AUTHENTICATION_DATABASE=strapi
      - HOST=api
      - NODE_ENV=production
    ports:
      - 1337:1337
    volumes:
      - ./strapi-app:/usr/src/api/strapi-app
      #- /usr/src/api/strapi-app/node_modules
    depends_on:
      - db
    restart: always
    links:
      - db

  nuxt:
    # build: ./app/
    image: "registry.gitlab.com/username/package:latest"
    container_name: nuxt
    restart: always
    ports:
      - "3000:3000"
    links:
      - api:api
    command:
      "npm run start"


  nginx:
    image: nginx:1.14.2
    expose:
      - 80
    container_name: nginx
    restart: always
    ports:
      - "80:80"
    volumes:
      - ./nginx:/etc/nginx/conf.d
    depends_on:
      - nuxt
    links:
      - nuxt

索引值

...
  async asyncData({ store, $axios }) {
    const games = await $axios.$get('/games')
    store.commit('games/emptyList')
    games.forEach(game => {
      store.commit('games/add', {
        id: game.id || game._id,
        ...game
      })
    })
    return { games }
  },
...

page.vue

...
  async asyncData({ store, $axios }) {
    const games = await $axios.$get('/games')
    store.commit('games/emptyList')
    games.forEach(game => {
      store.commit('games/add', {
        id: game.id || game._id,
        ...game
      })
    })
    return { games }
  },
...

Nginx配置

upstream webserver {
  ip_hash;
  server nuxt:3000;
}

server {
  listen 80;
  access_log off;
  connection_pool_size 512k;
  large_client_header_buffers 4 512k;

  location / {
    proxy_pass http://webserver;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_max_temp_file_size 0;
  }

更新:

尝试了Thomasleveil的建议。现在，我收到以下错误:

nuxt | [2:09:35 PM]错误:连接ECONNREFUSED 127.0.0.1:80

因此，似乎现在/ api已转发到127.0.0.1:80。不知道为什么^^

nuxt.config.js

  axios: {
    baseURL: '/api'
  },
  server: {
    proxyTable: {
      '/api': {
         target: 'http://localhost:1337',
         changeOrigin: true,
         pathRewrite: {
           "^/api": ""
         }
      }
    }
  }

docker-compose.yml

version: '3'

services:
  reverse-proxy:
    image: traefik # The official Traefik docker image
    command: --api --docker # Enables the web UI and tells Traefik to listen to docker
    ports:
      - "80:80"     # The HTTP port
      - "8080:8080" # The Web UI (enabled by --api)
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock # listen to the Docker events
    networks:
      - mynet

  api:
    build: .
    image: strapi/strapi
    container_name: api
    environment:
      - APP_NAME=strapi-app
      - DATABASE_CLIENT=mongo
      - DATABASE_HOST=db
      - DATABASE_PORT=27017
      - DATABASE_NAME=strapi
      - DATABASE_USERNAME=
      - DATABASE_PASSWORD=
      - DATABASE_SSL=false
      - DATABASE_AUTHENTICATION_DATABASE=strapi
      - HOST=api
      - NODE_ENV=development
    ports:
      - 1337:1337
    volumes:
      - ./strapi-app:/usr/src/api/strapi-app
      #- /usr/src/api/strapi-app/node_modules
    depends_on:
      - db
    restart: always
    networks:
      - mynet
    labels:
      - "traefik.backend=api"
      - "traefik.docker.network=mynet"
      - "traefik.frontend.rule=Host:example.com;PathPrefixStrip:/api"
      - "traefik.port=1337"

  db:
    image: mongo
    environment:
      - MONGO_INITDB_DATABASE=strapi
    ports:
      - 27017:27017
    volumes:
      - ./db:/data/db
    restart: always
    networks:
      - mynet

  nuxt:
    # build: ./app/
    image: "registry.gitlab.com/username/package:latest"
    container_name: nuxt
    restart: always
    ports:
      - "3000:3000"
    command:
      "npm run start"
    networks:
      - mynet
    labels:
      - "traefik.backend=nuxt"
      - "traefik.frontend.rule=Host:example.com;PathPrefixStrip:/"
      - "traefik.docker.network=web"
      - "traefik.port=3000"

networks:
  mynet:
    external: true

Answer 1

Visiting index page or /pages/_id pages I have no errors. But when I try to open /other-page it crashes.

重新制定:

我在/上有一个主页，该页面显示了一些针对/pages/_id(其中_id是有效的游戏ID)的页面的链接。

打开/或/pages/_id时，内容显示为

但是，如果我单击页面/中的链接指向/pages/xxx(其中xxx是有效ID)，则会收到错误

此外，如果刷新页面，我会看到内容，而不是错误

这些页面的

内容来自api服务器。页面应该通过调用api服务器来获取内容，然后使用响应呈现页面内容。

这里发生了什么事？

异步数据

asyncData在nuxt.js中的工作方式如下:

在首页加载时

用户在浏览器中输入URL http://yourserver/pages/123

，nuxt Web服务器处理请求，解析路由并为该页面安装vue组件

从nuxt.js服务器端

调用vue组件中的 asyncData方法
然后，通过nuxt.js服务器(而不是用户浏览器)

对http://api:1337/games/123进行不同的调用来获取内容，接收响应并呈现内容。

当用户单击另一个页面的链接时

现在发生了一些变化。

用户仍在http://api:1337/games/123页面上，该页面具有指向列出所有游戏的首页的链接(http://yourserver/)，然后单击它。

浏览器不会加载任何新页面。而是，用户浏览器对http://api:1337/games进行了ajax调用，以尝试获取新内容。并由于名称解析错误

而失败

为什么？

这是nuxt.js带来的功能，可加快页面内容的加载时间。从 documentation中，重要的信息是:

asyncData is called every time before loading the page component. It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes.

server-side表示从nuxt服务器到api服务器的调用

client-side表示是从用户浏览器到api服务器

的调用

现在有趣的部分:

nuxt服务器在第一个容器

中运行

，api服务器正在第二个容器中运行，并且正在侦听端口1337

来自nuxt容器的

，用于调用api服务器的URL是http://api:1337/，这可以正常工作

在用户浏览器中，

调用http://api:1337失败(net::ERR_NAME_NOT_RESOLVED)，因为用户计算机不知道如何将域名api转换为IP地址。即使可以，此IP地址也将无法访问。

该怎么办？

您需要设置一个反向代理，以将用户浏览器发出的请求转发到以http://yourserver/api/开头的url到端口api上的1337容器。

并且您需要配置nuxt.js，以便链接到api制成的client-side(从用户浏览器)的链接使用url http://yourserver/api而不是http://api:1337/

并且您需要配置nuxt.js，以便它继续为http://api:1337进行的调用调用server-side。

为从nuxt( server-side)发出的 call 添加反向代理

由于您使用的是 nuxt.js Axios module来调用api容器，因此您已经完成了一半。

Axios模块具有 proxy选项，可以在nuxtjs.config.js中将其设置为 true。

Bellow是使用 Traefik为您的项目设置反向代理的示例，但是文档说明该代理与 baseURL选项的用法不兼容。必须改为使用 prefix选项。

然后，您的nuxt.config.js应该如下所示:

  axios: {
    prefix: '/api',
    proxy: true
  }, 
  proxy: {
    '/api/': {
      target: 'http://localhost:1337',
      pathRewrite: {
        '^/api/': ''
      }
    }
  },

这在您的开发计算机上工作正常，如果trapi正在运行并以 http://localhost:1337进行响应。但这在容器中不起作用，因为我们需要用 http://localhost:1337替换 http://api:1337。
为此，我们可以引入一个环境变量( STRAPI_URL):

  axios: {
    prefix: '/api',
    proxy: true
  }, 
  proxy: {
    '/api/': {
      target: process.env.STRAPI_URL || 'http://localhost:1337',
      pathRewrite: {
        '^/api/': ''
      }
    }
  },

稍后我们将在docker-compose.yml文件中设置 STRAPI_URL。

为从用户浏览器发出的 call 添加反向代理( client-side)

由于我放弃了在使用docker时使用nginx实现反向代理的方法，因此下面是 Traefik的示例:

docker-compose.yml:

version: '3'

services:
  reverseproxy:  # see https://docs.traefik.io/#the-traefik-quickstart-using-docker
    image: traefik:1.7
    command: --docker
    ports:
      - "80:80"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock

  api:
    image: strapi/strapi
    environment:
      - ...
    expose:
      - 1337
    labels:
      traefik.frontend.rule: PathPrefixStrip:/api
      traefik.port: 1337

  nuxt:
    image: ...
    expose:
      - 3000
    command:
      "npm run start"
    labels:
      traefik.frontend.rule: PathPrefixStrip:/
      traefik.port: 3000

现在，用户浏览器对 http://yourserver发出的所有HTTP请求都将由Traefik反向代理处理。

Traefik将通过查看 traefik.和 nuxt容器上以 api开头的标签来配置转发规则。

发生了什么变化？

您现在有2个反向代理:

一个用于server-side请求(nuxt.js Proxy module)

一个用于client-side请求(Traefik)

还没完成

现在，我们需要指示nuxt.js代理模块，它必须将请求转发到 http://api:1337/。为此，我们将使用 STRAPI_URL环境变量。

并且我们需要指示nuxt Axios模块用户浏览器必须在 http://yourserver/api上调用api。这是通过 API_URL_BROWSER环境变量完成的。

全部一起

nuxt.config.js

  axios: {
    prefix: '/api',
    proxy: true
  }, 
  proxy: {
    '/api/': {
      target: process.env.STRAPI_URL || 'http://localhost:1337',
      pathRewrite: {
        '^/api/': ''
      }
    }
  },

docker-compose.yml

version: '3'

services:
  reverseproxy:  # see https://docs.traefik.io/#the-traefik-quickstart-using-docker
    image: traefik:1.7
    command: --docker
    ports:
      - "80:80"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock

  api:
    image: strapi/strapi
    environment:
      - ...
    expose:
      - 1337
    labels:
      traefik.frontend.rule: PathPrefixStrip:/api
      traefik.port: 1337

  nuxt:
    image: ...
    expose:
      - 3000
    command:
      "npm run start"
    environment:
      NUXT_HOST: 0.0.0.0
      STRAPI_URL: http://api:1337/
      API_URL_BROWSER: /api
    labels:
      traefik.frontend.rule: PathPrefixStrip:/
      traefik.port: 3000