Vercel部署前端部署

admin管理员组

文章数量:1666891

Vercel 部署

• 今天要讲的是如何对别人向自己的开源仓库提的PR进行自动代码审核

1. 注册并登录Vercel

1. 访问 Vercel官网
2. 点击右上角的"Sign Up"
3. 选择使用GitHub、GitLab、Bitbucket或邮箱注册
4. 完成注册流程并登录

2. 连接代码仓库

1. 在Vercel仪表板,点击"New Project"
2. 选择"Import Git Repository"
3. 授权Vercel访问你的GitHub、GitLab或Bitbucket账户
4. 从列表中选择要部署的仓库

3. 配置项目

1. Vercel会自动检测项目类型并提供默认配置
2. 在"Build and Output Settings"部分:
   • 确认或修改构建命令(如 npm run build)
   • 确认或修改输出目录(如 dist 或 build)
3. 如需自定义,展开"Advanced"部分进行更多设置

4. 部署设置

1. 检查"Environment Variables"部分,添加必要的环境变量
2. 在"Deploy"按钮旁边,确保选择了正确的分支(通常是 main 或 master)
3. 点击"Deploy"开始首次部署

5. 自动部署配置

1. 部署完成后,进入项目设置
2. 在左侧菜单找到"Git"
3. 确保"Production Branch"设置正确
4. 启用"Auto Deploy"选项

6. 预览部署设置

1. 在"Git"设置页面
2. 找到"Preview Deployments"部分
3. 选择触发预览部署的条件(如Pull/Merge Requests)

7. 自定义域名设置

1. 在项目页面,点击"Settings" > “Domains”
2. 点击"Add Domain"
3. 输入你的域名,按指示添加DNS记录
4. Vercel会自动配置SSL证书

8. 监控与分析

1. 在项目页面,找到"Analytics"标签
2. 查看页面加载速度、访问量等数据
3. 可以设置自定义的监控指标

9. 环境变量管理

1. 在项目设置中,找到"Environment Variables"
2. 添加所需的环境变量,可以设置不同环境(Development/Preview/Production)的值

10. 版本管理和回滚

1. 在项目的"Deployments"标签页查看所有部署
2. 如需回滚,找到想要恢复的版本,点击右侧的三个点
3. 选择"Promote to Production"

按照这些步骤,你就可以设置一个完整的Vercel CI/CD流程,实现代码推送后的自动构建、测试和部署。

11.注意

1. Vercel是专为前端服务的
2. 无法自定义服务器，适用于对别人提交的PR进行检测，不适用需要应用落地的场景

本文标签： Vercel