创建流水线源码管理（2篇）——2.4配置
发表时间：2023-10-16 06:03:00
文章来源：炫佑科技
浏览次数：188
菏泽炫佑科技
创建流水线源码管理（2篇）——2.4配置
2.4 配置Node环境变量。 单击“工具”（有些版本也称为“工具”），进入工具配置并向下滚动找到它。 单击“添加”取消选中并使用我们自己的 Node 版本来添加内容。 名称可以随意选择，使用安装路径。 自己配置的节点路径
点击保存返回主页！ ！ ！ 2.5 前端项目已上传到，Vue1部署在本地环境，并进行预构建操作
除了构建之外，其他操作流程与前两次部署完全相同：
包含以下操作：
创建源码管理（配置项目git地址和分支）构建触发器（配置触发条件和）
参考文章：自动化部署项目
2.构建步骤点击添加构建步骤，选择“ ”，从“ ”中选择我们刚刚添加的Node版本。 其他默认就足够了，不需要更改。
继续点击添加构建步骤，选择“shell”。 此项是在服务器上执行的命令，包括以下内容：
(1)指定bash为脚本指令
(2)npm下载前端依赖
(3)Vue项目打包
（4）将打包好的“dist文件夹”复制到我们自己创建的目标位置
代码是：
#!/bin/bash
# 刷新环境变量
source ~/.bash_profile
# 安装依赖
npm install
# 打包为dist文件夹
npm run build
# 复制dist文件夹中的内容到指定位置
cp -r dist/ /data/vue保存并返回首页创建流水线源码管理（2篇）——2.4配置，点击“立即构建”，检查构建是否正常运行，然后到服务器上检查打包后的dist文件夹内容是否已经复制到指定目录。
构建完成：
控制台显示构建成功：
打包的文件也复制成功：
3.安装nginx映射文件(index.html)
只需输入命令：
docker run \
-p 8002:80 \
--name vue-test \
--restart=always \
-v /data/vue:/usr/share/nginx/html \
-d nginx:latest解释：
容器启动成功：
4、测试效果
访问::8002/
3. 远程服务器部署
将Vue项目部署到远程服务器与刚才本地部署有两个区别：
在“shell”模块中，不再需要复制dist文件夹，只需要安装依赖并打包即可。
#!/bin/bash
# 刷新环境变量
source ~/.bash_profile
# 安装依赖
npm install
# 打包为dist文件夹
npm run build滚动到管道配置的末尾，找到“构建后操作”，单击“添加构建后操作部署”，找到并单击“通过 SSH 发送构建”，并填写以下内容
(1)：需要发送的文件。 这里的执行路径在“/root/.//项目名”下。 使用npm命令打包后，会生成dist文件夹。 因此，这里只需要填写“dist/**”自动化软件开发，这样就可以将dist文件夹中的所有内容复制到远程服务器上。
(2)：需要去除的目标前缀。 不需要传输dist文件夹，所以只需删除dist文件夹，只发送该文件夹的内容即可。
(3)：目标文件夹。 这是将 dist 文件夹的内容发送到远程服务器的位置。 而这个位置也是Nginx命令挂载的地方。
(4) Exec：到达远程服务器后要执行的命令。 不能为空，随意填写即可。
远程服务器也执行命令映射本地“index.html”路径
docker run \
-p 8002:80 \
--name vue-test \
--restart=always \
-v /data/vue:/usr/share/nginx/html \
-d nginx:latest测试效果
访问::8002/
4. 总结
本文讲解了在服务器和远程服务器上自动化部署前端Vue项目的过程。 功能并不难，但是确实需要你自己动手才能实现。 近期项目紧张。 如果有时间，我会继续更新，通过，或者Swam等方法实现自动化部署。 感谢您的支持！
所有你想象的一切，皆是现实！
