前端应用 CICD 有哪些方式实现【热度: 120】

关键词：前端 CICD

前端应用的持续集成与持续部署（CI/CD）可以通过以下几种方式实现：

一、使用 Jenkins

持续集成：
- Jenkins 可以监听代码仓库（如 Git）的变化，当有新的代码提交时，自动触发构建任务。
- 对于前端项目，可以配置 Jenkins 执行构建命令，如使用 npm 或 yarn 安装依赖、运行构建脚本等。
- 例如，可以创建一个自由风格的项目，配置源代码管理为你的 Git 仓库地址，并在构建步骤中添加“Execute shell”，输入构建命令，如npm install && npm run build。
持续部署：
- 构建成功后，Jenkins 可以将构建生成的静态文件部署到目标服务器上。
- 可以使用插件（如 Publish Over SSH）将文件传输到远程服务器，并执行部署脚本。
- 例如，配置插件连接到目标服务器，设置部署目录，然后在构建后操作中选择“Send build artifacts over SSH”，指定要传输的文件和目标服务器信息。

二、使用 GitLab CI/CD

持续集成：
- 在.gitlab-ci.yml文件中定义一系列的阶段（stages）和任务（jobs）。
- 当代码推送到 GitLab 仓库时，GitLab Runner 会自动执行这些任务。
- 对于前端项目，可以定义一个build job，在其中执行构建命令。
- 例如：
```
stages:
  - build

build:
  stage: build
  script:
    - npm install
    - npm run build
```

持续部署：

可以在.gitlab-ci.yml中定义deploy job，将构建生成的静态文件部署到服务器上。
可以使用 SSH 密钥或其他部署工具来实现部署。

例如：

stages:
  - build
  - deploy

build:
  stage: build
  script:
    - npm install
    - npm run build

deploy:
  stage: deploy
  script:
    - scp -r dist/* user@server:/path/to/deploy

三、使用 GitHub Actions

持续集成：

在.github/workflows目录下创建一个 YAML 文件来定义工作流。
当代码推送到 GitHub 仓库时，GitHub Actions 会自动执行工作流中的任务。
对于前端项目，可以在工作流中执行构建命令。

例如：

name: CI/CD for Frontend App

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build

持续部署：

可以在工作流中添加部署步骤，使用 SSH、FTP 等方式将静态文件部署到服务器上。
或者使用云服务提供商的部署服务，如 AWS Amplify、Netlify 等。

例如：

name: CI/CD for Frontend App

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build

  deploy:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to Server
        run: scp -r dist/* user@server:/path/to/deploy

四、使用 Travis CI

持续集成：
- 在项目根目录下创建一个.travis.yml文件来定义构建配置。
- 当代码推送到支持的代码仓库（如 GitHub）时，Travis CI 会自动触发构建。
- 对于前端项目，可以在配置文件中指定构建命令。
- 例如：
```
language: node_js
node_js:
  - 12

script:
  - npm install
  - npm run build
```
持续部署：
- 可以在构建成功后，使用部署工具或脚本将静态文件部署到服务器上。
- 例如，可以在.travis.yml中添加部署步骤，使用 SSH 或其他方式进行部署。
- ```
language: node_js
node_js:
  - 12

script:
  - npm install
  - npm run build

after_success:
  - scp -r dist/* user@server:/path/to/deploy
```