为Django和VueJS设置Docker容器
Bri*_*eer 5 django docker vue.js docker-compose
下午好，
我正在寻找有关如何集中精力的指导。我一直在这些兔子洞里下车，似乎找不到我要寻找的道路。
我已经开发了一些小型的内部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容器提供的内容？这些都是针对特定目的的低容量应用程序。
感谢您在我继续涉足新领域时的所有指导。
凯文
bri*_*fey 13
编辑2019年5月
这是使用ECS，AWS容器编排工具和CI / CD的GitLab为Django和Vue进行的设置。回购在这里。
我一直在研究一个项目，该项目演示了如何使用docker设置Django + Vue项目。这是一个名为verbose-equals-true（https://verbose-equals-true.tk）的ope源项目。该项目的源代码在这里： 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化的官方示例。您可能可以将所有内容放在同一容器中，但是我喜欢将它们分开以保持模块化和清晰。
我正在使用djangorestframework_jwt包进行JWT身份验证。我还可以使用内置的Django身份验证系统和Django admin。
我认为拥有单独的容器是有意义的。在开发中，您可以从运行的节点容器中为Vue应用程序提供服务
npm run serve，而在生产中，您可以从nginx容器中提供生产应用程序的静态文件（您可以在此部分中使用多阶段构建）。我会把所有东西都放在容器中，除了docker引擎之外，服务器上什么也没有。这将简化设置，并使您可以将应用程序移植到决定部署它的任何位置。保持分离唯一有意义的是postgres数据库。连接到托管数据库服务（如AWS RDS）通常要容易得多，但是也可以在docker主机上运行postgres容器，以简化操作。这将需要您自己进行备份，因此您需要熟悉Docker卷。
小智 6
我一直在使用 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 容器。
我希望这能为您提供一些继续进行的基本指导。
亚历杭德罗