Jenkins 部署前端代码

在使用 阿里云 OSS（对象存储服务） 和 Jenkins 来自动化部署前端代码时，通常会将 Jenkins 配置为一个自动化流水线，当代码被推送到代码仓库时，Jenkins 会自动执行构建流程，并将前端代码打包后上传到阿里云 OSS 上，这里也可选择七牛云。供静态资源托管使用。

以下是具体的步骤，涵盖从 Jenkins 配置、构建前端项目、到上传到阿里云 OSS 的流程：

前提条件

1. Jenkins 已安装并运行在服务器上。
2. 阿里云 OSS 服务已经配置好，创建了一个 Bucket（存储桶），并生成了 Access Key 和 Secret Key。
3. 前端代码托管在 Git（如 GitHub、GitLab、码云等）仓库上。
4. 前端项目是通过 npm 或 yarn 构建的项目（如 Vue、React、Angular 等框架）。

步骤 1：安装 Jenkins 插件

确保你已经安装了 Jenkins 必需的插件：

• Git Plugin（用于拉取代码）。
• NodeJS Plugin（用于构建前端项目）。
• Publish Over SSH Plugin（可选，用于将构建文件发布到服务器，若你使用服务器而非 OSS 托管）。
• 阿里云 OSS Jenkins 插件（可选）。

步骤 2：Jenkins 配置构建环境

1. 配置 Git 仓库和 Webhook：

   • 登录 Jenkins，创建一个新的 Job，选择 Freestyle Project。
   • 在 Source Code Management 部分，配置 Git 仓库的 URL 和凭据（SSH 密钥或 HTTPS Token）。
   • 如果需要自动触发构建，配置 Webhook 到 Jenkins，Jenkins 支持通过 Git 仓库的变动来触发流水线。

2. 配置 NodeJS 构建环境：

   • 在 Build Environment 部分，选择安装 NodeJS 插件并设置好 Node.js 和 npm 环境。

步骤 3：Jenkins 构建前端项目

1. 安装依赖：
   在构建步骤中，执行以下命令，安装前端项目依赖：

   npm install
   

2. 打包前端项目：
   使用项目对应的打包命令（如 Vue 项目的 npm run build 或 React 项目的 npm run build）。

   npm run build
   

3. 打包后前端项目的文件会生成在某个目录下（如 dist/ 目录），这个目录就是需要上传到阿里云 OSS 的内容。

步骤 4：将打包后的文件上传到阿里云 OSS

有两种方式将文件上传到阿里云 OSS：

方式 1：使用 Jenkins 插件上传到 OSS

阿里云官方提供了 OSS Jenkins 插件，你可以使用该插件自动将打包后的文件上传到阿里云 OSS。

配置步骤：

1. 安装 阿里云 OSS Jenkins 插件。
2. 在 Jenkins 的 System Configuration 中，配置阿里云的 Access Key 和 Secret Key。
3. 在构建项目的配置中，添加一个 Post-build Action，选择 Upload Artifacts to Aliyun OSS，并配置：
   • Bucket Name：你在阿里云 OSS 上创建的 Bucket。
   • Access Key 和 Secret Key：访问 OSS 所需的凭证。
   • Source Path：构建后的静态文件路径（如 dist/）。
   • Target Path：在 OSS 中存放这些文件的路径。

方式 2：通过 ossutil 工具上传

如果你不想使用 Jenkins 插件，也可以通过阿里云提供的命令行工具 ossutil 来上传文件。

步骤：

1. 在 Jenkins 构建服务器上安装 ossutil 工具：

   # 下载并解压 ossutil 工具
   wget http://gosspublic.alicdn.com/ossutil/1.7.5/ossutil64
   chmod 755 ossutil64
   sudo mv ossutil64 /usr/local/bin/ossutil
   

2. 使用 ossutil 配置阿里云 OSS 的凭据：

   ossutil config -e <your-endpoint> -i <your-access-key-id> -k <your-access-key-secret>
   

3. 在 Jenkins 构建流程中，使用 ossutil 将打包好的前端代码上传到 OSS：

   ossutil cp -r dist/ oss://your-bucket-name/target-directory/
   

   • dist/ 是本地的打包目录。
   • oss://your-bucket-name/target-directory/ 是阿里云 OSS 中的存储路径。

步骤 5：配置阿里云 OSS 的静态网站托管

1. 登录到阿里云 OSS 控制台，进入你创建的 Bucket。
2. 在 Bucket 设置 中，启用 静态网站托管 功能。
   • 配置默认首页和错误页面（如 index.html 和 404.html）。
3. 将 OSS 的访问权限设置为 公共读，确保静态资源可以被外部访问。

步骤 6：测试部署

1. 提交代码到 Git 仓库，Jenkins 自动拉取代码并开始构建。
2. Jenkins 执行 npm install 和 npm run build 来构建前端项目。
3. Jenkins 使用 ossutil 或插件将打包后的文件上传到阿里云 OSS。
4. 通过访问 OSS 提供的 URL，测试前端应用是否正确托管。

每日工作流简化

1. 提交代码：

   • 开发者将代码提交到 Git 仓库。
   • Git 仓库触发 Jenkins Webhook 开始构建。

2. Jenkins 拉取代码并构建：

   • Jenkins 拉取最新代码。
   • Jenkins 通过 npm install 安装依赖。
   • Jenkins 通过 npm run build 打包项目。

3. 上传到 OSS：

   • 使用 ossutil 或 Jenkins 插件，将打包好的文件上传到阿里云 OSS。

4. 静态资源托管：

   • 阿里云 OSS 自动托管静态文件，供用户访问。

以上。