第 47 期 | 分享预览与角色分工验证
Live preview 无感托管：让 QA 与 PM 不装任何环境即可点开 URL 审查原型。
🎯 学习目标
- 掌握利用自动化工具，如 Docker 和 Nginx，快速部署前端原型预览环境的方法。
- 理解并实践基于 HTTP Basic Authentication 的 URL 访问控制策略，确保预览内容安全。
- 学会配置简易的 CI/CD 流程（例如 GitHub Actions），实现代码提交到预览部署的自动化。
- 了解如何利用 AI 助手（如 Claude）优化预览环境的配置、部署与安全验证流程。
📖 核心概念讲解
47.1 无感托管与预览环境的价值
在现代敏捷开发流程中，快速迭代和高效反馈是成功的关键。前端原型或新功能开发完成后，如何让项目经理（PM）、质量保证（QA）工程师以及其他非技术干系人无需安装任何本地环境，即可直接通过一个 URL 进行审查和测试，是提升协作效率的重要一环。这就是“无感托管”和“预览环境”的核心价值。
什么是无感托管？ 无感托管指的是将应用程序（通常是前端静态页面或轻量级后端服务）部署到一个公共可访问的服务器上，并通过一个唯一的 URL 提供访问。对于审查者而言，他们只需点击链接，即可在浏览器中直接查看和交互，无需关心背后的技术栈、部署细节，更不需要安装 Node.js、Docker 或任何开发工具。
预览环境的重要性：
- 加速反馈循环： PM 和 QA 可以即时看到最新的开发成果，提供早期反馈，避免在后期发现重大问题。
- 降低沟通成本： 避免了截图、录屏等低效的沟通方式，直接在真实环境中演示。
- 提高产品质量： 允许在合并到主分支之前，对特定功能或修复进行独立、全面的测试。
- 支持并行开发： 每个功能分支或 Pull Request 都可以拥有独立的预览环境，互不干扰。
本期我们将聚焦于如何利用 Docker 和 Nginx 构建一个轻量级、安全的预览环境，并辅以 CI/CD 自动化，让整个流程“无感”且高效。
47.2 基于 URL 的角色分工验证
当我们将原型部署到公共 URL 后，安全性就成了首要考虑的问题。我们不希望任何人都能访问到尚未发布或敏感的原型。此时，基于 URL 的角色分工验证就显得尤为重要。对于内部预览，HTTP Basic Authentication（基本认证）是一种简单而有效的解决方案。
HTTP Basic Authentication 工作原理：
当浏览器请求受基本认证保护的资源时，服务器会返回一个 401 Unauthorized 响应，并在响应头中包含 WWW-Authenticate: Basic realm="..."。浏览器收到此响应后，会弹出一个认证对话框，要求用户输入用户名和密码。用户输入后，浏览器会将用户名和密码用 Base64 编码，并以 Authorization: Basic <encoded_credentials> 的形式发送给服务器。服务器验证凭据后，如果正确，则返回资源；否则，继续返回 401 Unauthorized。
为什么选择 Basic Auth 进行角色分工验证？
- 简单易用： 配置相对简单，无需复杂的身份认证系统。
- 广泛支持： 几乎所有浏览器和 HTTP 客户端都原生支持。
- 足够内部使用： 对于非公开的内部原型审查，其安全性通常足够。
我们可以为 QA 和 PM 创建独立的 Basic Auth 凭据，或者共享一套凭据，让他们能够通过这个简单的“门槛”来访问预览链接。
+------------------+ HTTP GET /prototype
| QA/PM Browser | <------------------------+
| (No Env Needed) | |
+--------+---------+ |
| (1) Request Preview URL |
| |
| (2) Server Responds 401 |
| + WWW-Authenticate: Basic |
| |
| (3) Browser Prompts for Credentials|
| |
| (4) User Enters User/Pass |
| (e.g., qa/review123) |
| |
| (5) Browser Sends Authorization Header |
| (Base64 encoded) |
| |
+--------v---------+ |
| Nginx Server | ------------------------>+
| (with Basic Auth)|
| + .htpasswd file |
+------------------+
| (6) Nginx Verifies Credentials
| against .htpasswd
|
| (7) If Valid, Serve Prototype Files
|
| (8) Prototype Rendered in Browser
v
图 47.1: Basic Authentication 流程示意图
47.3 自动化与 AI 赋能：Claude 的角色
在上述流程中，从 Dockerfile 的编写、Nginx 配置的生成、.htpasswd 文件的创建，再到 CI/CD 自动化脚本的撰写，每一步都需要一定的技术知识。AI 助手，特别是像 Claude 这样的代码生成和理解专家，可以在这个过程中扮演一个强大的“副驾驶”角色。
Claude 如何赋能？
- 方案建议与代码生成： 当你描述需求时（例如“我需要一个前端预览环境，带认证”），Claude 可以快速给出合适的方案（如 Docker + Nginx），并直接生成对应的
Dockerfile和nginx.conf配置。 - 命令辅助： 对于
htpasswd这样的命令行工具，Claude 可以提供详细的使用说明和示例，甚至帮你生成具体的命令。 - CI/CD 脚本编写： 自动化部署是关键，但 CI/CD 平台（如 GitHub Actions）的 YAML 配置通常比较繁琐。Claude 可以根据你的部署目标（例如“推送到某个分支后，自动构建 Docker 镜像并 SSH 部署到服务器”），生成完整的 CI/CD 脚本。
- 问题排查与优化： 在部署或认证过程中遇到问题时，你可以向 Claude 描述错误信息，它能帮助你分析原因并提供解决方案。
通过 Claude 的协助，即使是对部署和运维不那么熟悉的开发者，也能高效地搭建起专业的预览与验证流程。
💻 模拟 Claude TUI 交互
以下模拟了与 Claude 在终端中的一系列交互，演示它如何协助我们完成预览环境的搭建与自动化。
> 你好 Claude，我正在开发一个前端应用，想为它设置一个预览环境，能够让 QA 和 PM 通过 URL 访问，而且他们不需要安装任何东西。我希望这个预览环境能有简单的密码保护。你能帮我吗？
╭─ Claude ──────────────────────────────────────────────────────────╮
│ 当然可以！这是一个非常常见的需求。我们可以使用 Docker 容器化你的前端应用， │
│ 并用 Nginx 作为 Web 服务器，同时配置 HTTP Basic Authentication 来实现 │
│ 密码保护。整个过程可以被自动化，让 QA 和 PM 只需要一个链接和一套凭据。 │
│ │
│ 我们一步步来： │
│ 1. **容器化前端应用：** 生成一个 Dockerfile。 │
│ 2. **Nginx 配置 Basic Auth：** 生成带密码保护的 Nginx 配置。 │
│ 3. **生成密码文件：** 指导你如何创建 .htpasswd 文件。 │
│ 4. **自动化部署：** 帮你编写一个 GitHub Actions 工作流。 │
│ │
│ 首先，请问你的前端应用构建后会生成静态文件在哪个目录？通常是 `dist` 或 `build`。│
╰───────────────────────────────────────────────────────────────────╯
> 我的前端构建输出目录是 `dist`。请先帮我生成一个 Dockerfile 吧。
╭─ Claude ──────────────────────────────────────────────────────────╮
│ 好的，这是一个用于将你的前端静态文件打包进 Nginx 容器的 Dockerfile。 │
│ 假设你的前端项目根目录下的 `dist` 文件夹包含了所有构建后的静态资源。 │
│ │
│ ```dockerfile │
│ # 使用 Nginx 官方的稳定版 Alpine Linux 镜像，体积小巧高效。 │
│ FROM nginx:stable-alpine │
│ │
│ # 将构建好的前端静态文件从本地的 `./dist` 目录复制到 Nginx 的默认静态文件服务目录。│
│ COPY ./dist /usr/share/nginx/html │
│ │
│ # 暴露 80 端口，这是 Nginx 默认监听的 HTTP 端口。 │
│ EXPOSE 80 │
│ │
│ # 容器启动时运行 Nginx，并且以后台模式运行。 │
│ CMD ["nginx", "-g", "daemon off;"] │
│ ``` │
│ │
│ 你可以将上述内容保存为项目根目录下的 `Dockerfile` 文件。 │
│ 接下来，我们需要为 Nginx 配置 Basic Auth。你需要一个用户名和密码。 │
│ 你希望使用什么用户名和密码？例如：`qa_reviewer` 和 `secure_pass`。 │
╰───────────────────────────────────────────────────────────────────╯
> 用户名用 `qa`，密码用 `review123` 吧。请帮我生成 Nginx 配置，并且告诉我如何生成密码文件。
╭─ Claude ──────────────────────────────────────────────────────────╮
│ 没问题。下面是 Nginx 的配置片段，你需要将其保存为一个 `.conf` 文件， │
│ 例如 `nginx.conf`。这个配置会启用 Basic Auth，并指定密码文件路径。 │
│ │
│ ```nginx │
│ server { │
│ listen 80; # 监听 80 端口 │
│ server_name your-preview-domain.com; # 替换为你的预览域名或 IP 地址 │
│ │
│ location / { │
│ root /usr/share/nginx/html; # Nginx 提供静态文件的根目录 │
│ index index.html index.htm; # 默认索引文件 │
│ auth_basic "Restricted Prototype Access"; # 认证对话框提示信息 │
│ auth_basic_user_file /etc/nginx/.htpasswd; # 密码文件路径 │
│ try_files $uri $uri/ /index.html; # 用于单页应用（SPA）的路由回退│
│ } │
│ } │
│ ``` │
│ │
│ **如何生成 `.htpasswd` 密码文件：** │
│ │
│ 你需要使用 `htpasswd` 工具，它通常随 Apache HTTP Server 一起安装，或者 │
│ 可以通过 `apache2-utils` 包获取。 │
│ │
│ 1. **安装 `htpasswd` 工具（如果尚未安装）：** │
│ 对于 Debian/Ubuntu 系统： │
│ `sudo apt-get update && sudo apt-get install apache2-utils` │
│ 对于 CentOS/RHEL 系统： │
│ `sudo yum install httpd-tools` │
│ │
│ 2. **生成密码文件：** │
│ 使用 `-c` 参数在第一次创建文件时指定文件名。 │
│ `htpasswd -c .htpasswd qa` │
│ 系统会提示你输入密码两次。请输入 `review123`。 │
│ │
│ 如果你需要添加更多用户，后续请不要再使用 `-c` 参数，否则会覆盖原有文件。│
│ 例如，添加一个 `pm` 用户： │
│ `htpasswd .htpasswd pm` │
│ │
│ 这个 `.htpasswd` 文件需要放在你的 Docker 镜像中 Nginx 配置所指定的路径。 │
│ 最简单的做法是将其与 `nginx.conf` 一起拷贝到容器中。 │
│ 你需要更新你的 Dockerfile 来包含这个 Nginx 配置和 `.htpasswd` 文件。 │
│ 需要我帮你更新 Dockerfile 吗？ │
╰───────────────────────────────────────────────────────────────────╯
💻 代码演示
结合 Claude 的建议，我们来完善 Dockerfile，并展示一个简单的 GitHub Actions 工作流，实现自动部署。
1. 完整的 Dockerfile (包含 Nginx 配置和密码文件)
首先，在你的项目根目录下创建 nginx 文件夹，并将 nginx.conf 和 .htpasswd 放入其中。
nginx/nginx.conf:
server {
listen 80;
server_name your-preview-domain.com; # 替换为你的域名或 IP
location / {
root /usr/share/nginx/html;
index index.html index.htm;
auth_basic "Restricted Prototype Access";
auth_basic_user_file /etc/nginx/.htpasswd; # Nginx 容器内的路径
try_files $uri $uri/ /index.html;
}
}
nginx/.htpasswd: (使用 htpasswd -c .htpasswd qa 生成，密码 review123)
qa:$apr1$e.f1g.h2$I.j/K.l3m.n4o.p5q.r6
(注意：这是加密后的密码，每次生成都不同，请用你自己的实际生成结果替换)
项目根目录下的 Dockerfile:
# 阶段 1: 构建前端应用 (如果需要)
FROM node:18-alpine AS builder
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
COPY . .
RUN yarn build # 假设你的构建命令是 `yarn build`，生成到 `dist` 目录
# 阶段 2: 部署 Nginx 服务器
FROM nginx:stable-alpine
# 将构建好的前端静态文件从 builder 阶段复制到 Nginx 的默认静态文件服务目录
COPY --from=builder /app/dist /usr/share/nginx/html
# 复制 Nginx 配置文件和 .htpasswd 文件
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
COPY ./nginx/.htpasswd /etc/nginx/.htpasswd
# 暴露 80 端口
EXPOSE 80
# 容器启动时运行 Nginx
CMD ["nginx", "-g", "daemon off;"]
说明： 这里使用了多阶段构建（Multi-stage build），先在 builder 阶段构建前端应用，然后只将构建结果和 Nginx 配置复制到最终的 nginx 镜像中，以减小镜像体积。
2. GitHub Actions 自动化部署工作流
这个工作流将在每次代码推送到 preview 分支时，自动构建 Docker 镜像，推送到 Docker Hub，然后通过 SSH 连接到远程服务器，拉取并运行最新镜像。
.github/workflows/deploy-preview.yml:
name: Deploy Preview Environment
on:
push:
branches:
- preview # 当代码推送到 preview 分支时触发此工作流
jobs:
build-and-deploy:
runs-on: ubuntu-latest # 在最新的 Ubuntu 运行器上执行
steps:
- name: Checkout code
uses: actions/checkout@v3 # 检出仓库代码
- name: Build Docker image
run: |
docker build -t my-app-preview:${{ github.sha }} .
# 构建 Docker 镜像，使用 Git SHA 作为标签
- name: Log in to Docker Hub
uses: docker/login-action@v2
with:
username: ${{ secrets.DOCKER_USERNAME }} # Docker Hub 用户名，存储为 GitHub Secret
password: ${{ secrets.DOCKER_PASSWORD }} # Docker Hub 密码，存储为 GitHub Secret
- name: Push Docker image to Docker Hub
run: |
# 标记并推送镜像到 Docker Hub
docker tag my-app-preview:${{ github.sha }} your_docker_username/my-app-preview:${{ github.sha }}
docker push your_docker_username/my-app-preview:${{ github.sha }}
# 同时推送一个 latest 标签，方便后续拉取最新版本
docker tag my-app-preview:${{ github.sha }} your_docker_username/my-app-preview:latest
docker push your_docker_username/my-app-preview:latest
env:
DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }} # 确保 Docker Hub 用户名可用
- name: Deploy to Remote Server via SSH
uses: appleboy/ssh-action@master # 使用 appleboy/ssh-action 进行 SSH 连接
with:
host: ${{ secrets.SSH_HOST }} # 远程服务器 IP/域名
username: ${{ secrets.SSH_USERNAME }} # SSH 用户名
key: ${{ secrets.SSH_PRIVATE_KEY }} # SSH 私钥
script: |
# 登录 Docker Hub (在远程服务器上)
echo "${{ secrets.DOCKER_PASSWORD }}" | docker login --username ${{ secrets.DOCKER_USERNAME }} --password-stdin
# 拉取最新的 Docker 镜像
docker pull your_docker_username/my-app-preview:latest
# 停止并删除旧的容器 (如果存在)
docker stop my-app-preview || true
docker rm my-app-preview || true
# 运行新的容器，将容器的 80 端口映射到主机的 80 端口
docker run -d --name my-app-preview -p 80:80 your_docker_username/my-app-preview:latest
echo "Deployment complete. Preview URL: http://${{ secrets.SSH_HOST }}"
重要提示：
你需要在 GitHub 仓库的 Settings -> Secrets -> Actions 中配置以下 secrets：
DOCKER_USERNAME: 你的 Docker Hub 用户名。DOCKER_PASSWORD: 你的 Docker Hub 密码。SSH_HOST: 你的远程服务器 IP 地址或域名。SSH_USERNAME: 远程服务器的 SSH 用户名（例如ubuntu或root）。SSH_PRIVATE_KEY: 访问远程服务器的 SSH 私钥（通常以-----BEGIN RSA PRIVATE KEY-----开头）。
配置完成后，每次你将代码推送到 preview 分支，GitHub Actions 就会自动执行上述步骤，更新你的预览环境。
🔧 涉及的 Tools / Commands
| 工具名称 | 用途 | 说明 |
|---|---|---|
Docker |
容器化应用和部署 | 用于构建、运行和管理容器，确保应用在不同环境中行为一致。 |
Nginx |
Web 服务器和反向代理 | 提供高性能的静态文件服务，并支持配置 Basic Authentication。 |
htpasswd |
生成和管理 Basic Auth 密码文件 | Apache 工具集的一部分，用于创建加密的用户名和密码文件。 |
git |
版本控制系统 | 管理项目代码，并触发 CI/CD 工作流。 |
GitHub Actions |
CI/CD 自动化平台 | 实现代码提交、构建、测试和部署的自动化流程。 |
ssh |
安全远程连接 | 用于在 GitHub Actions 中安全连接到远程服务器进行部署操作。 |
yarn/npm |
Node.js 包管理器 | 构建前端应用时可能用到，用于安装依赖和执行构建脚本。 |
📝 本期要点回顾
- 无感托管是提升协作效率的关键： 通过提供无需本地环境设置的 URL 预览，显著加速了 QA/PM 的原型审查和反馈流程。
- Docker 容器化是实现跨环境一致部署的基石： 它将应用及其依赖打包成一个可移植的单元，确保预览环境的稳定性和可重复性。
- Nginx 结合
htpasswd提供简单而有效的 Basic Auth： 这是保护内部预览链接，限制访问权限的常用且便捷的机制。 - CI/CD 自动化是现代开发的标准实践： 利用 GitHub Actions 等工具，可以实现从代码提交到预览环境部署的完全自动化，大大减少手动操作和潜在错误。
- AI 助手（如 Claude）能大幅提升开发和部署效率： Claude 可以协助生成 Dockerfile、Nginx 配置、
htpasswd命令以及 CI/CD 脚本，降低技术门槛，加速整个流程。
🔗 参考资料
- Nginx HTTP Basic Authentication 官方文档: 详细介绍了 Nginx 中如何配置和使用基本认证。 https://nginx.org/en/docs/http/ngx_http_auth_basic_module.html
- Docker Documentation: 学习 Docker 的核心概念、命令和最佳实践。 https://docs.docker.com/
- GitHub Actions Documentation: 了解如何创建、配置和管理 GitHub Actions 工作流。 https://docs.github.com/en/actions