时间戳

首页 > 解决方案 > 按需生成静态站点

javascript - 按需生成静态站点

问题描述

嘿[服务]，这是一些 JSON。您能否将数据放入您的 Vue 模板并将生成的 HTML 站点发回给我？

我有一项服务，用户可以在其中创建表单。保存表单后，我想从中生成一个静态 HTML 页面。这个想法是将生成的 HTML 文档显示给将实际回答表单问题的不同用户集。

创建表单后，我将带有表单规范的 POST 请求发送到我正在尝试构建的静态站点生成器服务( SSGS )。JSON 有效负载如下所示：

{
  "formId": 1,
  "questions": [
    {
      "questionNo": 0,
      "type": "rating",
      "title": "How much do you like the taste of toothpaste?"
    },
    
    /* ... more questions may exist ... */
  ]
}

我们的想法是让 SSGS 从这个表单创建一个独立的静态网站，并且只创建这个表单。我打算将生成的单个站点存储在 S3 存储桶中。每种形式最终都会以个体的形式出现，与其他现有形式无关。

为什么是这种方法，而不是每个表单都有一条路线的单一服务？我将在功能有限的设备上显示这些表单。目的是让设备一次下载整个站点及其资产，然后将其显示给用户。

到目前为止我所拥有的

我正在使用 Vue 来显示表单的问题和输入。我有一个正在运行的 Nuxt.js 应用程序，它可以接受 POST 请求并将其有效负载传递给 Vue 组件，该组件可以很好地呈现每个问题。生成的 HTML 文档作为对发起它的 HTTP POST 请求的响应被发回。简而言之：

  1. 用户创建表单
  2. 表单服务发送一个带有 JSON 正文的 POST 请求，描述创建的表单
  3. SSGS 根据表单描述呈现 HTML 文档
  4. 表单服务接收所述 HTML 文档
  5. （未实现）表单服务在 S3 中存储 HTML 文档

我在这里遇到的问题是 Nuxt 创建的 HTML 文档有大量对外部文件的引用。当表单服务收到此 HTML 文档作为响应时，这些链接文件都不可访问。

<link rel="preload" href="/_nuxt/runtime.js" as="script">
<link rel="preload" href="/_nuxt/commons/app.js" as="script">
<link rel="preload" href="/_nuxt/vendors/app.js" as="script">
<link rel="preload" href="/_nuxt/app.js" as="script">
<link rel="preload" href="/_nuxt/pages/index.js" as="script">

我一直在寻找方法来告诉 Nuxt 将每个文件的内容写入<body>生成的 HTML 文档中，但到目前为止我在这方面没有运气。

但这并不是真正的静态站点生成，是吗？

老实说，我还在纠结这个概念。我正在服务器上呈现一个页面，但我将其作为对请求的响应，就像任何传统服务器在响应浏览器的 GET 请求时所做的那样。这只是服务器端渲染，对吧？由于链接文件的问题，我担心这可能还不够。

我知道 Nuxt 可以选择生成真正的静态站点。它的完成方式是（显然）：

  1. npm run generate在终端运行
  2. dist使用所有必需的 HTML 文件和资产创建一个文件夹
  3. 此文件夹将手动部署到某处

这种方法可能会给我我想要存储在 S3 中的确切内容。然而，它似乎是为了一遍又一遍地手动生成同一个站点，给我留下了很多问题：

我唯一的选择是围绕静态生成器创建某种包装服务，该服务能够运行 shell 命令来触发npm run generate、随机播放dist周围的内容并将数据移动到 S3？

是否有更好的工具可以根据需要从动态内容创建静态站点？

标签： javascripthtmlvue.jsserver-side-renderingstatic-site

解决方案

推荐阅读