kaiyuanshe / kaiyuanshe/website

[EN] 支持 PR 自动部署临时预览环境,并在 PR 评论区输出预览链接

Open
#62 0 comments 0 reactions 0 assignees View on GitHub
enhancement feature help wanted
Dominant language
TypeScript
Stars
1
Forks
3
Avg merge
3m
Merged PRs (30d)
2

Description

## 背景

目前官网仓库在协作开发时,提交 PR 后无法直接查看页面效果,Reviewer 需要本地拉取代码、安装依赖并启动项目后才能验证改动。

这样会带来几个问题:

1. Review 成本较高,尤其是非前端同学或产品/设计同学查看效果不方便;
2. 某些样式、响应式、构建产物相关问题不容易在本地快速发现;
3. 合并前缺少一个稳定、可访问的临时预览环境;
4. 不利于多人并行开发和快速迭代。

因此希望为官网仓库接入 PR 临时预览部署能力。

## 目标

当开发者提交 Pull Request 后,自动构建并部署一个临时预览环境,并在 PR 评论区输出预览链接。

预期效果如下:

1. 开发者提交 PR 后,自动触发 Preview 部署;
2. 部署成功后,在 PR 评论区展示预览地址;
3. 预览环境可以访问当前 PR 分支对应的官网页面;
4. 如果部署失败,能够在 PR 中看到失败状态或错误提示;
5. 后续可以基于预览链接进行 Review、测试、设计走查。

## 期望能力

### 1. PR 自动部署

当满足以下条件时触发部署:

- PR 被创建;
- PR 分支有新的 commit 推送;
- PR 从 draft 转为 ready for review,可选;
- 目标分支为 `main` / `master` / `develop`,可按仓库实际情况配置。

### 2. 自动生成预览链接

部署成功后,需要生成一个临时访问地址,例如:

```text
https://official-website-preview-abc123.vercel.app

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the repository's PR events and existing build or deployment entry points; the issue specifies PR creation, new commits, and optionally draft-to-ready transitions as triggers. Done means a PR-specific preview is deployed, its link appears in the PR comments, and deployment failures are visible in the PR.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
ci-cd, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.