Docker编写SSR应用程序、服务器请求和浏览器请求

Docker编写SSR应用程序、服务器请求和浏览器请求,docker,docker-compose,axios,nuxt.js,server-side-rendering,Docker,Docker Compose,Axios,Nuxt.js,Server Side Rendering,我正在执行以下部署(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

我正在执行以下部署(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
// 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调用后端API的nuxtServerInit函数

NuxtServerInit

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
// 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函数的调用必须在外部网络中完成。以上我的意思是:

numxt.config.js

Internal: axios: { baseURL: 'http://backend:8000' } //backend = resource name in docker-compose
External: axios: { baseURL: 'http://localhost:8000' }
我可以验证这一点,因为如果我离开内部配置,它会从nuxtServerInit函数成功调用,但当我从浏览器调用时,它不会。否则,如果我离开外部配置(并注释nuxtServerInit函数),它将从浏览器正常工作

我如何在docker compose中处理这两个场景