PROSAGA码农传奇-Docker-使用asyncData获取http：// api：1337 / games net

<div class =“post-text”itemprop =“text”>
  <BLOCKQUOTE>
    <P>
      访问索引页面或/ pages / _id页面我没有错误。但是，当我尝试打开/其他页面时，它会崩溃。
    </p>
  </BLOCKQUOTE>
  <P>
    重新制定：
  </p>
  <UL>
    <LI>
      我有一个主页
       <code>
        /
      </code>
       它显示了一些针对目标网页的链接
       <code>
        /pages/_id
      </code>
       （哪里
       <code>
        _id
      </code>
       是一个有效的游戏ID）
    </LI>
    <LI>
      当我打开
       <code>
        /
      </code>
       要么
       <code>
        /pages/_id
      </code>
      ，内容显示出来
    </LI>
    <LI>
      但是如果我点击页面上的链接
       <code>
        /
      </code>
       针对
       <code>
        /pages/xxx
      </code>
       （哪里
       <code>
        xxx
      </code>
       是一个有效的id），我收到了一个错误
    </LI>
    <LI>
      此外，如果我刷新页面，然后我会看到内容而不是错误
    </LI>
    <LI>
      这些页面的内容来自api服务器。页面应该通过调用api服务器来获取内容，然后使用响应呈现页面内容。
    </LI>
  </UL>
  <H1>
    这里发生了什么事？
  </H1>
  <H2>
    AsyncData
  </H2>
  <P>
    方式
    <a href="https://nuxtjs.org/guide/async-data#the-asyncdata-method" rel="nofollow noreferrer">
      asyncData
    </A>
     在nuxt.js中工作如下：
  </p>
  <H3>
    在第一页加载
  </H3>
  <OL>
    <LI>
      用户输入网址
       <code>
        http://yourserver/pages/123
      </code>
       在它的浏览器中
    </LI>
    <LI>
      nuxt Web服务器处理请求，解析路由并为该页面安装vue组件
    </LI>
    <LI>
      该
       <code>
        asyncData
      </code>
       从nuxt.js服务器端调用vue组件的方法
    </LI>
    <LI>
      nuxt.js服务器（不是用户浏览器）然后通过进行不同的调用来获取内容
       <code>
        http://api:1337/games/123
      </code>
      ，接收响应和内容呈现。
    </LI>
  </醇>
  <H3>
    当用户单击另一个页面的链接时
  </H3>
  <P>
    现在发生了一些不同的事情。
  </p>
  <OL>
    <LI>
      用户仍在页面上
       <code>
        http://api:1337/games/123
      </code>
       其中包含列出所有游戏主页的链接（
       <code>
        http://yourserver/
      </code>
      ）并单击它。
    </LI>
    <LI>
      的<strong>
        浏览器不会加载任何新页面
      </强>
      。相反，用户浏览器进行ajax调用
       <code>
        http://api:1337/games
      </code>
       尝试获取新内容。并且由于名称解析错误而失败
    </LI>
  </醇>
  <H2>
    为什么？
  </H2>
  <P>
    这是nuxt.js为您带来的功能，可加快页面内容加载时间。来自
    <a href="https://nuxtjs.org/guide/async-data#the-asyncdata-method" rel="nofollow noreferrer">
      文件
    </A>
    ，重要的信息是：
  </p>
  <BLOCKQUOTE>
    <P>
       <code>
        asyncData
      </code>
       每次加载页面组件之前调用。它将被称为服务器端（在对Nuxt应用程序的第一个请求时）和客户端在导航到其他路由时。
    </p>
  </BLOCKQUOTE>
  <UL>
    <LI>
       <code>
        server-side
      </code>
       表示从nuxt服务器调用api服务器
    </LI>
    <LI>
       <code>
        client-side
      </code>
       表示从用户浏览器调用api服务器
    </LI>
  </UL>
  <P>
    现在有趣的部分：
  </p>
  <UL>
    <LI>
      nuxt服务器在第一个容器中运行
    </LI>
    <LI>
      api服务器正在第二个容器中运行并正在侦听端口
       <code>
        1337
      </code>
    </LI>
    <LI>
      从nuxt容器中，调用api服务器的url是
       <code>
        http://api:1337/
      </code>
      ，这很好用
    </LI>
    <LI>
      从用户浏览器调用
       <code>
        http://api:1337
      </code>
       失败（
       <code>
        net::ERR_NAME_NOT_RESOLVED
      </code>
      ）因为用户计算机不知道如何翻译域名
       <code>
        api
      </code>
       到IP地址。即使可能，这个IP地址无论如何都无法访问。
    </LI>
  </UL>
  <H1>
    可以做些什么？
  </H1>
  <UL>
    <LI>
      您需要设置一个反向代理，将用户浏览器发出的请求转发到url
       <code>
        http://yourserver/api/
      </code>
       到了
       <code>
        api
      </code>
       港口的集装箱
       <code>
        1337
      </code>
      。
    </LI>
    <LI>
      并且您需要配置nuxt.js以便链接到api
       <code>
        client-side
      </code>
       （从用户浏览器）使用url
       <code>
        http://yourserver/api
      </code>
       代替
       <code>
        http://api:1337/
      </code>
    </LI>
    <LI>
      而且你需要配置nuxt.js以便它继续调用
       <code>
        http://api:1337
      </code>
       打电话
       <code>
        server-side
      </code>
      。
    </LI>
  </UL>
  <H2>
    为从nuxt进行的调用添加反向代理（
     <code>
      server-side
    </code>
    ）
  </H2>
  <P>
    既然你正在使用
    <a href =“https://axios.nuxtjs.org/”rel =“nofollownoreferrer“>
      nuxt.js Axios模块
    </A>
     为了让你打电话到api容器，你就在那里。
  </p>
  <P>
    Axios模块有一个
    <a href="https://axios.nuxtjs.org/options#proxy" rel="nofollow noreferrer">
      代理
    </A>
     可以设置为的选项
     <code>
      true
    </code>
     在nuxtjs.config.js中
  </p>
  <P>
    Bellow是使用的为您的项目设置反向代理的示例
    <a href="https://traefik.io/" rel="nofollow noreferrer">
      Traefik
    </A>
    ，但文档声明代理与使用不兼容
    <a href="https://axios.nuxtjs.org/options#baseurl" rel="nofollow noreferrer">
      基本URL
    </A>
     选项。该
    <a href="https://axios.nuxtjs.org/options#prefix-host-and-port" rel="nofollow noreferrer">
      字首
    </A>
     必须使用选项。
  </p>
  <P>
    你的nuxt.config.js应如下所示：
  </p>
   <pre>
    <code>
        axios: {
    prefix: '/api',
    proxy: true
  }, 
  proxy: {
    '/api/': {
      target: 'http://localhost:1337',
      pathRewrite: {
        '^/api/': ''
      }
    }
  },

</code>
  </pre>
  <P>
    这可以在您的开发计算机上正常工作，如果strapi正在运行并响应
     <code>
      http://localhost:1337
    </code>
    。但这不适用于容器，因为我们需要更换
     <code>
      http://localhost:1337
    </code>
     同
     <code>
      http://api:1337
    </code>
    。
为此，我们可以引入一个环境变量（
     <code>
      STRAPI_URL
    </code>
    ）：
  </p>
   <pre>
    <code>
        axios: {
    prefix: '/api',
    proxy: true
  }, 
  proxy: {
    '/api/': {
      target: process.env.STRAPI_URL || 'http://localhost:1337',
      pathRewrite: {
        '^/api/': ''
      }
    }
  },

</code>
  </pre>
  <P>
    我们稍后会设定
     <code>
      STRAPI_URL
    </code>
     在docker-compose.yml文件中。
  </p>
  <H2>
    为用户浏览器调用添加反向代理（
     <code>
      client-side
    </code>
    ）
  </H2>
  <P>
    由于我在使用docker时放弃了使用nginx实现反向代理，这里有一个例子
    <a href="https://traefik.io/" rel="nofollow noreferrer">
      Traefik
    </A>
    ：
  </p>
  <P>
    泊坞窗，compose.yml：
  </p>
   <pre>
    <code>
      version: '3'

services:
  reverseproxy:  # see https://docs.traefik.io/#the-traefik-quickstart-using-docker
    image: traefik
    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

</code>
  </pre>
  <P>
    现在用户浏览器发出的所有HTTP请求
     <code>
      http://yourserver
    </code>
     将由Traefik反向代理处理。
  </p>
  <P>
    Traefik将通过查看以标签开头的标签来配置转发规则
     <code>
      traefik.
    </code>
     在...上
     <code>
      nuxt
    </code>
     和
     <code>
      api
    </code>
     容器。
  </p>
  <H1>
    改变了什么？
  </H1>
  <P>
    您现在有2个反向代理：
  </p>
  <UL>
    <LI>
      一个
       <code>
        server-side
      </code>
       请求（
      <a href="https://github.com/nuxt-community/proxy-module" rel="nofollow noreferrer">
        nuxt.js代理模块
      </A>
      ）
    </LI>
    <LI>
      一个
       <code>
        client-side
      </code>
       请求（Traefik）
    </LI>
  </UL>
  <H1>
    它还没有完成
  </H1>
  <P>
    我们现在需要指导
    <EM>
      nuxt.js代理模块
    </EM>
     它必须转发请求
     <code>
      http://api:1337/
    </code>
    。我们打算用
     <code>
      STRAPI_URL
    </code>
     环境变量。
  </p>
  <P>
    我们需要指导
    <EM>
      nuxt Axios模块
    </EM>
     用户浏览器必须调用api
     <code>
      http://yourserver/api
    </code>
    。这是通过
    <a href="https://axios.nuxtjs.org/options#browserbaseurl" rel="nofollow noreferrer">
      API_URL_BROWSER
    </A>
     环境变量。
  </p>
  <HR />
  <H1>
    全部一起
  </H1>
  <H3>
    nuxt.config.js
  </H3>
   <pre>
    <code>
        axios: {
    prefix: '/api',
    proxy: true
  }, 
  proxy: {
    '/api/': {
      target: process.env.STRAPI_URL || 'http://localhost:1337',
      pathRewrite: {
        '^/api/': ''
      }
    }
  },

</code>
  </pre>
  <H3>
    泊坞窗，compose.yml
  </H3>
   <pre>
    <code>
      version: '3'

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

</code>
  </pre>
</DIV>

使用asyncData获取http：// api：1337 / games net :: ERR_NAME_NOT_RESOLVED for nuxt.js页面