coding云原生构建实现自动化部署(前端代码v3+vite)

使用Coding CI/CD

在现代软件开发中，自动化部署是提高效率和降低出错率的关键步骤。本文将详细介绍如何使用 coding-ci.yml 文件配置 CI/CD 流程，实现一个自动化的部署过程。我们将以一个简单的项目为例，讲解如何利用 Coding CI/CD 工具自动化构建和部署。

什么是 CI/CD？

CI/CD（持续集成/持续部署）是一种软件工程实践，通过自动化构建、测试和部署流程，提高开发效率和软件质量。CI（持续集成）旨在频繁地将代码集成到共享仓库中，并运行自动化测试。CD（持续部署）则自动将经过测试的代码部署到生产环境中，确保软件的快速交付。

话不多说我们直接代码进行分析

步骤

1. 创建 coding-ci.yml 文件

coding-ci.yml 是一个配置文件，用于定义 CI/CD 流程中的各个阶段。在本文中，我们将创建一个简单的 CI/CD 配置文件，以实现代码的自动构建、打包、同步到服务器并发布。

以下是一个示例 coding-ci.yml 文件：

master:#这里表示如果为master分支会执行后续步骤
  push:#这里表示如果为push推送将会执行后续步骤
    - runner:
        cpus: 4
      docker:
        image: node:14 # 使用 Node.js 的 Docker 镜像作为执行环境
      imports: https://xxxx #这是一个可以访问的yml 里面配置了数据库的key host password等等
      stages:
        - name: 安装依赖
          script:
            - echo "Installing dependencies..."
            - npm i # 使用 npm 安装项目依赖

        - name: 构建
          script:
            - echo "Building project..."
            - npm run build # 构建项目
            - tar -cvf dist.tar -C dist/ . # 将构建后的文件打包为 dist.tar

        - name: 同步
          image: appleboy/drone-scp
          settings:
            host: $DEV_HOST
            username: $DEV_USER
            key: $SSH_PRIVATE_KEY
            source: dist.tar
            target: /var/www/html # 同步到目标服务器

        - name: 发布
          image: appleboy/drone-ssh
          settings:
            host:
              - $DEV_HOST
            username: $DEV_USER
            key: $SSH_PRIVATE_KEY
            port: $SSH_PORT
            script:
              - cd /var/www/html
              - tar xvf dist.tar && unlink dist.tar
              - ln -sfn /var/www/html/dist /var/www/html/dist
              # - systemctl restart nginx  # 重新启动服务

以下为imports导入的链接yml文件中的配置

SSH_PRIVATE_KEY: |
  -----BEGIN OPENSSH PRIVATE KEY-----
  #这里是ssh私有密钥key
  -----END OPENSSH PRIVATE KEY-----

SSH_PORT: 服务器端口

DEV_HOST: 服务器ip

DEV_USER: 服务器用户名

 

2. 配置详细解读

a. Runner 和 Docker

runner:
  cpus: 4
docker:
  image: node:14 # 使用 Node.js 的 Docker 镜像作为执行环境

• runner: 设定了 CI 任务的 CPU 核心数为 4，确保构建任务能够快速执行。
• docker: 使用 Node.js 14 的 Docker 镜像作为运行环境，确保构建和测试的环境一致性。

b. Import

imports: https://coding.net/p/ci/d/dev-config/git/tree/master/coding-env.yml

• imports: 导入其他配置文件（如环境变量设置），以便在构建过程中使用

c. Stages

CI/CD 流程被分为多个阶段，每个阶段执行特定的任务。

• 安装依赖

  - name: 安装依赖
    script:
      - echo "Installing dependencies..."
      - npm i # 使用 npm 安装项目依赖
  

  这个阶段安装项目所需的所有依赖包，确保构建时环境的完整性。

• 构建 

- name: 构建
  script:
    - echo "Building project..."
    - npm run build # 构建项目
    - tar -cvf dist.tar -C dist/ . # 将构建后的文件打包为 dist.tar

在这个阶段，我们执行项目的构建任务，并将构建结果打包成 dist.tar 文件，为后续的同步和部署做准备。 

• 同步

- name: 同步
  image: appleboy/drone-scp
  settings:
    host: $DEV_HOST
    username: $DEV_USER
    key: $SSH_PRIVATE_KEY
    source: dist.tar
    target: /var/www/html # 同步到目标服务器

使用 appleboy/drone-scp 镜像，将 dist.tar 文件同步到目标服务器的指定目录。这里用到了环境变量来提供主机地址、用户名、密钥等信息。

• 发布

  - name: 发布
    image: appleboy/drone-ssh
    settings:
      host:
        - $DEV_HOST
      username: $DEV_USER
      key: $SSH_PRIVATE_KEY
      port: $SSH_PORT
      script:
        - cd /var/www/html
        - tar xvf dist.tar && unlink dist.tar
        - ln -sfn /var/www/html/dist /var/www/html/dist
        # - systemctl restart nginx  # 重新启动服务
  

  这个阶段在目标服务器上执行命令，解压 dist.tar 文件，创建符号链接，并可选择重新启动 nginx 服务来使更改生效。

3. 实现步骤

1. 配置 Git 仓库: 确保你的 Git 仓库中包含 coding-ci.yml 文件，并且设置了正确的环境变量，如 $DEV_HOST、$DEV_USER 和 $SSH_PRIVATE_KEY 等。

2. 设置 Coding CI/CD: 在 Coding 平台上配置 CI/CD 工具，确保它可以读取 coding-ci.yml 文件并执行其中的任务。

3. 提交代码: 将代码提交到 master 分支。每次提交时，CI/CD 流水线会自动运行，执行从安装依赖到发布的所有步骤。

4. 检查结果: 查看 CI/CD 工具的执行日志，确保所有步骤成功完成。如果出现错误，根据日志进行调试和修正。

结论

通过配置 coding-ci.yml 文件，你可以实现自动化的构建、部署和发布流程。这种自动化不仅提高了开发效率，还减少了人为错误的可能性。希望本文能帮助你理解和实现 CI/CD 流程，并应用到你的项目中。