南昌网站设计哪家专业好,网站域名备案注销,wordpress 鼠标悬停,wordpress 首页不显示目录 一、前言二、新建前端流水线1、点击新建任务2、填写流水线名称#xff08;这里我选择的是自由风格的软件项目#xff09;#xff0c;任务名称一般格式为#xff1a;项目名称-前后端3、创建成功后的结果 三、配置前端流水线1、进入刚创建好的任务页面中#xff0c;点击… 目录 一、前言二、新建前端流水线1、点击新建任务2、填写流水线名称这里我选择的是自由风格的软件项目任务名称一般格式为项目名称-前后端3、创建成功后的结果 三、配置前端流水线1、进入刚创建好的任务页面中点击配置2、General配置3、设置项目运行的节点4、源码管理4.1、如果没有配置过git账号的话需要进行一个git账号的配置 5、构建触发器将触发器全部置为空6、配置shell脚本6.1、shell脚本根据自己的打包需求进行配置这里配置对应前端项目打包下面给出参考项6.2、查看运行项目命令 7、添加构建后操作8、保存后点击立即构建9、构建服务是否成功 四、查看服务是否启动1、检查服务器中是否有构建成功的前端文件2、上传前端打包好的dist文件2.1、打包前端代码2.2、对dist文件目录进行压缩2.3、手动上传dist.zip至服务器2.4、解压dist.zip 3、修改nginx.conf文件3.1、进入nginx.conf文件的所在位置3.2、对nginx配置文件进行修改3.3、重启nginx 五、访问前端页面 一、前言 1、服务器中已安装好nginx如没有安装可参考此博客【Shell脚本】Linux安装Nginx以及开机自启 2、如果已有试图则直接新建任务如没有视图则新建一个视图即可。一个项目一个视图就可以 二、新建前端流水线
1、点击新建任务 2、填写流水线名称这里我选择的是自由风格的软件项目任务名称一般格式为项目名称-前后端 3、创建成功后的结果 三、配置前端流水线
1、进入刚创建好的任务页面中点击配置 2、General配置 描述XXX前端-前端XXX服务测试环境-项目构建 创建人创建者姓名 时间创建时间 保持构建天数2 保持最大构建个数3 3、设置项目运行的节点 这里的节点要看Jenkins集群的具体配置在安装Jenkins时配置的节点。现在使用的Jenkins配置为Front_Node.如果是新搭建的Jenkins去查看安装时配置的从节点名称 4、源码管理 4.1、如果没有配置过git账号的话需要进行一个git账号的配置 添加完成之后选择你新添加的凭据即可
5、构建触发器将触发器全部置为空 6、配置shell脚本 6.1、shell脚本根据自己的打包需求进行配置这里配置对应前端项目打包下面给出参考项
#!/bin/shecho $PATH
node -v
npm -v
npm install chromedriver --chromedriver_cdnurlhttp://cdn.npm.taobao.org/dist/chromedriver
npm install
npm run build-dev
cd ns-front
rm -rf ns-front.tar.gz
tar -zcvf ns-front.tar.gz *
cd ../6.2、查看运行项目命令 在前端项目中的package.json中可以看到我们在启动前端项目时使用的命令 7、添加构建后操作 8、保存后点击立即构建 9、构建服务是否成功 四、查看服务是否启动
1、检查服务器中是否有构建成功的前端文件 2、上传前端打包好的dist文件
2.1、打包前端代码
npm run build这时目录结构中会出现dist文件目录
2.2、对dist文件目录进行压缩 2.3、手动上传dist.zip至服务器 2.4、解压dist.zip
#查看上次好的dist.zip
cd /tmp/
ls#移动dist.zip
sudo mv dist.zip /usr/share/nginx/html#切换至/usr/share/nginx/html路径下
cd /usr/share/nginx/html
ls#解压dist.zip
sudo unzip dist.zip3、修改nginx.conf文件 因为是前端需要做映射所以需要修改nginx的配置文件 3.1、进入nginx.conf文件的所在位置
#切换至nginx.conf路径
cd /usr/local/nginx/conf3.2、对nginx配置文件进行修改
#进入nginx.conf
vi nginx.conf输入i进行编辑编辑完成后按ESC:wq保存退出即可
3.3、重启nginx
进入到nginx.conf所在的上一级路径下在进行重启nginx
#重启nginx配置文件
sudo ./sbin/nginx -s reload#查看nginx进程
ps aux|grep nginx五、访问前端页面
