vue+springboot前后端分离项目部署到windows服务器全部流程

vue+springboot前后端分离项目部署到windows服务器

最近看了若依的前后端分离的vue项目,代码撸了一遍之后想要将服务器和前端打包部署到本地windows中,记录自己的部署

一,后端部署


目录结构:
在这里插入图片描述
项目工程下的pom文件是整个项目的父pom工程文件,其他的模块pom中都会声明parent文件是pom.xml并且pom.xml中有定义了工程中的所有module


1.1给多模块项目打jar包

此项目后端使用的springboot + maven的技术栈
并且在admin.pom中配置了如下代码
spring-boot-maven-plugin是SpringBoot提供的一个插件,用于把程序打包成一个可执行的jar包。

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

若依的项目文档中让用户去运行项目下bin目录下的package.bat脚本,说运行之后会将项目jar包打到ruoyi-admin模块下的target目录下,我去看了下package.bat的脚本如下

@echo off
echo.
echo [信息] 打包Web工程,生成war/jar包文件。
echo.

%~d0
cd %~dp0

cd ..
call mvn clean package -Dmaven.test.skip=true

pause

这段脚本十分简单
%~d0 cd %~dp0 是cd到当前脚本执行的目录下
cd… 就到了项目的第一级目录下执行maven命令
call mvn clean package -Dmaven.test.skip=true 这段脚本的意思是执行 maven的clean命令和package命令并且忽略单元测试

-DskipTests,不执行测试用例,但编译测试用例类生成相应的class文件至target/test-classes下。
-Dmaven.test.skip=true,不执行测试用例,也不编译测试用例类。

在pom文件中配置如下配置也可以跳过单元测试

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-surefire-plugin</artifactId>
    <configuration>
        <skipTests>true</skipTests>
    </configuration>
</plugin>

我们也可以自己使用maven打jar包:
在这里插入图片描述

这里使用的是idea运行maven命令,在命令行敲maven命令是一样的效果 先双击clean清理打过的jar包然后双击控制台打印出buildingsuccess 就成功了:
有人在package命令的时候报错 可以尝试先clean 在install 然后右键项目Maven -> Reimport 之后在运行package
在这里插入图片描述
绿框部分也打印出了jar包位置

其他的module的target目录下也对打出对应的module的jar包,但是我们只需要上面路径下的ruoyi-admin.jar就好了,它内部集成了其他模块,因为我们在ruoyi-admin.pom下的dependencies中引用了其他模块

(看到这有人可能发现ruoyi-admin.pom下并没有引用ruoyi-system.pom,那是因为ruoyi-admin引用了ruoyi-framework,ruoyi-framework引用了ruoyi-system)

1.2 运行和停止jar包

因为我们的项目中引用了springboot的插件:

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

所以打出来的jar包是可执行的jar包 只需要到 /ruoyi-admin/target 目录下双击ruoyi-admin.jar就可以启动了
也可以在命令行使用

//命令行运行jar包
java -jar ruoyi-admin.jar  
//或者新建一个bat脚本,设置jvm参数运行jar包
set JAVA_OPTS=-Xms256m -Xmx1024m -XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=512m
java -jar %JAVA_OPTS% ruoyi-admin.jar

这里用 jps 命令发现项目启动成功,接口也都可以访问:
在这里插入图片描述

想要停止jar包的服务只需要运行 如下命令

taskkill /PID 8940 -t -f

22520是 jps 命令查找的项目进程pid, -f代表强制执行
在这里插入图片描述


二,前端部署

2.1 前端vue项目打包

若依的文档中交打包前端是运行下面的命令

# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

其中run后面的参数是在前端项目根目录下的 package.json 中定义的,包括我们运行项目时的 npm run dev 也是在此文件下定义的
在这里插入图片描述
构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件


2.2 前端vue项目发布到nginx

(解决发布后,后端接口404问题)(解决进入页面后刷新页面nginx404问题)

然后我们使用nginx来发布前端项目:
首先下载nginx然后解压到对应目录

将打包好的 dist文件夹 复制到html路径(任何路径都可以)
然后打开 nginx目录 下的 conf目录 中的 nginx.conf 找到server配置

server {
        listen       80; 
        server_name  localhost;
        location / {
            root   html/dist;
            index  index.html index.htm;
        }
    }
  1. listen 80; 表示监听的端口是80,可以自定义其他端口,也可以加上IP地址,如,listen 127.0.0.1:8080;
  2. server_name localhost; 定义网站域名,可以写多个,用空格分隔。
  3. location / {
    root   html/dist;  //这里是我们dist文件夹的相对路径,定义网站根目录,目录可以是相对路径也可以是绝对路径
    index  index.html index.htm; //定义站点的默认页(会找到上面目录下的此网页为默认页)。
    }
    

之后启动nginx
在nginx目录下双击nginx.exe就启动成功了


在我兴奋的访问localhost:80的时候,前端vue项目疯狂报接口404,找不到接口
我去群里问大神:大神说:
在这里插入图片描述
但是我转念一想:这不对啊!
我这种前后端都在同一个服务器上的项目可以解决 但是前后端如果不在一个服务器上这种方式显然不可行,nginx.conf一定有一个配置方式解决前端项目部署到nginx中接口访问404的问题

经过我的一直查找,找到了如下配置:

server {
        listen       80; 
        server_name  localhost;
        location / {
            root   html/dist;
            index  index.html index.htm;
			try_files $uri $uri/ /index.html;
        }
		location /prod-api/ {
			proxy_pass http://localhost:8082;
			proxy_set_header Host $HOST;
			rewrite "^/prod-api/(.*)" /$1 break;
		}
    }


网上location和下面rewrite属性中的prod-api都直接是 /api/ ,这个是项目接口访问的路径 由于ruiyi项目在.env.production中配置了接口访问路径是 /prod-api/ 所以我的配置是这个,各位可以根据自己的接口访问前缀自行设置

在这里插入图片描述


之后在nginx目录下输入 nginx -s reload命令重启nginx

然后在输入localhost:80可以成功进入页面了

但是当我按 f5刷新 时又出现了问题
在这里插入图片描述
刷新后出现了 404 not found nginx/XXX

经过查找我加入了这个配置成功解决 try_files $uri $uri/ /index.html;(上面配置里有)

在这里插入图片描述
再次 nginx -s reload重启nginx后 f5刷新界面就没有任何问题了

2.3 nginx命令详解

下面给大家分享一下nginx启动 ,停止, 重启等命令

cmd进入nginx的目录下:

//启动nginx
start nginx 
//检查nginx是否启动成功命令(检查nginx及其所有子线程)
tasklist /fi "imagename eq nginx.exe" 
//关闭或停止最后一次运行的nginx
nginx -s stop
//完整有序的停止最后一次运行的nginx
nginx -s quit
//完全停止所有nginx及其子线程
taskkill /f /t /im nginx.exe

下面我们要注意这样一个问题():*

我们在启动nginx时可能会出现这样的情况就是你多次执行了启动nginx操作,但是我们在关闭nginx时如何将你所启动的nginx全部关闭呢?

下面我们举一个例子进行说明:请添加图片描述
这里我执行了三次启动nginx的操作,然后通过查看发现自己确实是启动了三次nginx,那么,我如何将nginx全部关闭呢?

注意: 这里我们要想将所启动的nginx全部关闭只可使用taskkill命令对开启的nginx进行关闭,结果如下图所示:
请添加图片描述
**解释:**为什么只可使用taskkill关闭所启动的nginx,为什么不能使用nginx -s sop 和

nginx -s quit关闭所启动的nginx呢?

执行结果如下图:
请添加图片描述
我们同样

先执行了三次启动nginx的操作,

并且通过查询可以看到当前所启动的nginx为三个。

接下来,我们对所启动的nginx进行关闭:首先,我们先执行一次nginx -s stop操作,操作成功,通过再次查询我们可以看到成功关闭了一个nginx。

但当我们再次执行nginx -s stop操作时,就会提示错误。

原因就是:当我们执行启动nginx操作时,无论是启动了一次还是启动了多次,其所对应的logs文件中只会生成一个nginx.pid文件,如下图所示:

请添加图片描述

但是,当我们执行过一次nginx -s stop 或 nginx -s quit时,它在将一个nginx关闭后,同时,也会将logs中的nginx.pid 文件删除掉,所以当你再次执行nginx -s stop 关闭操作时,就会报错,所报错误为找不到nginx.pid文件。

总结:我们在多次执行了开启nginx操作后,要想将所开启的多个nginx全部关闭,只能采用使用taskkill停止或关闭,即:taskkill /f /t /im nginx.exe

  1. 在启动nginx后,关闭nginx时,出现pid找不到的解决方案

答:

首先,在logs下新建一个nginx.pid文件

然后,在cmd命令行输入命令:nginx -c conf/nginx.conf

  1. 在启动nginx后,关闭nginx时,出现pid非法的解决方案

在cmd命令行输入命令:nginx -c conf/nginx.conf


原文连接:https://blog.csdn.net/qq_43228403/article/details/123076602

相关推荐

中杯超大杯中间的新选择——vue2.7+vite+ts实践

Vue详解知识概括

使用vuepress从零开始搭建我的技术文档|已部署到线上

JavaScript中一些流行的模块、vite快速搭建、vue3简梳理

从0搭建Vue3组件库之Icon组件

什么?都2022年了,你还在一遍又一遍重复写form表单?

Vue3 中如何加载动态菜单?

vue源码解读十: 响应式对象

vue|运行 npm run xxx 的时候发生了什么?

【一库】semver:语义版本号标准 + npm的版本控制器🧲

试着换个角度理解低代码平台设计的本质

Vite 也可以模块联邦

vue3 写个task list,带你了解基础用法

The Last Naruto

从零开始搭建一个VUE项目 三种方式

Vue3+Node实现一个WebSocket即时通讯聊天室

Vue与React对比(基础篇) : 一、Hello World

Vue3 + TypeScript 开发一个 ProTable(第二弹)

Vue中怎么自动注册组件、过滤器?

理论+实践,彻底掌握Vue自定义指令