Claude Code Skill

前端项目
一键部署,即刻预览

告诉 Claude「部署一下」,自动完成构建、上传、Nginx 配置、SSL 证书签发 —— 几秒后拿到一个可公开访问的 HTTPS 地址。

Terminal
# 对 Claude 说:
> 部署一下这个项目
# 自动执行:
$ pnpm build
$ scp -r dist/* root@server
$ nginx reload + SSL
✅ 部署成功!
https://my-app.preview.example.com

为什么选择 Presentation Skill

专注前端预览场景,将繁琐的部署流程压缩成一条自然语言指令。

一键触发

只需对 Claude 说「部署一下」或输入 /presentation,自动完成全部流程,无需记忆复杂命令。

自动 HTTPS

集成 acme.sh 自动签发和续期 SSL 证书,每次部署自动获取 HTTPS,零配置安全访问。

智能构建检测

自动识别 npm、pnpm、yarn 包管理器,读取 package.json 构建脚本,适配各种前端项目。

Nginx 自动配置

自动生成虚拟主机配置、重载 Nginx,支持 SPA 路由回退,无需手动编辑服务器配置。

部署历史追踪

自动维护 DEPLOYMENTS.md 记录每次部署的项目、URL、时间和状态,历史一目了然。

通配符域名

一次配置通配符 DNS 解析,每个项目自动生成独立子域名预览地址,互不冲突。

五步完成部署

从说出「部署一下」到拿到 HTTPS URL,全自动串联。

1

读取配置

加载服务器 IP、域名、路径等配置信息

2

本地构建

自动检测包管理器并执行 build 命令

3

上传文件

SCP 将构建产物上传到服务器站点目录

4

配置 Nginx + SSL

生成 vhost 配置,签发 HTTPS 证书并重载

5

返回 URL

输出可公开访问的 HTTPS 预览地址

开始之前,你需要准备

只需一次配置,之后每次部署都是一键完成。以下是使用前需要准备的环境和资源。

1

一台 Linux 服务器

需要一台安装了 Nginx 的 Linux 服务器(如 Ubuntu/CentOS),并确保 nginx 命令可用。服务器需要开放 80443 端口用于 HTTP/HTTPS 访问。

2

通配符域名解析

拥有一个域名,并在 DNS 服务商处添加 *.your-domain.comA 记录,指向你的服务器 IP。例如 *.preview.example.com → 1.2.3.4。这样每个项目都能自动获得独立子域名。

3

SSH 访问权限

本机需要能通过 sshscp 命令连接到服务器。支持密钥认证或密码认证,确保有 root 或具备 sudo 权限的用户。

4

acme.sh 证书工具

服务器上需要安装 acme.sh 用于自动签发和续期 SSL 证书。如果未安装,/presentation init 会提示你安装。运行 curl https://get.acme.sh | sh 即可安装。

5

Claude Code

已安装并配置好 Claude Code CLI 工具。Presentation Skill 以 Claude Code Skill 的形式运行,支持命令触发和自然语言触发。

6

前端 SPA 项目

需要部署的项目应为静态 SPA 应用(如 Vite、React、Vue 构建后的产物),项目根目录包含 package.json 且有 build 脚本。不支持 SSR 应用(Next.js/Nuxt.js 服务端渲染模式)。

提示:域名解析生效通常需要几分钟到数小时。配置完成后可使用 dig *.your-domain.com 验证 DNS 是否生效。如果你只需要部署单个项目到固定域名,也可以不使用通配符,直接将具体域名 A 记录指向服务器即可。

三步即可使用

安装 skill、初始化服务器、部署项目,就这么简单。

Terminal
# 1. 安装 skill 到 Claude Code $ cp -r presentation/ ~/.claude/skills/ # 2. 初始化预览服务器 $ /presentation init ✓ 检测 Nginx... /usr/sbin/nginx ✓ 检测 acme.sh... 已就绪 ✓ 初始化完成 # 3. 部署你的项目 $ /presentation ✓ 检测 pnpm → 执行 build ✓ 上传 dist/ → 服务器 ✓ Nginx 配置 + SSL ✅ https://my-app.preview.example.com
01

安装 Skill

将 presentation skill 复制到 ~/.claude/skills/ 目录,Claude Code 自动识别。支持 /presentation 命令和自然语言触发。

02

初始化服务器

执行 /presentation init,自动检测服务器上的 Nginx 路径、acme.sh 安装情况,创建目录结构并生成配置文件。

03

一键部署

在前端项目目录中执行 /presentation 或告诉 Claude「部署一下」,自动构建、上传、配置并返回 HTTPS URL。

04

自然语言触发

不说命令也可以。直接对 Claude 说「部署一下这个项目」「发布预览」「deploy」—— 同样生效。

本地编排 + 服务端执行

Skill 在本地协调构建流程,通过 SCP/SSH 与服务器交互完成部署。

本地 (Claude Code)

  • SKILL.md — 流程编排
  • config.md — 服务器配置
  • DEPLOYMENTS.md — 部署记录
  • 自动检测包管理器
  • 执行 build 构建项目
  • SCP 上传构建产物
SCP / SSH

预览服务器

  • deploy-preview.sh — 部署脚本
  • Nginx — 虚拟主机配置
  • acme.sh — SSL 证书签发
  • /var/www/previews — 站点目录
  • 自动 HTTP → HTTPS 升级
  • 幂等部署,覆盖即更新