在 GCP App Engine 上部署 Django、Django REST Framework 后端和 VueJS + webpack 前端（标准）

Posted 2023-02-22

【中文标题】在 GCP App Engine 上部署 Django、Django REST Framework 后端和 VueJS + webpack 前端（标准）

【英文标题】：Deploying Django, Django REST Framework backend & VueJS + webpack frontend on GCP App Engine (standard)

【发布时间】：2021-04-11 11:06:17

【问题描述】：

我有以下设置：

Django==3.1.4 djangorestframework==3.12.2 django-webpack-loader==0.7.0 （我不相信使用它 - 但这是另一个故事 - 只是为了好玩而学习）

在本地开发设置上一切正常。 Webpack-loader 查找并部署 VueJS 应用程序。 但是当部署到 GAE 时会抛出以下错误：

读取 /workspace/frontend/webpack-stats.json 时出错。你确定webpack已经生成了文件并且路径正确吗？

它来自：

/layers/google.python.pip/pip/lib/python3.9/site-packages/webpack_loader/loader.py，第 28 行，在 load_assets 中

我阅读了大量的教程。在本地开发上运行时一切都很清楚 - 同时启动 django 和 VueJS。 当然，问题是 webpack-stats.json 没有创建，因为 VueJS 服务器没有启动。我试图为此找到合适的解决方案，但失败了。

我也尝试过仅在具有静态的域上使用 VueJS - 但也失败了。

让基本的 VueJS 应用程序与 REST CRUDS 对话并在 GAE 上运行它的最佳解决方案是什么？

我的 vue.config.js（来自教程之一）：

const BundleTracker = require("webpack-bundle-tracker");

module.exports = 
    publicPath: "http://0.0.0.0:8080/",
    outputDir: "./dist/",
    chainWebpack: (config) => 
        config
            .plugin("BundleTracker")
            .use(BundleTracker, [filename: "./webpack-stats.json"]);

        config.output.filename("bundle.js");

        config.optimization.splitChunks(false);

        config.resolve.alias.set("__STATIC__", "static");

        config.devServer
             // the first 3 lines of the following code have been added to the configuration
            .public("http://127.0.0.1:8080")
            .host("127.0.0.1")
            .port(8080)
            .hotOnly(true)
            .watchOptions(poll: 1000)
            .https(false)
            .disableHostCheck(true)
            .headers("Access-Control-Allow-Origin": ["*"]);
    ,

    // uncomment before executing 'npm run build'
    // css: 
    //     extract: 
    //       filename: 'bundle.css',
    //       chunkFilename: 'bundle.css',
    //     ,
    // 

本地版本： npm --版本：7.3.0 vue --version: @vue/cli 4.5.9

【问题讨论】：

你能展示你的 vue.config.js 吗？

我已经用 vue.config.js 更新了问题。

我有 webpack-bundle-tracker@0.4.3 版本。

你的本地主机的公共路径，你必须有这样的公共路径： publicPath: "example.com/dist" 见，cli.vuejs.org/config/#publicpath

它没有帮助。我知道这需要改变，但这是 VueJS 将谈论的路径。问题是 webpack-loader 在文件 webpack-stats.json 中找不到信息但是我会在没有 webpack-loader 的情况下尝试一下。

【参考方案1】：

我设法通过以下方式解决它：

按照@lhar 的建议将publicPath 更改为：publicPath: "/static/"（我的django conf 有STATIC_URL = '/static/'） 删除 django-webpack-loader 禁用生成文件的散列：filenameHashing: false（现在不需要这样做） 从引用静态资源的模板启动 VueJS 应用

我的 Cloud Build 也必须进行调整，但最终它可以工作了。

我发现这篇非常有趣的文章：Using webpack with Django 并会按照建议使用选项一，稍后将解决文件名散列问题。

【讨论】：

您可以查看django-manifest-loader。我构建它来替换django-webpack-loader。它具有更简单的配置，并允许您轻松实现缓存清除。 documentation --- github