服务器部署前后端项目-SQL Father为例

hello~大家好哇,好久没更新博客了。现在来更新一波hhh

现在更新一下部署上的一些东西,因为其实有很多小伙伴跟我之前一样,很多时候只是开发了,本地前后端都能调通,也能用,但是没有部署到服务器试过,包括其中nginx的转发等等,很多存在不理解的地方,这一期我主要打算来讲这一部分。可能讲的不是很详细,也可能存在忽略的新手视角的看法,所以如果有问题,可以不妨直接评论,我看到的话会回答的哈(及时性可能就没那么快了)~~

现在我就以sql-father为例,因为刚好最近在部署这个项目,其实之前我也部署过另外一个,叫若依,只不过没有写成文档的形式,且当时也比较懵懵懂懂,只是知道能完成就行了。

当然,这次也很感谢这位作者@lemon-giser,他写的博客其实很详细了,我也是在这个基础上进行更新(主要是想节省一些工作量hhh,具体参考的博客地址放在最下面了)。

1.项目地址

1.1 github

前端地址:https://github.com/liyupi/sql-father-frontend-public

后端地址:https://github.com/liyupi/sql-father-backend-public

1.2 gitee

前端地址:https://gitee.com/liyupi/sql-father-frontend-public

后端地址:https://gitee.com/liyupi/sql-father-backend-public

2.打包

首先这里要先配置好环境哦~这里我就不过多讲解了。一般我后端会用idea,前端会使用vscode。

这里需要先把包先git下来或者直接下载也是可以的

2.1 前端

前端打开后,先安装依赖,使用指令yarn install(如果提示没有yarn,先npm下载一下)

然后这里有个地方要修改下配置(改完后记得ctrl+s保存):

image-20230827233248917

然后就可以打包啦~~

使用指令yarn run build会生成一个dist文件夹。

这里先给它压缩一下,方便传到服务器,也可以不用hhh。

2.2 后端

后端的话我使用idea打开的。

这里也是需要改动一点东西的,因为如果不是在本地运行的话,在服务器启动会报错。

参考解决方案地址:https://github.com/liyupi/sql-father-backend-public/issues/28

image-20230827233718139

然后就是修改配置文件中的数据库地址啦

image-20230827233921656

这里记得改哦,因为要部署到线上环境,所以我就弄成prod了

image-20230827234007823

接下来就是开始打包(这里你得有maven)

然后双击install,就可以开始打包啦(如果部署到线上,有个test地址那里报错了,就把昨天test文件夹删了就可以)

image-20230827234126948

2.3 放置到服务器

打包好后的前后端:

image-20230827234425132

image-20230827234452752

然后就可以上传到服务器啦~~

3.安装环境配置

3.1 前端

运行前端需要Web容器,如tomcat、nginx等。这里用的nginx。

注意这里nginx的版本,我这里使用的是1.19.8,我当时用的1.21好像填写那个配置是会报错的,所以这里注意哈

nginx的安装教程很多,这里贴一个。https://juejin.cn/post/6844904144235413512

3.2 后端

运行后端需要Java环境。

Linux部署Java环境,网上教程也很多。https://blog.csdn.net/qq_43329216/article/details/118385502

注意:tar解压可能会丢文件,比如没有jre文件,我这里就遇到了,解决方法就是先在本地解压在上传到服务器,当然也有其他更好的办法。

准备数据库,参考上方第3步.

3.3 数据库

打开MySQL,运行项目提供的SQL语句。我这里用的HeidiSQL(使用navicat也可以)。

注意:这里mysql版本是5.7。似乎5.6.5版本以下不支持datetime类型,会失败。

还有就是如果字符提示超了,可以把那些varvhar(1024)和varvhar(512)的改小点,改成varchar(255),bitint改成int。(当然这只是我的解决方法hhh,根据错误去百度搜也有很多解决方案啦)

image-20230404175312159

在这一步可以直接连接到服务器的数据库,建表插数据。后端项目修改一下配置即可

4.部署

先把前后端包传上去哈~地址随便你定就好了。

注意如果你是云端的服务器,你这里要提前开放端口,比如这里监听的是888端口,就开这个就可以

首先就讲下后端的部署吧。

当然,如果有必要,我觉得可以指定地址去运行哈

  1. 命令 java -jar sql-father-backend-0.0.1-SNAPSHOT.jar
  2. 测试页面是否正常运行
  3. 停掉后端,改为热启动的方式运行。nohup java -jar sql-father-backend-0.0.1-SNAPSHOT.jar > out.log &

Linux nohup 命令详解 https://juejin.cn/post/7014115562595254285

前端部署:

nginx安装好后,就是改配置啦。由于我是用宝塔安装的nginx,有可视化界面,所以我就用可视化界面改啦

讲解:

listen是你的监听的端口(还记得前端打包填的地址吗)

server_name是你的服务器地址

还有就是localtion / 里面的root后面/www/wwwroot/sqlFather/sqlfather-frontend这里是我的前端包放置的位置哈

然后下面的location /api这个就不用动哈,如果你后端也是部署在本地,那这个localhost就不用动了

server
{listen 888;server_name 192.168.200.218;index index.html index.htm index.php;location / {root /www/wwwroot/sqlFather/sqlfather-frontend;index index.html index.htm;}location /api {proxy_pass http://localhost:8102/api;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Real-PORT $remote_port;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;proxy_cookie_path / /;proxy_set_header Cookie $http_cookie;proxy_cookie_flags ~ nosecure samesite=strict; }access_log  /www/wwwlogs/access.log;
}

然后就可以啦。

输入你的ip:888就可以访问前端啦。

结尾

至此项目就搭建完毕了,主要麻烦的地方在环境配置那块。环境搭好了,以后再部署项目非常快。

参考的博客:

Linux服务器部署前后端项目-SQL Father为例

nginx转发问题

登录失效问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/115305.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GraphQL渗透测试案例及防御办法

什么是GraphQL GraphQL 是一种 API 查询语言,旨在促进客户端和服务器之间的高效通信。它使用户能够准确指定他们在响应中所需的数据,从而有助于避免有时使用 REST API 看到的大型响应对象和多个调用。 GraphQL 服务定义了一个合约,客户端可…

NPM 常用命令(一)

目录 1、npm 1.1 简介 1.2 依赖性 1.3 安装方式 2、npm access 2.1 命令描述 2.2 详情 3、npm adduser 3.1 描述 4、npm audit 4.1 简介 4.2 审计签名 4.3 操作示例 4.4 配置 audit-level dry-run force json package-lock-only omit foreground-scripts …

如何使用FormKit构建Vue.Js表单

表单是现代网页开发的重要组成部分,创建表单通常是一项耗时且繁琐的任务。这就是FormKit的用武之地;它是一个功能强大的现代表单构建库,旨在帮助开发人员轻松高效地创建表单。 在本文中,我们将探讨使用FormKit的好处,并…

管理类联考——逻辑——汇总篇——知识点突破——形式逻辑——联言选言——定义

角度——本质定义 联言 联言命题是断定两种或两种以上事物情况同时存在的命题,用“A并且B”表示,逻辑符号为A ∧ B。 若“A ∧ B”为真,表明A是真的,同时B也是真的。 【定义】联言命题是表示若干判断同时成立的命题。 【刻画】…

字符和字符串的库函数模拟与实现

前言: 相信大家平常在写代码的时候,用代码解决实际问题时苦于某种功能的实现,而望而止步,这个时候库函数的好处就体现出来了,当然个人代码编写能力强的可以自己创建一个函数,不过相当于库函数来说却是浪费了…

MVC、MVP、MVVM的成本角度结合业务,如何考虑选型?一文了解方方面面

大家都知道,使用架构的目的是使程序模块化,做到模块内部的高聚合和模块之间的低耦合,使得程序在开发的过程中,开发人员只需要专注于一点,提高程序开发的效率。那么MVC、MVP、MVVM,该怎么选?在什…

飞桨花滑骨骼点动作识别比赛记 2

基于 PaddleVideo 的花滑骨骼点动作识别 2s-AGCN配置文件节点流配置文件 2s-agcn_ntucs_joint_fsd.yamlMODEL 字段DATASET 字段PIPELINE 和 INFERENCE 字段OPTIMIZER 字段 agcn2s.pygraph输入通道数 骨骼流 Dataset 和 Pipeline配置文件DATASETPIPELINE 源码skeleton.pyskeleto…

【python爬虫】5.爬虫实操(歌词爬取)

文章目录 前言项目:寻找周杰伦分析过程代码实现重新分析过程什么是NetworkNetwork怎么用什么是XHR?XHR怎么请求?json是什么?json数据如何解析?实操:完成代码实现 一个总结一个复习 前言 这关让我们一起来寻…

自动化的驱动力,工控机助您实现智能生产!

“智能工厂建设如火如荼,部分成果已经落地,在大规模资金投入的市场催化下,海尔、海信等制造企业通过智能工厂手段推进生产效率成倍增长的新闻层出不穷。在工业4.0时代,“中国制造2025”战略中,智能工厂构建都是其中不可…

python评分卡模型

信用风险计量模型可以包括跟个人信用评级,企业信用评级和国家信用评级。人信用评级有一系列评级模型组成,常见是A卡(申请评分卡)、B卡(行为模型)、C卡(催收模型)和F卡(反…

Kubernetes(K8s 1.28.x)部署---超详细

目录 一、基础环境配置(所有主机均要配置) 1、配置IP地址和主机名、hosts解析 2、关闭防火墙、禁用SELinux 3、安装常用软件 4、配置时间同步 5、禁用Swap分区 6、修改linux的内核参数 7、配置ipvs功能 二、容器环境操作 1、定制软件源 2、安…

项目-IM

tim-server tim-server启动类实现CommandLineRunner接口,重写run()方法 run()方法开启一个线程,创建zk持久父节点,创建临时顺序子节点,将netty-server信息写入 1.1 用户登录 1.2 gateway向认证授权中心请求token 1.3 从zookee…

完整开发实现公众号主动消息推送,精彩内容即刻到达

🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师…

Java小项目|拼图小游戏|黑马

项目技术需求 Java基础 基本if、forio流File集合JFrame【看得懂就行】 项目素材以及打包exe: 链接:https://pan.baidu.com/s/1rPazJezTwS9O6e8BoYNIYA?pwd6666 项目运行截图 项目来源 哔哩哔哩-黑马程序员上 哔哩哔哩-黑马程序员下 项目介绍&…

SQLPro Studio for Mac:强大的SQL开发和管理工具

SQLPro Studio for Mac是一款强大的Mac上使用的SQL开发和管理工具,它支持各种数据库,包括MySQL,PostgreSQL,SQLite等。使用 SQLPro Studio,您可以轻松地连接和管理您的数据库,执行SQL查询和脚本&#xff0c…

机器学习——KNN回归

1、前提知识: 回归:可以理解为拟合,就是根据训练数据的趋势,对输入数据进行预测。KNN回归:是一种有监督学习,因为需要提供目标数据(target) 2、案例: 用KNN回归拟合sin…

如何让ESP8266恢复出厂设置

1,安装python,2.7或者更高版本 2,运行:get-pip.py 3,运行:pip install esptool 4,运行的指令:esptool.exe --port COM3 erase_flash, 如果报错 就改成这样的命令试试&am…

【业务功能篇90】微服务-springcloud-检索服务-ElasticSearch实战运用-DSL语句

商城检索服务 1.检索页面的搭建 商品检索页面我们放在search服务中处理&#xff0c;首页我们需要在mall-search服务中支持Thymeleaf。添加对应的依赖 <!-- 添加Thymeleaf的依赖 --><dependency><groupId>org.springframework.boot</groupId><artifa…

QSqlDatabase(2)实例,QTableView显示数据库表数据

目录 前言 1、实现的功能 2、具体的代码实现 前言 想了解QSqlDatabase基本知识的&#xff0c;以及增删改查的用法&#xff0c;可以浏览上一篇文章&#xff1a; QSqlDatabase&#xff08;1&#xff09;基本接口&#xff0c;以及(增删改除)的简单实例_Ivy_belief的博客-CSDN…

从钉钉到金蝶云星空通过接口配置打通数据

从钉钉到金蝶云星空通过接口配置打通数据 对接系统钉钉 钉钉&#xff08;DingTalk&#xff09;是阿里巴巴集团打造的企业级智能移动办公平台&#xff0c;是数字经济时代的企业组织协同办公和应用开发平台。钉钉将IM即时沟通、钉钉文档、钉闪会、钉盘、Teambition、OA审批、智能…