springboot+vue部署前后端项目

m0_66545700

已于 2024-03-11 22:00:16 修改

阅读量755

点赞数 19

文章标签： springboot vue nginx

于 2024-03-11 21:58:00 首次发布

本文链接：https://blog.csdn.net/m0_66545700/article/details/136577788

版权

前言：

	首先我们
	1.阿里云购买一个服务器
	2.环境准备：
		jdk nginx mysql redis tomcat

小知识：
之前我一直在构思能否使用一个域名是否可以同时部署多个项目，经过一系列实验之后证明确实可以。首先我们在阿里云控制台上添加子域名，(如你的域名叫 aaa.com, 那么就添加二级域名，如: a.aaa.com b.aaa.com c.aaa.com 等等)，然后添加vue项目就可以使用这些子域名，分别运行不同的项目了。

1 导入数据库

	设置好库名，用户名，密码。中文格式设置为 utf-8（因为springboot配置文件中数据库设置的就为 utf-8）

在这里插入图片描述

	创建好数据库，点击导入

在这里插入图片描述

	点击 “从本地上传” 就能从本地打开 .sql 文件，然后导入就可。

在这里插入图片描述

2 打包 jar 包

	点击右上侧 maven ，然后点击 clean ，然后点击 package就可以打包了。最后在 target 下就可以看到 xxx.jar

在这里插入图片描述

注：因为我们的配置文件中数据库库名，用户名，密码要和宝塔中的一致，但是配置文件中数据库配置要和本地数据库一致，并且打包时也会报错。所以可以使用打开 zip 的方式打开该 .jar包，然后修改配置文件中相关信息。

3 导入springboot项目与测试

	点击文件。转到相关的路径，可以点击上传，或者将 jar包直接拖拽到该页面。

在这里插入图片描述

在文件页面点击终端。然后输入以下代码

nohup java -jar xxx.jar -Dserver.address=IP号 >xxx.log 2>&1 &

注：我们上传的配置文件中设置 server.port = 7122，以后启动项目会启动7122端口。同时设置IP号，如果不设置，就会默认在本地(127.0.0.1)执行。

同时我们可以查看xxx.log中项目的启动日志

	启动springboot项目后，可以使用curl测试

curl介绍使用
 curl介绍使用

	curl -d "arg1=params1&arg2=params2" -H "Content-Type: application/x-www-form-urlencoded" -X POST http://localhost:7122/xxx

然后就能就收到数据了。至此后端部署成功

4 导入前端

	点击vue.config.js 在此处修改端口为 7122 (事实上无所谓，我测试过很多次，无没有用，反而要靠反向代理才能正确运行)

在这里插入图片描述

	点击packag.json ，然后使用 build，就会出现 dist文件夹了，dist文件夹就是我们要导入的。（如果之前存在dist，那我们要先删除原先的dist文件夹）

在这里插入图片描述

	点击网站，PHP项目，添加站点。然后我们只需添加“域名”（这个域名可以是ip地址，也可以是我们所创建的子域名），修改“根目录”。点击提交即可。

在这里插入图片描述

创建成功网站之后，点击后面的设置，如果有SSL证书(允许使用https更安全的连接)那就安排上。

	在设置中，我们点击反向代理 - 创建代理 。
	1）点开高级功能
	2）代理名称：随便起个
	3）代理目录：
		在vue中有使用前缀，如 /api/aaa  /api/bbb等。
		然后就使用代理将他们发送到后端启动的IP号之下。
	4）目标URL：
		与代理目录联合说明，
		比如代理目录为： /api/  ，目标URL为：http://10.10.10.10: 7122
			实例：/api/aaa =>(经过代理) http://10.10.10.10: 7122/aaa
			/api/aaa/bbb =>(经过代理) http://10.10.10.10: 7122/aaa/bbb
		但要注意，如果代理目录为 /api，那么解析出来是：http://10.10.10.10: 7122//aaa有时后端无法解析。
	5）发送域名：这里我们不需要修改，正常情况下它应是：$host
	最后我们点击提交即可。

在这里插入图片描述