当前位置: 首页 > 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会将你的请求转发到后端域名,继而绕过跨域,也能不暴露后端的端口
在这里插入图片描述

相关文章:

  • vue基本理解
  • [网络安全] IIS----WEB服务器
  • wireshark分析数据包:追踪流
  • C语言搭配EasyX实现贪吃蛇小游戏
  • AJAX-认识URL
  • 通过Nacos权重配置,实现微服务金丝雀发布效果(不停机部署)
  • leetcode209长度最小的子数组|滑动窗口算法详细讲解学习
  • Docker 集群配置
  • 如何使用wireshark解析二进制文件
  • ubuntu+nginx+uwsgi部署django项目
  • 【misc | CTF】攻防世界 2017_Dating_in_Singapore
  • Compose | UI组件(十二) | Lazy Layout - 列表
  • 行为型设计模式—命令模式
  • 【issue-halcon例程学习】lines_gauss.hdev
  • 模拟请求ElasticSearch
  • “Material Design”设计规范在 ComponentOne For WinForm 的全新尝试!
  • 【附node操作实例】redis简明入门系列—字符串类型
  • canvas绘制圆角头像
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • el-input获取焦点 input输入框为空时高亮 el-input值非法时
  • leetcode讲解--894. All Possible Full Binary Trees
  • Linux编程学习笔记 | Linux多线程学习[2] - 线程的同步
  • PHP CLI应用的调试原理
  • React-flux杂记
  • seaborn 安装成功 + ImportError: DLL load failed: 找不到指定的模块 问题解决
  • Spark RDD学习: aggregate函数
  • spark本地环境的搭建到运行第一个spark程序
  • vue的全局变量和全局拦截请求器
  • Yeoman_Bower_Grunt
  • 大主子表关联的性能优化方法
  • 对话:中国为什么有前途/ 写给中国的经济学
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 给自己的博客网站加上酷炫的初音未来音乐游戏?
  • 离散点最小(凸)包围边界查找
  • 猫头鹰的深夜翻译:Java 2D Graphics, 简单的仿射变换
  • 如何设计一个比特币钱包服务
  • 用quicker-worker.js轻松跑一个大数据遍历
  • 再次简单明了总结flex布局,一看就懂...
  • Linux权限管理(week1_day5)--技术流ken
  • 积累各种好的链接
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • # Panda3d 碰撞检测系统介绍
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • (145)光线追踪距离场柔和阴影
  • (3)(3.5) 遥测无线电区域条例
  • (附源码)node.js知识分享网站 毕业设计 202038
  • (九)信息融合方式简介
  • (蓝桥杯每日一题)平方末尾及补充(常用的字符串函数功能)
  • (力扣记录)235. 二叉搜索树的最近公共祖先
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (入门自用)--C++--抽象类--多态原理--虚表--1020
  • (译) 函数式 JS #1:简介
  • (原創) 如何將struct塞進vector? (C/C++) (STL)
  • (转)Linux整合apache和tomcat构建Web服务器
  • (转载)从 Java 代码到 Java 堆