IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> CI/CD---使用新版云效流水线自动部署前端Vue项目 -> 正文阅读

[JavaScript知识库]CI/CD---使用新版云效流水线自动部署前端Vue项目

两大基本前提:

1、有一个自己的云服务器
2、项目代码已经提交到代码仓库,如gitee,github等

为什么需要流水线

1、除了第一次需要新建流水线,配置脚本外,后续所有的部署只需要提交代码后,点击运行流水线就行 。
2、流水线还可以回滚,此功能太过友好了。
3、当然,你也可以选择jenkins,这就仁者见仁,智者见智了。



一、流水线配置


1、百度搜索“云效流水线”,进入云效

在这里插入图片描述

2、选择免费使用,并登陆阿里云账号

在这里插入图片描述

3、选择我的流水线—>新建流水线

在这里插入图片描述

4、选择流水线模板(可以根据需求选择不同模板)

在这里插入图片描述

5、流水线配置

在这里插入图片描述
选择代码源:比如码云就是gitee,这里以码云示例
添加服务器连接:码云的授权,非常简单,按提示操作
代码仓库:配置服务器连接后,自动扫描获取到了你的所有项目
选择默认分支:一般是开发分支,而不是master分支,具体看平时提交到哪个分支
开启分支模式(企业中肯定是要开启的,这里只是个人项目,不需要开启)
工作目录:可以自定义,也可以不需要管,我这里不管

点击添加即可

6、Node.js构建编辑

分为如下两步:
在这里插入图片描述

步骤名称:Node.js 构建

在这里插入图片描述
重点为构建命令

我的构建命令如下,仅供参考:

# input your command here
npm cache clean --force
rm -rf node_modules
rm -rf package-lock.json
npm install
npm run build

步骤名称:构建物上传

在这里插入图片描述

制品名称随意取,默认为package.tar ,后续的主机部署步骤会用。
由于vue打包后都是会生成一个dist目录,故打包路径为dist/

7、主机部署

在这里插入图片描述

可以看到,需要注意三点,其他不需要变,直接选择即可:
主机组:新建主机组,可以根据实际情况,如果是购买的阿里云的服务器,选第一个,如果是腾讯云,华为云之类的非阿里云服务器,选第二个。或者没有服务器,选第三个。我这里是选择的第一个作为示例。这方面我没遇到任何阻碍,很简单,自行摸索。
在这里插入图片描述

下载路径:这个下载路径可以自定义,只需要注意记住就是,后面的部署脚本需要填写这个配置,记住需要对应上

部署脚本:由于前面阿里云已经构建完成,在下载路径会有对应的package.tar的压缩包,所以部署脚本存在的目的,就是解压这个压缩包到指定路径,我的部署脚本如下:

tar zxvf /home/admin/app/vue-yuanchangliang-dist.tgz -C
 /www/wwwroot/yuanchangliang/dist

非常好理解:第一个路径就是前面提到的下载路径,至于后续的/www/wwwroot/yuanchangliang/dist则是解压后,dist文件夹的路径。

配置完成后,点击保存并运行即可

8、注意事项

正常来说,如果是第一次部署,云服务器上应该是没有npm这个命令的,等待流水线运行时就会报错:npm: command not found

如果报错,可以试试依次执行如下命令按照npm,若未报此错,请无视:

sudo yum remove npm

sudo yum remove nodejs-legacy

sudo yum remove nodejs

sudo rm /usr/bin/node

sudo yum install nodejs

sudo yum install nodejs-legacy

sudo yum install npm

以及,在使用流水线之前,最好使用单纯的上传dist文件的形式部署一次,确保这种方式部署后,可以访问到该网站了,再尝试使用流水线部署。可以减少很多流水线部署可能出现的问题。

毕竟流水线的本质,就是由手动构建打包,上传dist文件。变为了自动拉取最新代码,自动构建打包,自动生成dist文件并部署。如果手动部署可以了,那流水线部署问题也就不大了。

9、遇到问题,先看日志!!!

在这里插入图片描述




–我是“道祖且长”,一个在互联网"苟且偷生"的Java程序员
“有任何问题,可评论,我看到就会回复”

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-25 18:01:20  更:2022-06-25 18:02:28 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 16:48:53-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码