为 django-vuejs-nginx-docker 配置 Axios

Question

我正在使用标题中描述的堆栈，目前在我的开发环境中一切正常。我曾经有 Docker 个容器用于我的后端和我的前端，用于开发的热重载。

但我目前正在使用 Nginx 准备预生产环境。它有效，我有 Nginx 服务于我构建的前端。

但是在我以前的环境中，我将 Axios 配置为直接指向请求的后端容器。因此，当我在浏览器中输入 URL 时，Nginx 会记录请求并为我的 Vue SPA 提供服务。但在那之后，是 Vue SPA 直接向后端容器发出请求，而 Nginx 什么也看不到。

我想我应该让 Axios 指向 Nginx 服务器本身（因为 Axios 在由 Nginx 容器提供服务的 Vue SPA 中使用，所以它本身），位置类似于 location /api/ 或类似的东西所以Nginx 看到所有这些请求并将它们 proxy_pass 发送到后端容器 ?

第一个问题是：

在 multi-container 配置中

Nginx服务vue构建SPA
Django 后端 API

Axios 是否应该直接指向 Nginx 以获得集中的日志记录点？而且 Nginx 将处理所有查询，而不仅仅是直接在浏览器中输入的查询 URL 栏。

第二题是：

从日志的角度来看。 Nginx 应该只知道来自浏览器的请求吗？因此，我应该按原样使用它，而是收集 gunicorn and/or Django 中 Vue SPA (axios) 发出的请求的日志记录？

提前致谢。

Answer 1

我最终在 pre-production 模式下以我的 Nginx 服务器为目标，而在开发模式下，Axios 请求直接以我的后端容器为目标。像这样，Nginx 处理所有可能的请求，并负责将请求路由到正确的 container/service/...

可以这样做：

import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: process.env.NODE_ENV === 'production'
    ? 'http://localhost/api/'
    : 'http://localhost:8001/api/',
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  }
})

export default axiosInstance

为 django-vuejs-nginx-docker 配置 Axios

Configuring Axios for django-vuejs-nginx-docker

nginx

axios