Question

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

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

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

Answer 1

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

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

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

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

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

Answer 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，您可能需要在 BASE_URL

中配置 nuxt.config.js

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

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

自动生成 NuxtJS 静态站点

2 个答案:

托管服务

自托管

Github 操作