玩转华为云CodeArts，解决你项目打包部署的烦闹

前言 这是我在这个网站整理的笔记,有错误的地方请指出，关注我，接下来还会持续更新。

作者：神的孩子都在歌唱

一. CodeArts介绍

CodeArts官网： https://www.huaweicloud.com/devcloud/

代码托管地址：https://console.huaweicloud.com/devcloud/?region=cn-north-4&locale=zh-cn#/codearts-repo/list

以下是官方的解释

软件开发生产线（CodeArts）是面向开发者提供的一站式云端平台，即开即用，随时随地在云端交付软件全生命周期，覆盖需求下发、代码提交、代码检查、代码编译、验证、部署、发布，打通软件交付的完整路径，提供软件研发流程的端到端支持。

总的来说就是可以方便管理你的代码，小手点一下就能够进行编译运行了。

正好最近我在写自己的个人网站，苦于每次编译运行都需要自己手动打包构建，流程繁琐。CodeArts正好可以解决我的问题，那么接下来就带着大家了解一下CodeArts是如何帮助我们解决这些问题的。

以下是我的个人网站代码开源地址，里面有详细的部署教程：

1. 后端

2. 前端

3. 项目部署文档

那么废话不多说，开始我们的CodeArts之旅把

二. 创建项目

点击首页创建我们的项目

输入项目名称创建项目

创建好后我们就可以管理我们的项目了

三. 代码仓库的使用

新建仓库

可以选择普通仓库和导入仓库，这里我选择了导入仓库，因为这样我可以把 GitHub 上面的代码导入进来

然后就是关联上github，这里需要一个访问令牌

你可以到个人仓库里面获取对应的token

1. 登录GitHub，单击右上角头像，选择“Settings” > “Developer settings”。

2. 选择“Personal access tokens ” > “Personal access tokens (classic)” > “Generate new token (classic)”，填写关键信息，如下图所示。

关联好了之后就是选择你要引入的项目就可以了

然后就是按照需要选取了

最后点击确定，代码就导入进来了

注意一点，我们的代码还是可以提交到github，然后做到同步就可以了

代码是有了，那么我们如何对这些代码进行构建编译和部署管理呢,这时候就需要用到流水线了.我的这个项目后端是springboot，前端是vue+element

四. 构建流水线

4.1 后端流水线

我们新建一个流水线

填写基本信息

选择模板

点击创建就可以了，这样子我们就拥有了后端的构建和部署这一套流水线了

4.1.1 编译构建

代码编译构建好后，会将生成的jar包放到制品仓库，我们可以到这里查询下载jar包

4.1.2 部署

部署就是将代码推送到服务器上运行

部署的配置比较麻烦

首先配置要部署到的服务器信息（通俗点就是你想把jar包上传到哪里）。我这里有一台centos7的云服务器，可以直接拿来使用

进入到设置 ->通用设置，新建主机集群

然后设置目标主机，就是云服务器

接下来我们就要配置部署的信息了

我们点击部署导航在点击编辑进入到编辑页面

以下就是编辑页面

首先我们配置环境管理，点击新建环境，配置基本信息

然后在配置资源列表，导入刚刚创建的主机

这样子环境管理配置好了

接下来我们配置参数设置，设置默认参数，只需要配置以下三个参数就可以

然后我们在配置部署步骤，这个很关键

部署无非就是安装环境 -> 上传应用（jar包） -> 启动应用

由于我之前已经安装过环境，包括jdk，docker还有pgsql数据库，所以我就不在部署的时候安装了，如果有需要的可以自己配置。

我的部署步骤如下，配置部署来源，将最新的jar包推送到云服务器

然后添加一个脚本流程，通过脚本去关闭和启动服务

# 停止服务
/study/project/navigate/cyz_navigate/script/stop.sh
# 启动服务
/study/project/navigate/cyz_navigate/script/start.sh

这样子我们的后端部署配置也完成了

构建一下流水线，我们发现jar包也都推上来了，并且端口也启动了，说明后端已经正常运行了

4.2 前端流水线

和后端一样，选择新建流水线

然后模板选择node.js，点击创建，流水线就创建好了

注意: 这里和后端不一样，只创建了前端编译构建的流水线。

4.2.1 编译构建

由于编译构建华为云已经帮我们自动生成了，所以直接运行就可以

华为云这里有个问题，他编译后只会把dist第一层的文件推送到软件发布库，如下图

所以我们要修改一下编译的构建步骤，首先将dist压缩，之后在推送压缩文件到软件发布库。

添加shell脚本,用来压缩dist包

zip -r ./dist.zip ./dist

上传软件包到软件发布库 的 修改包构建路径为./dist.zip

这样子编译出来后存储到软件发布库的就是一个zip包了

4.2.2 部署

由于创建前端流水线的时候，没有自动把我们创建部署应用，所以我们需要自己创建

选择新建应用

配置基本信息

选择部署模板，这里可以选择vue应用部署也可以选择通用部署，如果之前服务器已经搭建nginx环境了，就可以选择 通用部署，只需要把dist包推送上去就可以了，我这边选的是vue部署

然后就是和后端一样配置一下 环境管理，和 参数设置

这些参数都很重要，要注意配置

然后就是设置部署步骤，我这里将安装和启动nginx都给禁用了，因为我已经安装过了，前端上传dist不需要重复启动nginx

注意解压路径

重载Nginx配置文件，我觉得这个很不错就留下来了，你可以在这里配置nginx的内容，就不用专门去服务器上修改了。nginx配置信息如下

# 请输入您的nginx配置文件内容，以下为示例配置
​
user root;
worker_processes  1;
events {
    worker_connections  1024;
}
​
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       ${service_port};
        server_name  localhost;
​
        location / {
            root ${dist_path};
            index /index.html;
            try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api/ {
            proxy_pass http://127.0.0.1:8089/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
​
    }
}

这样子我们的部署前端应用的配置也完成了，然后我们只需要在流水线上在添加部署任务就可以了

部署好了后就可以在服务器上看到上传上来的dist文件了

4.3 成果展示

以后我们代码上传到github，代码仓库从github同步一下代码，然后点击一下构建，代码就自动编译构建同步到云服务器了。是不是很舒服。

然后我们就可以直接访问我们的网站了

我正在参加【有奖征文 第31期】华为云CodeArts，AI重塑的软件开发生产线！

活动链接：https://bbs.huaweicloud.com/blogs/434372

作者：神的孩子都在歌唱

本人博客：https://blog.csdn.net/weixin_46654114

转载说明：务必注明来源，附带本人博客连接。