Vue 项目自动化部署:Coding + Jenkins + Nginx 实践分享

前言

本文详细记录如何使用 Coding (以 Jenkinsfile 为核心) 和 Nginx 部署 Vue 项目,包含完整流程、配置细节及注意事项,为开发者提供一个高效的实践参考。


准备工作

这里借用一个优秀的开源项目做演示:芋道源码/yudao-ui-admin-vue2。
以下是准备工作的相关指引和教程,确保服务器环境和工具安装已完成:

  1. 配置服务器环境,确保安装以下组件:

    • Docker 安装详细教程
    • MySQL 安装详细教程
    • Redis 安装详细教程
    • Coding 全流程自动化部署指南
  2. 安装 Nginx:

    • Nginx WebUI 指南和 Docker 部署

构建 Vue 项目

以下是构建 Vue 项目的详细步骤:

1. 修改项目域名并提交至 Coding 仓库

在下载代码后,需修改项目中的域名配置,然后提交到 Coding 仓库中。例如:


2. 在 Coding 中创建自定义构建计划

创建自定义构建计划,并配置 Jenkinsfile,示例如下:

pipeline {agent anystages {stage('检出') {steps {checkout([$class: 'GitSCM',branches: [[name: GIT_BUILD_REF]],userRemoteConfigs: [[url: GIT_REPO_URL,credentialsId: CREDENTIALS_ID]]])}}stage('安装依赖') {steps {sh 'npm install'}}stage('编译') {steps {sh 'npm run build:dev'}}stage('部署到远端服务器') {steps {script {def remoteConfig = [:]remoteConfig.name = "my-remote-ltby"remoteConfig.host = "${REMOTE_HOST}"remoteConfig.port = 22remoteConfig.allowAnyHosts = truewithCredentials([usernamePassword(credentialsId: "${REMOTE_CRED}",passwordVariable: 'password',usernameVariable: 'userName')]) {remoteConfig.user = userNameremoteConfig.password = passwordstage("通过 SSH 执行命令") {sshPut(remote: remoteConfig,from: 'dist',into: '../d/nginxWebUI/',recursive: true)}echo "部署成功,请访问 http://web.ip.com 预览效果"}}}}}
}

注意事项:

  • 如果服务器内核版本较新,推荐使用的账号和密码登录。使用密钥时,内置的jenkins插件可能不兼容的较新的内核版本。
  • 修改环境变量如: ${REMOTE_HOST}(服务器地址)和 ${REMOTE_CRED}(Coding 凭证)。
  • 如果使用 Vue3 项目,不要使用默认的环境构建,需要修改 Node.js 为较新的版本。
  • 免费版 Coding 构建内存限制为 4G,如果出现网络错误,可能是内存不够。
  • 确保将编译后的 dist 文件上传至 Nginx 的指定目录(../d/nginxWebUI/修改为服务器上nginx放置静态文件的目录)。

3. 运行构建计划

构建成功示例如下:


为当前项目配置 Nginx.conf

1. 查看 Nginx 目录

确认 dist 文件已成功上传至服务器的 Nginx 目录:

2. 配置 Nginx

以下是 nginx.conf 文件的配置示例:

load_module /usr/lib/nginx/modules/ngx_stream_module.so;
worker_processes auto;events {worker_connections  1024;accept_mutex on;
}http {include mime.types;default_type application/octet-stream;# 前端代理server {server_name web.ip.com;listen 80;location / {root /home/nginxWebUI/dist/;index index.html;try_files $uri $uri/ /index.html;  }}# 后端代理server {server_name demo.ip.com;listen 80;location / {proxy_pass http://127.0.0.1:48080;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Host $http_host;proxy_set_header X-Forwarded-Port $server_port;proxy_set_header X-Forwarded-Proto $scheme;}}
}

配置说明:

  • server_name web.ip.com; 指定前端项目域名。
  • listen 80; 监听 HTTP 的 80 端口。
  • root /home/nginxWebUI/dist/; 设置网站根目录。
  • try_files $uri $uri/ /index.html; 确保支持单页应用的路由功能。

3. 重启 Nginx 并访问项目

成功部署后访问效果如下:

至此,自动构建vue项目完成


结语

通过以上步骤,成功实现了 Vue 项目从 Coding 构建到 Nginx 部署的完整流程,本文提供了详细的参考配置及注意事项,适合有类似需求的开发者实践。

“如果此文章对您有帮助💪,帮我点个赞👍,感激不尽🤝!”

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/66399.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Arduino的FPV头部追踪相机系统

构建FPV头部追踪相机:让你置身于遥控车辆之中! 在遥控车辆和模型飞行器的世界中,第一人称视角(FPV)体验一直是爱好者们追求的目标。通过FPV头部追踪相机,你可以像坐在车辆或飞行器内部一样,自由…

C# 服务生命周期:Singleton、Scoped、Transient

文章目录 1、概念:服务生命周期单例 (Singleton) :作用域 (Scoped) :瞬态 (Transient) : 2、对 Scoped 和 Transient 进一步辨析Scoped 生命周期Transient 生命周期选择哪种生命周期 1、概念:服务生命周期 单例 (Singleton) : 整个应用程序生命周期中只有一个实例被创建并共享…

【QT-QTableView实现鼠标悬浮(hover)行高亮显示+并设置表格样式】

1、自定义委托类 HoverDelegate hoverdelegate.h #ifndef HOVERDELEGATE_H #define HOVERDELEGATE_H#include <QObject> #include <QStyledItemDelegate>class hoverdelegate : public QStyledItemDelegate {Q_OBJECT // 添加 Q_OBJECT 宏public:explicit hoverde…

高并发场景下的秒杀系统架构设计与实现

引言 秒杀系统是一种高并发场景的典型应用&#xff0c;广泛存在于电商平台、抢票系统和促销活动中。秒杀活动的特点是短时间内吸引大量用户同时访问并尝试抢购商品&#xff0c;这对系统的高并发处理能力、稳定性和用户体验提出了极高的要求。 在秒杀系统中&#xff0c;常见的…

【渗透测试术语总结】

Top 渗透测试常用专业术语 相信大家和我一样&#xff0c;搞不清这些专业名词的区别&#xff0c;所以我来整理一下。 1. POC、EXP、Payload与Shellcode POC&#xff1a;全称 Proof of Concept &#xff0c;中文 概念验证 &#xff0c;常指一段漏洞证明的代码。 EXP&#xf…

企业网络性能监控

什么是网络性能监控 网络性能监控&#xff08;NPM&#xff09;是指对计算机网络的性能进行持续测量、分析和管理的过程&#xff0c;通过监控流量、延迟、数据包丢失、带宽利用率和正常运行时间等关键指标&#xff0c;确保网络高效、安全地运行&#xff0c;并将停机时间降至最低…

【Vim Masterclass 笔记05】第 4 章:Vim 的帮助系统与同步练习(L14+L15+L16)

文章目录 Section 4&#xff1a;The Vim Help System&#xff08;Vim 帮助系统&#xff09;S04L14 Getting Help1 打开帮助系统2 退出帮助系统3 查看具体命令的帮助文档4 查看帮助文档中的主题5 帮助文档间的上翻、下翻6 关于 linewise7 查看光标所在术语名词的帮助文档8 关于退…

Zookeeper是如何解决脑裂问题的?

大家好&#xff0c;我是锋哥。今天分享关于【Zookeeper是如何解决脑裂问题的?】面试题。希望对大家有帮助&#xff1b; Zookeeper是如何解决脑裂问题的? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Zookeeper 通过一系列的机制来防止和解决脑裂&#xff08;sp…

【C++】const关键字_运算符重载_继承

目录 Const关键字 常量 常量指针 参数传递 返回值 成员函数 const作用域 运算符重载 继承 继承同名静态成员函数 构造和析构的调用顺序 多重继承 菱形继承&#xff08;二义性&#xff09; 虚继承的工作原理 友元 常&#xff08;成员&#xff09;函数 Const关键字…

QT-窗口嵌入外部exe

窗口类&#xff1a; #pragma once #include <QApplication> #include <QWidget> #include <QVBoxLayout> #include <QProcess> #include <QTimer> #include <QDebug> #include <Windows.h> #include <QWindow> #include <…

Java(day4)

二维数组 静态初始化 动态初始化 练习 public class test1 {public static void main(String[]args){int arr[][]{{22,66,44},{77,33,88},{25,45,65},{11,66,99}};int sum0;for(int i0;i<arr.length;i){int a0;for(int j0;j<arr[i].length;j){sumarr[i][j];aarr[i][j];…

「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统

本篇教程将实现一个模拟火车票查询系统&#xff0c;通过输入条件筛选车次信息&#xff0c;并展示动态筛选结果&#xff0c;学习事件处理、状态管理和界面展示的综合开发技巧。 关键词 条件筛选动态数据展示状态管理UI交互查询系统 一、功能说明 模拟火车票查询系统包含以下功…

Git 仓库清理方法

方法一&#xff1a;删除 Git 仓库 1. 删除 .git 文件夹 # Linux/Mac rm -rf .git# Windows rd /s /q .git2. 删除整个项目 直接删除项目文件夹&#xff0c;然后重建一个新的。 注意&#xff1a;删除后&#xff0c;使用 git init 重新初始化一个干净的仓库。 方法二&#x…

粒子的动力学和约束

本文先介绍单粒子的力学(mechanics of a particle),然后再介绍粒子系的力学(mechanics of particle system),最后介绍约束(constraints)。 1. 单粒子的动力学 从原点出发有一个失径,记为 r \bm{r} r,速度矢量记为 v \bm{v} v,则: v = d r d t ( 1.1 ) \bm{v} = \frac{…

Cherno C++学习笔记 P50 C++当中的动态库

在上一篇文章当中我们学习了C当中是如何使用静态库的&#xff0c;这一篇我们会讲一下如何使用动态库&#xff0c;并同样用GLFW这个已有的库来举例子。 有了静态库的经验&#xff0c;其实动态库就好理解和使用多了。这两者的区别是&#xff0c;静态链接发生在编译的时候&#x…

基于GAN和RL的思想来训练对话生成

Paper https://arxiv.org/pdf/1701.06547.pdf 基于GAN和RL的思想来训练对话生成 Implementation https://github.com/jiweil/Neural-Dialogue-Generation/tree/master/Adversarial

Linux-Ubuntu之裸机驱动最后一弹PWM控制显示亮度

Linux-Ubuntu之裸机驱动最后一弹PWM控制显示亮度 一&#xff0c; PWM实现原理二&#xff0c;软件实现三&#xff0c;正点原子裸机开发总结 一&#xff0c; PWM实现原理 PWM和学习51时候基本上一致&#xff0c;控制频率&#xff08;周期&#xff09;和占空比&#xff0c;51实验…

1.Python浅过(语法基础)

1.简介 Python是一种面向对象的解释型高级编程语言&#xff0c;是强类型的动态脚本语言。 解释型语言跨平台性比编译型语言&#xff08;如c语言&#xff09;好。 print("hello world")2.Bug,Debug 多看&#xff0c;多思考&#xff0c;多尝试、查资料、记录 3.prin…

C 语言函数指针 (Pointers to Functions, Function Pointers)

C 语言函数指针 {Pointers to Functions, Function Pointers} 1. Pointers to Functions (函数指针)2. Function Pointers (函数指针)2.1. Declaring Function Pointers2.2. Assigning Function Pointers2.3. Calling Function Pointers 3. Jump Tables (转移表)References 1. …

C++泛型编程:函数模版定义、函数模版调用,与普通函数调用区别

泛型编程&#xff1a;这个是一种编程范式&#xff0c;他的目的是编写适合多种数据类型的代码。 函数模版&#xff1a; template<typename t> 函数的定义 我们来结合代码理解一下内容&#xff0c;首先定义好函数&#xff0c;然后我们通过方式来调用下&#xff0c;有两…