Nuxt + Github Action + 阿里云服务器 = 实现自动化部署

源于要做一个Nuxt的项目,所以标题以Nuxt为主,其实不然,我们同时也可将 Html 包含内的任意框架,全部可通过该方式进行实现自动化部署,

注:但前提是,请勿将公司内部产品项目,放入Github中使用,Github 建议只上传Demo,GItLab 可用于公司内部使用, CI 实现自动化部署。

 

一、准备工作

1. Nuxt Demo

2. Github 上传

3. Github Actions配置

4. 阿里云服务器购买

5. 阿里云服务器配置

 

二、使用 Nuxt 新建 Demo

1. 查看官网

2. 根据 Install 安装

Nuxt + Github Action + 阿里云服务器 = 实现自动化部署

3. 启动后,我们可以看到以下, 就说明,我们已经启动成功

Nuxt + Github Action + 阿里云服务器 = 实现自动化部署

二、Github 上传项目

1. 新建 Github 项目

Nuxt + Github Action + 阿里云服务器 = 实现自动化部署

 

 

 

2. 将本地项目代码,托管到 Github 上

Nuxt + Github Action + 阿里云服务器 = 实现自动化部署

 

 

 

3. 代码上传成功

Nuxt + Github Action + 阿里云服务器 = 实现自动化部署

 

 

三、Github Actions 配置

1. 点击 Actions 按钮,我们可以看到,我们可以自己去配置自动化所需要的步Nuxt + Github Action + 阿里云服务器 = 实现自动化部署

 

2. 在 Github 上新建一个 Token 的验证,用于 Github 的关联

Nuxt + Github Action + 阿里云服务器 = 实现自动化部署

 

 

3 我们可以看到,此处有三点需要注意

1. 在项目的根目录下,新建 /.github/workflows/***.yml, 此处 yml 的文件名可以随意取名,项目上传后,会自动读取 workflows 文件夹内部 yml 文件

2. Edit new file 是 需要实现自动化部署,写的步骤,Github 默认的自动化部署步骤,是直接上传到了 Github Actions ,会生成一个网站查看,因我们是实现阿里云自动化部署,所以,将下面代码替换

 

Nuxt + Github Action + 阿里云服务器 = 实现自动化部署

 

上一篇:Nuxt中引入elementUI


下一篇:2021全新Vue全套教程全开源视频教程