用于 Django 和 VueJS 的 Docker 容器设置

Question

下午好，

我正在寻找一些关于将精力集中在哪里的指导。我一直在这些兔子洞里下车，似乎找不到我要找的路。

我已经开发了几个小型的内部 django 应用程序，但希望将 VueJS 集成到组合中以获得更动态的前端。

我的目标是：

• 我想使用 Django-restframework 进行后端调用
• 我想在前端使用 VueJS 并回调 REST API。
• 我希望所有这些都存在于我可以使用 Jenkins 同步的 Docker 容器中。

我的问题/疑虑：

• 我一直在尝试为 VueJS 和 Django 构建单个 docker 容器，但从 Node 或 Python 开始，我似乎最终陷入了依赖地狱。谁有好的参考链接？
• 我无法决定是希望它完全解耦还是尝试保留一些 Django 模板。后者的原因是我不想丢失内置的 Django 身份验证。我不够熟练，无法编写整个身份验证部分，所以我不想失去已经完成的工作。
• 如果我完全解耦并且 django 是严格的 API，我还可以为 django 提供一个 docker 容器，为前端提供第二个 docker 容器。想法？
• 最后，这些 web 应用程序都具有相同的风险级别，并且存在于具有单独 postgres 数据库服务器的同一 web 应用程序服务器上。 nginx应该在服务器上，然后用django在docker容器中的gunicorn吗？大多数开发人员在服务器上的原生内容和 docker 容器提供的内容之间划清界限？这些都是针对特定目的的低容量应用。

感谢您在我继续冒险进入新领域时的所有指导。

凯文

Answer 1

*2020 年 12 月更新

如果您对 SSR 感兴趣，以下是我一直在研究的方法的大纲：

2020 年 12 月更新

这是另一种使用 Vue 在 DigitalOcean 上的容器中使用 docker swarm 执行 Django 的方法。它比下面显示的 AWS 方法简单得多，但没有那么可扩展：

2020 年 6 月更新

我对项目进行了一些更改，使用云开发工具包 (CDK) 和 AWS Fargate 而不是带有容器实例的 ECS，以利用无服务器基础设施。

这里是项目架构的概述：https://verbose-equals-true.gitlab.io/django-postgres-vue-gitlab-ecs/start/overview/

这是一个更新的架构图：

2019 年 5 月编辑

这是使用 ECS、AWS 容器编排工具和用于 CI/CD 的 GitLab 的 Django 和 Vue 设置。回购是here。

我一直在做一个项目，演示如何使用 docker 设置 Django + Vue 项目。这是一个名为verbose-equals-true (https://verbose-equals-true.tk) 的开源项目。该项目的源代码可在此处获得：https://gitlab.com/briancaffey/verbose-equals-true

以下是我如何构建生产项目的概述。该项目使用 docker compose 来编排用于生产和开发的不同容器。

如果您对我如何使用 Django/Vue/docker 有任何疑问，请告诉我。我在https://verbose-equals-true.tk/docs 有详细描述的文档。

以下是关于您的问题/疑虑的一些想法：

• 我从 VueJS 关于如何对 Vue 应用程序进行 docker 化的官方建议开始，以及 Docker 关于如何对 postgres + Django 应用程序进行 docker 化的官方示例。您可能可以将所有内容放在同一个容器中，但我喜欢将它们分开来保持模块化和清晰。

• 我正在使用 JWT 通过 djangorestframework_jwt 包进行身份验证。我还可以使用内置的 Django 身份验证系统和 Django admin。

• 我认为拥有单独的容器是有意义的。在开发中，您可以从运行 npm run serve 的节点容器中为 Vue 应用程序提供服务，在生产中，您可以从 nginx 容器中提供生产应用程序的静态文件（您可以为此部分使用多阶段构建）。

• 我会将所有东西都保存在容器中，服务器上除了 docker 引擎之外什么都没有。这将简化设置，并允许您将应用程序移植到您决定部署它的任何地方。唯一有意义的东西是 postgres 数据库。连接到 AWS RDS 等托管数据库服务通常要容易得多，但也可以在 docker 主机上运行 postgres 容器以使事情变得更简单。这需要您自己进行备份，因此您需要熟悉 docker 卷。

Answer 2

我一直在使用 Django/Vue，这就是我所做的：

• 创建 Django 项目
• 使用 vue-cli 将项目的文件夹初始化为新的 Vue 项目

从这里我可以启动两台开发服务器，一台用于 Django，另一台用于 Vue：

python manage.py runserver

在另一个终端：

npm run serve

为了在 Vue 中使用我的 API，我在 vue.config.js 中使用了这个配置：

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/static/'
    : '/',
  outputDir: '<PROJECT_BASE_DIR>/static',
  indexPath: '../templates/index.html',
  filenameHashing: false,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000'
      }
    }
  },
}

devServer 将请求重定向到 API，outputDir 和 indexPath 帮助将应用程序构建到项目的文件夹，<PROJECT_BASE_DIR>/templates/ 和 <PROJECT_BASE_DIR>/static/

接下来是创建一个TemplateView 并将template_name 设置为index.html（由 Vue 构建的文件），这样您就可以在 Django 视图/模板中拥有您的 SPA。

通过这种方法，您可以为 Django 使用 Docker 容器。

我希望这能给你一些基本的指导以继续。

亚历杭德罗

Answer 3

#docker-compose.yml
version: "3.9"

services:
db:
image: postgres
environment:
   - POSTGRES_NAME=postgres
   - POSTGRES_USER=postgres
   - POSTGRES_PASSWORD=postgres
server:
 build: server/
 command: python manage.py runserver 0.0.0.0:8000
 ports:
   - "8000:8000"
environment:
   - POSTGRES_NAME=postgres
   - POSTGRES_USER=postgres
   - POSTGRES_PASSWORD=postgres
 depends_on:
   - db
client:
  build: client/
  command: npm run serve
  ports:
    - '8081:8080'
  depends_on:
    - server

#server django Dockerfile
# pull the official base image
FROM python:3

# set work directory
WORKDIR /usr/src/app

# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
ENV DJANGO_SUPERUSER_PASSWORD="admin"

# install dependencies
RUN pip install --upgrade pip
COPY ./requirements.txt /usr/src/app
RUN pip install -r requirements.txt

# copy project
COPY . /usr/src/app

EXPOSE 8000


CMD ["python", "manage.py", "runserver"]

#client vue Dockerfile
FROM node:14.17.5 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build
EXPOSE 8080
CMD [ "npm", "run", "serve" ]

它正在工作