Docker-Compose SSR 应用程序，来自服务器的请求和来自浏览器的请求

Question

我正在进行以下部署（docker-compose），它由带有 Nuxt（SSR）的前端和带有 Django 的后端组成：

部署

version: '3'

services:
  backend:
    restart: always
    build: ./task_processor_back
    expose:
      - "8000"
    env_file: .env
    command: /usr/local/bin/gunicorn task_processor.wsgi:application -w 2  -b :8000
    
  frontend:
    restart: always
    build: ./task_processor_front
    expose:
      - "3500"
    depends_on:
      - "backend"
    links:
      - backend
    command: npm start

我正在利用 nuxtServerInit 函数通过 Axios 调用后端 API。

NuxtServerInit

// store/index.ts
import { Dispatch } from 'vuex';

export const actions = {
  async nuxtServerInit({ dispatch }: { dispatch: Dispatch }) {
    await dispatch('tasks/fetchTasks', true); #ends with a call to Axios
  }
};

其他 Axios 调用

// store/task.ts
@Action
  async sendReply(reply: Reply) {
    return new Promise((resolve, reject) => {
      TaskProcessor.sendReply(reply)
        .then(() => resolve())
        .catch(() => reject());
    })
  }

问题出现了，当它通过 docker-compose 部署时，它会创建一个名为 的网络，通过该网络它可以与其他部署的资源（Docker）进行通信。我意识到，SSR（服务器）部分（例如 nuxtServerInit 函数）的所有调用都必须通过所述网络在内部完成，而在浏览器中执行的 javascript 函数的调用必须在外部进行。以上我的意思是：

nuxt.config.js

Internal: axios: { baseURL: 'http://backend:8000' } //backend = resource name in docker-compose
External: axios: { baseURL: 'http://localhost:8000' }

我可以验证这一点，因为如果我保留内部配置，它会从 nuxtServerInit 函数成功调用，但当我从浏览器调用时，它不会。否则，如果我保留外部配置（并注释 nuxtServerInit 函数），它可以在浏览器中正常工作。

如何在 docker compose 中处理这两种情况？

Answer 1

这就是在带有 Axios 模块的 NuxtJs v2.15 中对我有用的东西：

在

nuxt.config.js

文件中：

axios: {
  baseURL: 'http://backend:8000/api',
  browserBaseURL: 'http://localhost/api'
  //....
}

还在 API 和前端项目的

docker-compose.yml

文件中，我设置了一个网络并且两者具有相同的名称，因此它们通过服务名称相互了解，如

http://backend:8000

:

networks:
  my_network:
    name: my_network