当前位置: 首页 > news >正文

只用一台服务器部署上线(宝塔面板) 前后端+数据库

所需材料

工具:安装宝塔面板服务器至少一台、域名一个
前端:生成dist文件(前端运行build命令)
后端:生成jar包(maven运行package命令)

准备:

打开宝塔面板,点击进入软件商店安装:nginx、mysql
进入终端输入命令自动安装java
yum install -y java-1.8.0-openjdk*

开始

前端

点击添加前端站点
在这里插入图片描述

在这里插入图片描述

输入自己的域名,不输入端口则默认80端口

添加完成后会自动生成网站目录,点击目录可跳转,删除目录中原有文件,并将前端dist文件夹中所有文件上传到本目录
在这里插入图片描述
在这里插入图片描述

这样前端就部署好了

后端

在/www/wwwroot/目录中新建文件夹,在新建的文件夹中上传已有的jar包
在这里插入图片描述

点击添加java项目,选择刚刚上传的jar包,然后会自动填写下面的信息,根据自己的需求修改,项目端口为后端设置运行的端口,项目执行命令为java的运行路径、程序运行时的内存限制等、最后加上一行命令 --spring.profiles.active=prod使得程序运行在生产环境中并提交
在这里插入图片描述

这样你的后端也部署好了,提交后程序会自动启动

mysql数据库

点击添加数据库,输入你的数据库名称,用户名会自动与数据库名一致,设置你的密码,访问权限可以修改为指定ip,然后填写你自己本地的公网ip即可在自己电脑连接服务器的数据库,更方便操作数据库
在这里插入图片描述

解决前端刷新404的问题

然后可以配置前端nginx,打开之前部署的前端,点击左侧配置文件,在文件中添加以下代码,使所有的路由都指向index.html文件,解决前端打开后跳转如果刷新就出现404的问题。

location / {try_files $uri $uri/ /index.html;}

在这里插入图片描述

使用nginx反向代理解决前端跨站访问后端的问题

保存后再次点击添加站点,输入后端访问的域名,直接提交。
点击左侧反向代理,添加反向代理,代理目录是 / 根目录,目标url修改为 http://127.0.0.1:【后端访问端口】
这样当前端向后端域名发起请求时,会将请求发到nginx服务器,然后nginx会将你的请求转发到后端域名,继而绕过跨域,也能不暴露后端的端口
在这里插入图片描述

http://www.lryc.cn/news/293215.html

相关文章:

  • 《Pandas 简易速速上手小册》第8章:Pandas 高级数据分析技巧(2024 最新版)
  • 计算机网络_1.6.2 计算机网络体系结构分层的必要性
  • 跟着cherno手搓游戏引擎【18】抽象Shader、项目小修改
  • 每日OJ题_算法_模拟②_力扣495. 提莫攻击
  • freertos 源码分析二 list链表源码
  • Peter算法小课堂—Dijkstra最短路算法
  • Python 读取和写入包含中文的csv、xlsx、json文件
  • 【算法】利用递归dfs解决二叉树算法题(C++)
  • 计算机网络_1.6.1 常见的三种计算机网络体系结构
  • XML传参方式
  • Pyecharts炫酷散点图构建指南【第50篇—python:炫酷散点图】
  • 关于爬取所有哔哩哔哩、任意图片、所有音乐、的python脚本语言-Edge浏览器插件 全是干货!
  • 压力测试工具-Jmeter使用总结
  • [cmake]CMake Error: Could not create named generator Visual Studio 16 2019解决方法
  • 2024美赛数学建模D题思路分析 - 大湖区水资源问题
  • 2024 高级前端面试题之 HTTP模块 「精选篇」
  • 【Linux C | 网络编程】netstat 命令图文详解 | 查看网络连接、查看路由表、查看统计数据
  • Python爬虫存储库安装
  • 用函数求最小公倍数和最大公约数(c++题解)
  • 鲜花销售|鲜花销售小程序|基于微信小程序的鲜花销售系统设计与实现(源码+数据库+文档)
  • 三.Linux权限管控 1-5.Linux的root用户用户和用户组查看权限控制信息chmod命令chown命令
  • Jmeter学习系列之四:测试计划元素介绍
  • LeetCode.1686. 石子游戏 VI
  • 【硬件产品经理】锂电池充电时间怎么计算?
  • Oracle篇—普通表迁移到分区表(第五篇,总共五篇)
  • 作为开发人的我们,怎么可以不了解这些?
  • 基于 Echarts 的 Python 图表库:Pyecahrts交互式的日历图和3D柱状图
  • web应用课——(第四讲:中期项目——拳皇)
  • Python爬虫http基本原理
  • iOS17使用safari调试wkwebview