Heroku：部署 Django Rest 框架 + Vue答案

【问题标题】：Heroku: Deploying Django Rest Framework + VueHeroku：部署 Django Rest 框架 + Vue
【发布时间】：2019-03-04 18:47:28
【问题描述】：

我有一个使用 Django（仅 DRF API）和 Vue js 制作的项目。我有这个项目结构：

root_directory/
├── project_name/
│   ├── settings.py
│   ├── ...
├── front_end/
│   ├── ... vue files generated with CLI 3 ...
└── api/
    └── ... api app files ...

我想使用 heroku 部署这个项目，我最大的问题是：我不知道如何提供静态文件（vue 应用程序文件）。

在 heroku 文档中指定我应该使用 django staticfiles serving 和 whitenoise 包（除了在 S3 中托管它们）。

但是还有另一个问题：vue-cli 为我提供了一个index.html 文件，当我运行npm run build 时，所有东西都会被注入，所以我无法直接访问index.html 中的{% static 'example.js' %}，因为它不是我应该使用的index.html，当然是dist/ 文件夹中的那个。但是那里的一切都被缩小了，太复杂了，我无法处理。我认为如果npm run build 在public/index.html 中看到类似{% %} 的内容，它会抛出错误。

我不知道如何使用 heroku 部署这个项目。在这种情况下部署它的最佳做法是什么？

提前致谢。

【问题讨论】：

前后端完全分离不是很有意义吗？在一个应用程序中使用 Django 通过 REST API 提供数据（例如 JSON），并在另一个应用程序中使用 Vue 使用数据。
你的意思是我应该对静态文件（Vue 文件）使用 CDN 并为后端配置 CORS 就可以了吗？
有点，只是托管两个不同的应用程序。正如您提到的 Heroku：创建两个 Heroku 项目，一个用于 Django 应用程序，一个用于 Vue 应用程序。例如，必须通过 server.js 文件配置 Vue。有很多关于如何“将 Django 应用部署到 Heroku”和“将 Vue 应用部署到 Heroku”的教程。
哦，这可能是一个可行的解决方案。我从未想过将 Vue 应用程序单独部署到不同的服务器中。您可以发布解决方案。谢谢

标签： django heroku vue.js vuejs2 web-deployment

【解决方案1】：

除了混合两个应用程序之外，您还可以将 Django 应用程序和 Vue 应用程序分开托管。

使用 Django 连接数据库并通过 REST API（后端）提供数据（例如 JSON）。

使用您的 Vue 应用程序（前端）来自 REST 端点的数据。

以下是一些起点（正如您提到的 Heroku）：

部署 Django：

https://devcenter.heroku.com/articles/deploying-python

部署 Vue：

https://medium.com/netscape/deploying-a-vue-js-2-x-app-to-heroku-in-5-steps-tutorial-a69845ace489

一些不错的库来使用 Vue 使用来自 REST API 的数据：

https://github.com/axios/axios

【讨论】：

【解决方案2】：

您检查了吗 - 时间戳应用程序 (https://github.com/overshard/timestrap)。他们确实有基于 Heroku 的演示实例：https://timestrap.herokuapp.com/

这个应用程序是基于 Vuejs 和 Django 的——它会给出如何去做的好主意。

享受

【讨论】：

【解决方案3】：

将其添加到 settings.py 中的中间件

'whitenoise.middleware.WhiteNoiseMiddleware',

确保在settings.py 中的STATIC_URL 之后添加此STATICFILES_DIRS 和STATICFILES_STORAGE

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

注意：确保你安装了这个：pip install django-heroku

【讨论】：

这不是问题，我知道如何为django配置静态文件。我不知道如何为这个特定项目提供服务，将 Vue 文件放在一个单独的文件夹中。

【解决方案4】：

您应该能够使用 WhiteNoise 4.0 及更高版本以及一些设置来处理此问题。例如：

# Enable this so that WhiteNoise will serve `index.html` files at the directory root
WHITENOISE_INDEX_FILE = True

# Set this to wherever npm puts your final files
WHITENOISE_ROOT = os.path.join(BASE_DIR, 'dist')

【讨论】：

问题不在于服务index.html，因为这是使用 django 视图完成的。问题是我不知道如何在index.html 中获取js/css 文件，因为我无法访问public/index.html 中的{% static 'path/to/js/and/css/files' %}，也没有注入js/css 文件。我想我唯一能做的就是手动修改dist/index.html 并在需要的地方添加静态标签。