源于要做一个Nuxt的项目,所以标题以Nuxt为主,其实不然,我们同时也可将 Html 包含内的任意框架,全部可通过该方式进行实现自动化部署,
注:但前提是,请勿将公司内部产品项目,放入Github中使用,Github 建议只上传Demo,GItLab 可用于公司内部使用, CI 实现自动化部署。
一、准备工作
1. Nuxt Demo
2. Github 上传
3. Github Actions配置
4. 阿里云服务器购买
5. 阿里云服务器配置
二、使用 Nuxt 新建 Demo
1. 查看官网
2. 根据 Install 安装
3. 启动后,我们可以看到以下, 就说明,我们已经启动成功
二、Github 上传项目
1. 新建 Github 项目
2. 将本地项目代码,托管到 Github 上
3. 代码上传成功
三、Github Actions 配置
1. 点击 Actions 按钮,我们可以看到,我们可以自己去配置自动化所需要的步
2. 在 Github 上新建一个 Token 的验证,用于 Github 的关联
3 我们可以看到,此处有三点需要注意
1. 在项目的根目录下,新建 /.github/workflows/***.yml, 此处 yml 的文件名可以随意取名,项目上传后,会自动读取 workflows 文件夹内部 yml 文件
2. Edit new file 是 需要实现自动化部署,写的步骤,Github 默认的自动化部署步骤,是直接上传到了 Github Actions ,会生成一个网站查看,因我们是实现阿里云自动化部署,所以,将下面代码替换