云效+小皮（nginx） vue项目部署（保姆级）

最新推荐文章于 2025-03-07 16:31:53 发布
最新推荐文章于 2025-03-07 16:31:53 发布
阅读量2.4k 收藏 26
点赞数 43
文章标签： 运维开发 运维 linux nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_51032922/article/details/138571592
版权

云效+小皮（nginx） vue项目部署（保姆级）

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

nginx的部署是热部署，只需要替换文件即可实现部署，因此相比较后端就简单了许多。

一、云效

新建流水线

在这里插入图片描述

选用下图的模板即可在这里插入图片描述

先选择要拉取的仓库以及分支，根据自己的情况选择不同的仓库地址
在这里插入图片描述
删除不需要的环节，主要使用的环节采用下图的即可，如果需要配置测试的话，可以自行配置，此处不进行讲解
在这里插入图片描述

nodejs的配置

主要需要进行修改的就是nodejs的版本以及node运行的代码
在这里插入图片描述
云效的nodejs初始化自带npm，cnpm和yarn，其他的包管理工具需要自行下载，上图所示我需要使用pnpm因此是自行下载，然后使用pnpm进行打包，
注：如果文件nodejs的打包太大的话，会出现内存溢出的现象，设置NODE_OPTIONS=–max-old-space-size=16384，如果还是内存溢出，推荐放弃使用流水线部署。

构建物上传，如果打包之后构建物不在根目录下，需要先cd进入到对应的目录内，因为是vue项目，打包之后一般都是dist文件夹，所以选择dist文件即可，因为我希望后面的包可以顶掉前面的包，我的包名称就采用了固定的名字，这样liunx的命令书写就简单了很多。
在这里插入图片描述

主机部署

选择制品名称的话，选择前面已经打包好的文件
在这里插入图片描述

主机组的配置

第一次部署的话，是没有主机组的，因此，需要先新建一个主机组
点击新建主机组回调转到对应的主机组页面
在这里插入图片描述
如无特殊需求，只修改名称让自己可以找到即可
在这里插入图片描述
新建新的主机
这个地方应该是支持，同时发布到多台服务器上，但是因为我这个地方就只有一台服务器，因此每个主机组内绑定一台主机即可
在这里插入图片描述
因为小皮是部署在自己的服务器上的，因此复制下面的文字，然后粘贴到自己小皮或者nginx所在的服务器上，直接运行即可，他会自己进行下载东西，等到运行完成之后，刷新之后，就可以看淡多出来一台主机
在这里插入图片描述
回到云效，即可选择刚才创建的主机组

下载路径（小皮）

路径为下方圈出的网站目录拼接上dist.tgz
在这里插入图片描述
以上图的网站目录为例，因为路径为/www/admin/localhost_82/wwwroot并且前面设置的打包文件名为dist
因此这个地方就可以填写 /www/admin/localhost_82/wwwroot/dist.tgz

下载路径（nginx）

一般nginx的文件都是放在nginx下的html文件夹下，自己根据自己的情况把上面的/www/admin/localhost_82/wwwroot路径替换到html路径下即可

部署脚本

因为上面的路径为/www/admin/localhost_82/wwwroot因此需要先进入到对应的文件夹，然后，删除dist.tgz外的其他文件，直接解压即可部署完成

cd   /www/admin/localhost_82/wwwroot
find . -mindepth 1 ! -name 'dist.tgz' -exec rm -rf {} \;
tar -xzf dist.tgz

而后直接运行即可

云效流水线docker部署 ：node.js镜像部署VUE项目
专注于计算机研发知识和资讯分享
11-10 2056
镜像构建并推送至阿里云镜像仓库个人版。配置dockerfile。Node.js 构建。
phpstudy 8.1小皮配置vue项目本地域名访问
qq_42221321的博客
11-18 5292
phpstudy 8.1小皮配置vue项目本地域名访问1、安装phpstudy2、phpstudy配置3、问题排查 1、安装phpstudy 1、先下载安装小皮，这里就不做赘述 官网下载地址 2、phpstudy配置 因为我这里只是一个网页的显示，就只启动了apache服务 注意这里的路径，如果是vue项目，要先打包,然后指向dist生成的文件路径，我这里是把dist打包好的文件复制到小皮下 文件目录，注意一定是index.php或者是 index.html 配置完成后，来到设置里检验配置的端口是否可
阿里云部署前端vue项目（云效代码库，流水线）
MWNGTAIQI的博客
09-07 2426
依次点击“分支”->“新建分支”，新建用于开发的分支，建议新建新分支而不直接在master分支上开发项目原因：master分支通常被视为项目的稳定版本基线，是项目“生产就绪”的代码集合，直接在主分支上进行开发会增加引入不稳定代码的风险，从而影响整个项目的稳定性和可靠性，在多个开发人员或团队同时工作时，每个人或每个团队可以在自己的分支上进行独立的开发和测试，而不会相互干扰，通过创建新的开发分支，可以在该分支上提交更改，并通过代码审查流程进行审查，审查通过后，可以将更改合并回主分支，这一过程更加清晰和可控。
如何使用小皮打包部署 SpringBoot+vue项目
2301_82110462的博客
03-07 944
控制台中输入“”后等待执行完毕 控制台无任何报错信息且左侧项目目录中生成dist文件夹表示前台项目打包成功（注：命令输入的文件位置为命令输入位置）dist。
阿里云云效 流水线发布spring cloud项目及Vue项目
qq_31745863的博客
07-01 3305
阿里云云效 流水线发布spring cloud项目及Vue项目
小皮面板 phpstudy(nginx模式)搭建vue 项目 使用 history模式配置详解
qq_21115567的博客
09-02 5952
小皮面板配置vue history
windows使用nginx部署vue项目，另加小皮面板Apache部署
qq_45757927的博客
02-29 1868
启动后在浏览器输入localhost:80，跳转到80是因为我们在nginx.conf文件里配置的是80端口。打开cmd命令行进入该文件夹，输入npm run build，打包完成后会生成一个dist文件夹。把vue项目dist文件夹，复制到nginx文件夹html内，并改名为你自定义的名字。保存后，打开cmd命令行，cd到nginx文件夹下，输入start nginx启动。官网：http://nginx.org/en/download.html。可以看到我们正常跳转到了页面。❗依照下图进行编辑配置。
Docker+Nginx 部署 Vue 项目（保姆级总结）
Awwwze的博客
02-21 4870
一、思路总结 利用 Docker + Nginx 部署 Vue 项目，先将 Vue 项目通过 build 命令构建成一个 dist文件夹，然后将这个文件夹交给 nginx 进行代理（这里利用的是反向代理，作用是可以对外隐藏项目的真实端口），然后编写 Dockerfile文件，在 nginx 基础镜像之上，构建一层属于我们自己的镜像，然后打包，Dockerfile 主要是配置 “vue 项目目录” 和 “nginx的配置文件”，将这两个文件拷贝映射到 nginx 容器内部。编写好 Dockerfile 文件后
Nginx篇 ：反向代理简单部署vue项目，注意事项及常用命令
weixin_73008860的博客
01-10 3425
Nginx反向代理部署前端vue项目，基础流程，注意事项，常用命令等
如何利用宝塔部署前后端分离项目（vue+springboot (保姆级教学)
qq_64264364的博客
06-09 4019
使用宝塔如何部署前后端分离项目
阿里云+nginx搭建静态资源服务器保姆级教程
qq_45604163的博客
09-19 789
阿里云+nginx搭建静态资源服务器保姆级教程安装nginx首先安装编译工具及库文件然后安装 PCRE最后安装 Nginxnginx配置文件 安装nginx 首先安装编译工具及库文件 这里对目录没有要求 //最后显示complete! 且没有报错表示完成 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 然后安装 PCRE // 首先进入安装PCRE的目录，这里选择/user/local/src cd /u
Vue项目部署的实现（阿里云+Nginx代理+PM2）
12-12
最近部署一个Vue项目到阿里云ECS上，因为项目涉及一些跨域请求，所以采用了Nginx代理请求本地的node服务（利用pm2做进程管理）。node服务借助axios设置headers的referer、host转发请求，解决跨域请求问题。 先交代下在阿里云ECS里安装的部署环境：phpstudy（php调试运行大礼包，里面包含nginx、mysql等，还能监控端口占用情况）、pm2（node服务进程管理工具）、node、git等等。 部署过程 拉去GitHub项目代码至root目录下（找到安装phpstudy的WWW目录），构建项目 修改nginx-conf的代理配置、root项配置（指
手把手教你从0搭建部署网站，保姆级教程（nginx部署及宝塔部署）(1)
2401_83739411的博客
05-02 461
其实呢我们是可以直接在腾讯云中登录操作服务器的像这样输密码或者免密登录即可然后我们就可以在里面输入一些linux命令操作服务器了")下载好之后安装即可，然后运行此软件先新建一个连接输入用户名，就是我们刚刚修改的用户名和密码，如果没有改那默认的就是root像这样子，我们就连接成功了。
CI/CD---使用新版云效流水线自动部署前端Vue项目
yuanchangliang的博客
06-22 6218
前端项目也可以使用流水线了，听说我们公司的运维居然不知道怎么弄前端流水线？ 要不要我来教教他，嘿嘿
云效流水线自动部署前端Vue项目
springdk2009的博客
03-17 809
1、除了第一次需要新建流水线，配置脚本外，后续所有的部署只需要提交代码后，点击运行流水线就行。3、当然，你也可以选择jenkins，这就仁者见仁，智者见智了。2、项目代码已经提交到代码仓库，如gitee，github等。2、流水线还可以回滚，此功能太过友好了。1、有一个自己的云服务器。
云服务器vue项目的部署
qq_55269092的博客
01-29 3458
（1）购买服务器 阿里云，腾讯云（我选的腾讯云，薅羊毛，38撸了一年，主要是买来玩玩）,（系统选用的是centos 8.2）。 （2）安装xshell和xftp。（操作云服务器）。 （3）安装nginx
云效流水线Flow部署Vue项目到阿里云ECS
weixin_52519560的博客
12-26 787
之前写了一篇部署SpringBoot项目的文章，既然是前后端分离的项目，那就少不了部署前端。现在继续追加一篇流水线Flow部署Vue项目的文章，记录一下过程。说明一下，我用的是Nginx来部署Vue项目，所以到后面我只是解压放到Nginx配置文件对应的路径下就可以。
阿里云云效部署springboot+vue服务脚本
xiaogg3678的专栏
01-13 381
阿里云云效部署springboot+vue服务脚本
springboot+vue3+mysql+elementplus 设计酒店管理系统
最新发布
03-22
<think>嗯，用户想设计一个基于Spring Boot后端、Vue3前端、MySQL数据库和ElementPlus组件库的酒店管理系统。他们需要完整的教程或示例项目。首先，我需要分析他们可能的需求和现有资源。 用户提到的引用中，有几个相关的项目，比如vue3-admin和Spring Boot 3与Vue 3的集成教程。还有关于级联选择器的数据库设计。这些可以作为参考，整合到酒店管理系统中。 首先，系统架构应该分前后端。后端用Spring Boot处理业务逻辑和数据访问，前端用Vue3和ElementPlus构建界面，数据库用MySQL存储数据。需要确定系统的模块，比如房间管理、订单管理、客户管理等。 接下来是数据库设计。用户提到的childtag表结构可能适用于标签管理，但酒店系统可能需要不同的表，比如房间类型、订单、客户信息等。需要设计符合酒店业务的表结构，比如room表、order表、customer表等，并考虑主键、外键关系。 然后，后端开发部分。使用Spring Initializr创建项目，添加依赖如Spring Web、JPA、MySQL Driver。配置数据库连接，创建实体类，使用JPA注解映射到数据库表。编写Repository接口，利用JPA的CRUD方法。然后创建Service层处理业务逻辑，Controller层提供RESTful API给前端调用。例如，RoomController处理房间的增删改查。 前端开发方面，使用Vue CLI创建项目，安装ElementPlus、Vue Router、Axios等。页面结构可以分路由，比如房间管理、订单管理页面。使用ElementPlus的表格、表单组件展示数据，通过Axios调用后端API获取和提交数据。例如，在RoomManagement.vue中，使用el-table展示房间列表，el-form添加新房间。 权限管理和安全也是需要考虑的，比如用户登录和权限控制，可以使用Spring Security或JWT。但用户没有特别提到，可能暂时不需要深入，但可以建议作为扩展功能。 部署方面，需要打包后端为JAR，前端为静态文件，配置Nginx反向代理，部署到服务器。不过用户可能更关注开发阶段，部署可以作为后续步骤。 用户提供的引用中有示例项目，可以推荐他们参考vue3-admin和提到的书籍，这些资源提供了Spring Boot和Vue3的集成方法，保姆级教程，适合学习。同时，引用4中的级联选择器设计可能在酒店系统的分类管理中用到，比如房间类型层级。 可能用户需要具体的代码示例，比如如何创建实体类、Repository、Controller，以及前端如何调用API。需要给出步骤和代码片段，确保他们能够按照步骤搭建项目。此外，数据库的建表语句也是关键，比如房间表的结构。 还需要考虑前后端的数据交互格式，比如使用JSON，确保接口符合REST规范。前端如何处理响应数据，错误处理等。例如，使用Axios拦截器处理全局错误。 最后，生成相关问题，帮助用户深入理解，比如如何优化性能，如何处理分页，如何实现权限控制等。这些扩展问题可以引导用户进一步学习。</think>### 基于Spring Boot + Vue 3的酒店管理系统构建指南 #### 一、系统架构设计 1. **技术栈选择** - 后端：Spring Boot 3 + MyBatis-Plus + MySQL - 前端：Vue 3 + Element Plus + Axios - 数据库：MySQL 8.0+ - 开发工具：IntelliJ IDEA + VS Code 2. **模块划分** ```mermaid graph TD A[酒店管理系统] --> B[房间管理] A --> C[订单管理] A --> D[客户管理] A --> E[权限管理] ``` #### 二、数据库设计（示例） ```sql -- 房间表 CREATE TABLE `room` ( `id` BIGINT NOT NULL AUTO_INCREMENT, `room_number` VARCHAR(20) NOT NULL, `type` VARCHAR(50) COMMENT '房型', `price` DECIMAL(10,2) NOT NULL, `status` TINYINT DEFAULT 0 COMMENT '0-空闲 1-已入住', PRIMARY KEY (`id`) ); -- 订单表 CREATE TABLE `order` ( `id` BIGINT NOT NULL AUTO_INCREMENT, `room_id` BIGINT NOT NULL, `customer_name` VARCHAR(100), `check_in` DATETIME, `check_out` DATETIME, PRIMARY KEY (`id`) ); ``` #### 三、后端实现（Spring Boot） 1. **项目初始化** - 通过[start.spring.io](https://start.spring.io/)创建项目，选择依赖： ```groovy dependencies { implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'com.baomidou:mybatis-plus-boot-starter:3.5.3.1' implementation 'mysql:mysql-connector-java' } ``` 2. **实体类映射** ```java @Data @TableName("room") public class Room { @TableId(type = IdType.AUTO) private Long id; private String roomNumber; private String type; private BigDecimal price; private Integer status; } ``` 3. **数据访问层** ```java public interface RoomMapper extends BaseMapper<Room> { @Select("SELECT * FROM room WHERE status = #{status}") List<Room> selectByStatus(@Param("status") Integer status); } ``` 4. **RESTful API示例** ```java @RestController @RequestMapping("/api/rooms") public class RoomController { @Autowired private RoomMapper roomMapper; @GetMapping public List<Room> listRooms() { return roomMapper.selectList(null); } } ``` #### 四、前端实现（Vue 3 + Element Plus） 1. **项目初始化** ```bash npm create vue@latest npm install element-plus axios ``` 2. **房间管理组件示例** ```vue <template> <el-table :data="rooms" style="width: 100%"> <el-table-column prop="roomNumber" label="房号"/> <el-table-column prop="type" label="房型"/> <el-table-column prop="price" label="价格"/> </el-table> </template> <script setup> import { ref, onMounted } from 'vue' import axios from 'axios' const rooms = ref([]) onMounted(async () => { const response = await axios.get('http://localhost:8080/api/rooms') rooms.value = response.data }) </script> ``` #### 五、部署建议 1. 后端打包为JAR文件：`mvn clean package` 2. 前端构建静态文件：`npm run build` 3. 使用Nginx配置反向代理[^3]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值