阿里云部署前端vue项目（云效代码库，流水线）

前提

1. 已有git bash，官网下载Git - Downloads (git-scm.com)，用于拉取云端代码到本地
2. 下载sourcetree软件，官网Sourcetree | Free Git GUI for Mac and Windows下载Windows版本，用于与代码库连接，直接对代码库进行操作（上传本地项目到云端代码库等）
3. 已有阿里云账号，且购买了ECS服务器，服务器上安装有项目需要的node等

云效代码库

创建代码库

• 进入阿里云控制台，搜索“云效”并进入，点击右上角“新建代码库”，编辑代码库信息（我这里选择普通新建，如果是基于React的代码，可以选择模版新建中的React模版）

• 新建完成后，由于原文件为空，当我们拉取代码时会报错，所以可以新建一个Readme文件，选择Readme模版，来介绍项目的版本、运行情况等，新建完后直接点击“立即提交到master”即可

• 新建用于开发的分支

依次点击“分支”->“新建分支”，新建用于开发的分支，建议新建新分支而不直接在master分支上开发项目原因：master分支通常被视为项目的稳定版本基线，是项目“生产就绪”的代码集合，直接在主分支上进行开发会增加引入不稳定代码的风险，从而影响整个项目的稳定性和可靠性，在多个开发人员或团队同时工作时，每个人或每个团队可以在自己的分支上进行独立的开发和测试，而不会相互干扰，通过创建新的开发分支，可以在该分支上提交更改，并通过代码审查流程进行审查，审查通过后，可以将更改合并回主分支，这一过程更加清晰和可控

• 添加RAM成员的SSH：添加参与项目开发的成员的SSH，一般在用户文件夹里的.ssh里面，后缀为.pub，例如我这里的：

• 给与其代码拉取或上传权限

git bash本地拉取云端代码

• 复制代码库SSH，在git bash里面执行git clone “代码库SSH”：

注意：拉取前提是上一步中已经将本地SSH复制添加至账户设置中，否则用git拉取云端代码时会出现如下报错：

• 

Sourcetree连接代码库：

• 打开sourcetree软件，依次“工具”->“选项”：

• 添加本地的SSH密钥（对应添加至云端代码库账户设置里的SSH公钥）：

• 点击上面一行的“+”，然后依次“Clone”，添加云端代码库SSH

• sourcetree会自动检查url是否正确，复制正确出现如下结果，然后点击“克隆”即可clone云端代码至本地：

• 然后，一定要在代码库里面再次添加工作副本（即从云端拉取项目代码后放置的位置），否则本地修改完拉取的代码后，sourcetree检测不到代码变化：

• 最后，检出之前在云端代码库里面新建的用于开发的远程分支：

• 前面操作无误sourcetree才会实时监测到你更改过代码的记录，并在文件状态里显示更改过的文件：

提交vue项目代码

• 先暂存所有更改的文件：

• 然后填写更改描述，点击“提交”：

合并、推送分支

• 在开发分支提交完代码后，将分支合并到主分支上，例如我这里的主分支是master，双击master，然后单击选中develop，右键“合并develop至当前分支”，主分支根据项目具体设置情况而定，这关系到后面流水线的运行：

• 若推送显示有数字，则将该分支按需求推送至其它分支：

云效流水线

• 新建流水线

• 编辑流水线流程配置

选择流水线线源即对应的代码库、构建测试、部署等，具体由项目求来定，例如我这里的vue项目依赖基于node.js构建的，所以要保证代码正确运行，需要“Node.js构建上传”,最后由主机部署

• Node.js构建配置

npm install：安装依赖

npm run build：打包成dist文件夹

• 构建物上传配置：

• 部署配置：若没有主机组，按指引去新建主机组，但是前提是购买了ECS服务器

• 编写部署脚本：

• 前面生成的构建物dist还是一个压缩包，需要使用tar zxvf命令将其解压缩并放置在ECS服务器的根目录下（域名访问网页的主目录），例如我这里的服务器的网页项目根目录是 /root/app（/root是服务器固定的根目录，我在其下面创建了一个专门放至网页html的文件夹app，app文件夹下包括了访问网页时要显示的html文件），这个要根据自己的实际情况来看，不知道根目录是什么，可以登录ECS服务器查看根目录、配置网页域名等信息

• 流水线的运行配置

运行分支为项目开发主分支，例如我这里的主分支就是develop，如果在其它分支如localdevelop分支上更改并提交了代码，就必须将localdevelop分支合并到develop分支，然后再运行develop分支，修改的代码才会生效

最后运行流水线，成功后访问网页域名，如果网页内容随着每次更改并提交代码、运行流水线后而相应发生变化，说明前面步骤没有问题，如果出错，例如网页出现403、404、500等报错，登录ECS服务器查看域名、网页根目录等相关配置是否错误

注意：流水线正常运行的前提是配置的命令（如npm install、npm run build、npm run test等）在本地项目里面运行生效，且ECS服务器上已经安装了项目需要的node版本，流水线的本质是解决每次修改代码后进行依赖构建生成、打包、上传修改的代码文件夹至ECS服务器等的繁琐过程，将这一系列过程交给阿里云运行，流程配置也是根据项目具体需求来定的