Pages

Friday, 1 November 2024

评论系统artalk的部署

 该指南将帮助你在服务器上部署 Artalk。之后,你可以将 Artalk 客户端集成到你的网站或博客中,让用户能够在你的网站上畅所欲言。

  1. 集成客户端

    在网页中引入 Artalk 程序内嵌的的前端 JS 和 CSS 资源并初始化 Artalk:

    html
    <!-- CSS -->
    <link href="http://artalk.example.com:8080/dist/Artalk.css" rel="stylesheet" />
    
    <!-- JS -->
    <script src="http://artalk.example.com:8080/dist/Artalk.js"></script>
    
    <!-- Artalk -->
    <div id="Comments"></div>
    <script>
    Artalk.init({
      el:        '#Comments',                       // 绑定元素的 Selector
      pageKey:   '/post/1',                         // 固定链接
      pageTitle: '关于引入 Artalk 的这档子事',         // 页面标题 (留空自动获取)
      server:    'http://artalk.example.com:8080',  // 后端地址
      site:      'Artalk 的博客',                    // 你的站点名
    })
    </script>

    评论框输入管理员用户名和邮箱,「控制台」按钮将出现在评论框右下角。

    在控制台,你可以根据喜好配置评论系统将评论迁移到 Artalk

    你已成功完成 Artalk 部署!

    二进制文件

  2. GitHub Release 下载程序压缩包

  3. 解压 tar -zxvf artalk_版本号_系统_架构.tar.gz

  4. 运行 ./artalk server

  5. 在你的网页中配置和初始化 Artalk 客户端:

  6. js
    Artalk.init({ server: 'http://artalk.example.com:23366' })

     

    如果你已经安装了 Golang 工具链,可以运行以下命令来编译和安装最新版本的 Artalk:


    go install github.com/artalkjs/artalk/v2@latest

    然后运行服务器:


    artalk server

    客户端集成步骤详见此处

    from https://artalk.js.org/zh/guide/deploy.html

------------------------------------------------------------------------------------------

自己编译artalk

克隆仓库

克隆仓库:

git clone https://github.com/ArtalkJS/Artalk.git

建议你先 fork 仓库,然后克隆 fork 后的仓库。

导航到目录:

cd Artalk

开发环境

为了开发 Artalk 的前端和后端,请安装以下工具:

开发工作流程概述

开发工作流程包括以下步骤:

  1. 搭建完整的开发实例

    • 导航到 Artalk 仓库目录。
    • 执行 make dev 在端口 23366 上运行后端。
    • 执行 pnpm dev 在端口 5173 上运行前端。
    • 可选地,执行 pnpm dev:sidebar 在端口 23367 上运行侧边栏前端。
  2. 访问前端进行开发

    • 打开浏览器,访问 http://localhost:5173 进行开发和测试。
  3. 测试

    • 使用 make test 运行后端单元测试。
    • 使用 pnpm test 运行 UI 单元测试。
    • 使用 make test-frontend-e2e 运行 UI 端到端测试。
  4. 构建前端代码

    • 当你对前端代码进行更改后,使用 pnpm build:all 构建完整的前端程序。
    • JavaScript 和 CSS 代码将在 ui/artalk/dist 目录中找到。
    • 前端代码由 GitHub Actions 自动部署到 NPM。
  5. 构建后端代码

    • 当你对后端代码进行更改后,注意后端程序会嵌入前端代码。
    • 在构建后端之前,运行 make build-frontend(它运行 scripts/build-frontend.sh)。这将把嵌入的前端主程序和侧边栏前端程序放入 /public 目录。
    • 然后,使用 make build 构建后端程序。

更多探索:

  • 开发 Artalk 插件或主题: 请参考 Artalk 插件开发指南

  • Makefile: 你可以探索 Makefile 中的过程和命令。

  • GitHub 上的自动化 CI: GitHub 上的自动化 CI 流水线位于 .github/workflows 目录中,负责构建前端、后端和 Docker 镜像,发布 Docker 镜像到 Docker Hub,处理 npm 包发布,并创建 GitHub Releases,同时测试前端和后端。

以下部分提供了更详细的开发工作流程信息。

项目结构

Artalk 是一个 monorepo 项目,这意味着所有源代码都在一个仓库中。尽管如此,前端和后端保持分离。前端部分位于 ./ui 目录中。

目录概览

  • bin/:编译的二进制文件。(此目录被 git 忽略)
  • cmd/:命令行工具的源代码。
  • conf/:示例配置文件。
  • data/:本地数据。(此目录被 git 忽略)
  • docs/:文档站点的源代码。
  • i18n/:翻译文件。
  • local/:本地文件。(此目录被 git 忽略)
  • internal/:内部包的 Go 源代码。
  • public/:静态文件。构建的前端文件将被复制到这里。
  • scripts/:开发和构建的脚本。
  • server/:后端的 Go 源代码。
  • ui/:前端的 UI 源代码。
  • .github/:GitHub Actions 工作流。
  • .vscode/:VSCode 设置。

后端开发

运行后端

  1. 创建配置文件

    • ./conf/artalk.example.yml 复制到根目录。
    • 重命名为 artalk.yml
    • 根据需要修改文件。
  2. 启动后端程序

    • 运行 make dev 启动后端,端口为 23366
    • 通过 http://localhost:23366 访问。
    • 建议保留默认端口进行测试。
    • (替代)使用 ARGS="version" make dev 传递启动参数(默认是 ARGS="server")。

make dev 命令会带有调试符号构建后端,这方便使用 GDB 进行调试。

如果你使用 VSCode,可以使用 F5 键(或运行按钮)直接启动调试后端程序。

构建后端

  1. 获取最新的 Git 标签: 执行 git fetch --tags 获取最新的 Git 标签信息。此标签将用作后端应用程序的版本号。或者,通过环境变量指定:VERSION="v1.0.0"COMMIT_HASH="66128e"

  2. 构建前端: 运行 make build-frontend 构建前端,因为后端应用程序会嵌入前端代码。

  3. 构建后端: 执行 make build 构建后端程序。

构建的二进制文件将位于 ./bin 目录中。

前端开发(UI)

运行前端

  1. 安装依赖: 运行 pnpm install 安装所有必要的依赖。

  2. 启动开发服务器: 执行 pnpm dev --port 5173 启动前端开发服务器。

  3. 访问前端: 前端应用程序默认将在端口 5173 上运行。在浏览器中访问 http://localhost:5173

  4. 侧边栏开发: 要运行侧边栏部分的前端,请使用 pnpm dev:sidebar

端口 517323367 用于前端开发和测试。这些端口被包括在后端程序的 ATK_TRUSTED_DOMAINS 配置中。

构建前端

要构建前端,请运行以下命令:

make build-frontend

编译的 JavaScript 和 CSS 文件将位于 /public 目录中,嵌入到后端程序中。

更多详细信息,请参考 scripts/build-frontend.sh 脚本。

发布前端

核心的 Artalk 客户端代码通过 GitHub Actions 自动部署到 NPM。部署过程在 .github/workflows/build-ui.yml 文件中定义。

如果你在 monorepo 中编写 Artalk 插件,它不会被自动部署。你需要手动发布插件。要发布插件,请首先确保在 package.json 文件中更新版本号。然后,运行以下命令:

pnpm publish --access public

检查已发布版本

pnpm check:publish 脚本旨在验证项目中的所有包是否在 npm 上发布了最新版本。它会自动跳过私有包,并允许使用 -F 选项进行筛选以检查特定包。

检查所有包:

pnpm check:publish

这将启动检查存储库中所有公共包的过程,以确保它们在 npm 上是最新的。

开发和调试 @artalk/plugin-kiteslint-plugin-artalk

这个 monorepo 默认会从 NPM 安装最新版本的 @artalk/plugin-kiteslint-plugin-artalk 发布包。要开发和调试这些包,请在仓库的根目录下运行以下命令:

pnpm link --global --dir ui/eslint-plugin-artalk
pnpm link --global --dir ui/plugin-kit

pnpm link eslint-plugin-artalk
pnpm link @artalk/plugin-kit

执行这些命令后,eslint-plugin-artalk@artalk/plugin-kit 包将链接到本地开发环境中的 monorepo 工作空间。你可以在 ui/eslint-plugin-artalkui/plugin-kit 目录中修改源代码,这些更改会自动反映在 monorepo 工作空间中。如果你希望取消链接这些包,请运行以下命令:

pnpm unlink eslint-plugin-artalk
pnpm unlink @artalk/plugin-kit

pnpm uninstall --global eslint-plugin-artalk
pnpm uninstall --global @artalk/plugin-kit

更多详情请参考 pnpm link 文档

 

测试

测试后端

要测试后端 Go 程序,可以使用以下命令:

  • 单元测试: 运行 make test 执行单元测试。结果将输出在终端。

  • 测试覆盖率: 运行 make test-coverage 检查代码测试覆盖率。

  • HTML 覆盖率报告: 运行 make test-coverage-html 生成并浏览 HTML 格式的测试覆盖率报告。

  • 运行特定测试: 要运行特定测试,请使用带有环境变量的命令:

  • TEST_PATHS="./server/..." make test

测试前端

前端测试包括单元测试和端到端(E2E)测试。

  • 单元测试: 前端的单元测试使用 Vitest 进行。运行 pnpm test 开始单元测试。

  • 端到端测试: E2E 测试使用 Playwright 进行。要启动 E2E 测试,运行:

  • make test-frontend-e2e

持续集成测试

前端和后端的测试都是自动化的,并将在 Git pull 请求和构建过程中使用 CircleCI 或 GitHub Actions 执行。

配置

模板配置文件位于 /conf 目录中,模板以多种语言注释,命名格式为 artalk.example.[lang].yml(例如,artalk.example.zh-CN.yml)。Artalk 将解析这些模板配置文件以生成设置界面、环境变量名称和文档。为了提高性能,程序运行期间将缓存部分数据以消除解析时间。

internal/config/config.go 文件中,有一个名为 Config 的结构体定义,该结构体用于将 yml 文件解析为 Go 结构体。该结构体包含更精确的类型定义。如果需要添加、修改或删除配置项,必须同时修改 /conf 目录中的配置文件模板和 Config 结构体。

当你修改配置文件后,请运行以下命令以更新配置数据缓存:

make update-conf

要更新环境变量文档,可以运行以下命令:

make update-conf-docs

文档

文档由三个部分组成,每个部分与特定包相关:指南文档着陆页Swagger API 文档。下面是每个包的相关命令及其输出的总结。

指南文档 (docs)

  • 目录docs/docs/guide
  • 开发命令pnpm -F docs dev:docs
  • 构建命令pnpm -F docs build:docs
  • 输出目录docs/docs/.vitepress/dist

着陆页 (docs-landing)

  • 目录docs/landing
  • 开发命令pnpm -F docs-landing dev:landing
  • 构建命令pnpm -F docs-landing build:landing
  • 输出目录docs/landing/dist

Swagger API 文档 (docs-swagger)

  • 目录docs/swagger
  • 构建命令make update-swagger
  • 输出目录docs/swagger

Swagger 定义位于后端代码的 /server 目录中。修改 Swagger 定义后,运行构建命令将更新 Swagger 文档并在 /ui/artalk/src/api/v2.ts 生成 HTTP 客户端代码。

综合构建

  • 构建所有包的命令pnpm build:docs
  • 综合输出目录docs/docs/.vitepress/dist

此命令构建并组合所有三个包到单个目录中,准备发布。

环境变量文档

  • 文件docs/docs/guide/env.md
  • 更新命令make update-conf-docs

此命令读取位于 /conf 的配置模板文件以更新环境变量文档。在修改配置模板文件后运行此命令。

翻译 (i18n)

如果你编写了新功能或进行了修复/重构,请使用以下命令通过解析源代码中的 i18n.T 函数调用来增量生成翻译文件:

sh
make update-i18n

如果你不是程序员,但希望帮助改进翻译,可以直接编辑 /i18n 目录中的翻译文件,然后提交 pull 请求。

结尾

感谢你耐心阅读本指南,并感谢你对 Artalk 的兴趣和支持。我们深知,一个开源项目的成功依赖于每一位开发者的贡献。无论是通过代码、文档、测试还是反馈,你的参与是推动项目持续进步的动力。我们诚挚邀请你加入我们,共同改进和增强 Artalk。

通过合作,我们可以创建一个更加健壮和多功能的平台,造福整个社区。你的独特见解和专业知识是无价的,只有共同努力,我们才能实现显著的进步。无论你是经验丰富的开发者,还是刚刚起步的新手,我们的项目中总有你可以贡献的一席之地。

如果你有任何问题或需要帮助,请随时在我们的 GitHub 页面上的 issue 部分提问:https://github.com/ArtalkJS/Artalk/issues。再次感谢你的支持,我们期待与你合作。

 from https://artalk.js.org/zh/develop/contributing.html

No comments:

Post a Comment