自动化 NuxtJS 静态站点生成答案

【问题标题】：Automate NuxtJS static site generation自动化 NuxtJS 静态站点生成
【发布时间】：2021-04-05 23:32:50
【问题描述】：

我创建了一个带有Cockpit CMS 后端的 NuxtJS 静态博客。目前，在我创建新的博客文章并将文件从 dist 文件夹上传到我的服务器后，我需要在本地 npm run generate。如何自动化这个过程？

（我要归档的内容：创建新的博客条目 -} 触发生成静态站点 -} 更新服务器上的文件）

更新：我有 SSH 访问权限并在我的服务器上安装了 NodeJS。

【问题讨论】：

标签： node.js server static nuxt.js cockpit-cms

【解决方案1】：

由于您的计算机并非始终处于运行状态，可能不会保持相同的 IP 地址并且没有反向代理来处理多个挂钩，因此最好不要在您自己的计算机上执行此操作。

如果您使用的是 Netlify 或 Vercel 或任何其他 SAAS 无服务器托管，它们会授予您可以向其发送请求的端点的访问权限，这将触发您网站的新构建：它称为“构建挂钩”或“部署挂钩” ”。

你应该在你的服务器上做的是上传你的 Nuxt 项目的源代码，并提供它需要生成的一切（节点+npm、网络访问......）到它然后在线公开的地方。然后，您需要开发自己的构建挂钩：重新生成网站的脚本和触发它的端点。

在 Cockpit 方面，它们允许您访问 Webhooks，以便在您的帐户发生任何事情时发送 HTTP 请求。

如果可以的话，您真的应该考虑迁移到 Netlify/Vercel/...，这将大大简化这一切:)。他们将对您的网站进行地理复制以使其快速加载，如果构建失败不会破坏您的网站，并确保它始终使用正确的 SSL 证书。

【讨论】：

【解决方案2】：

我了解到您希望使用 Cockpit CMS 作为数据源来维护您的博客并自动化部署过程。

您有很多选择。

托管主机

您可以使用构建和托管内容并对 WebHook 和 Git 提交挂钩做出反应的服务。
这种方法可以真正轻松快速地部署您的项目最小配置。

Vercel
Heroku
Netlify（仅限静态生成）
GitHub Pages（仅限静态生成）

自托管

假设您已经为自己的服务器配置了 SSH 访问和 Node.js，并配置了 Web 服务器。

您可以使用持续交付将项目部署到您的服务器。

一些有用的文章可能对你有所帮助；

How to Deploy on Dokku (Digital Ocean)

GitHub 有一个很棒的免费课程 DevOps with GitHub Actions，可以让您很好地了解使用 GitHub 操作和类似的持续交付系统自动部署。

Github 操作

这是一个对您有用的配置，取自我不久前完成的Code Challenge。

name: ci

on:
  push:
    branches:
      - main
      - master
  pull_request:
    branches:
      - main
      - master

jobs:
  ci:
    runs-on: ubuntu-20.04

    steps:
      - name: Checkout ?
        uses: actions/checkout@master

      - name: Setup node env ?
        uses: actions/setup-node@v2.1.4
        with:
          node-version: 14

      - name: Get yarn cache directory path ?
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Cache node_modules ?
        uses: actions/cache@v2
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - name: Install dependencies ??‍?
        run: yarn

      - name: Build ?
        run: yarn generate
        env:
          NODE_ENV: production
          BASE_URL: /<MY_REPOSITORY_NAME>
          DEV_TO_API_KEY: ${{ secrets.DEV_TO_API_KEY }}

      - name: Deploy ?
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

使用 Github Pages，您可能需要在您的 nuxt.config.js 中配置 BASE_URL

export default {
  router: {
    base: process.env.BASE_URL || '/'
  }
}

我真的希望这些资源对您的项目有所帮助。

【讨论】：