前后端分离项目部署到云服务器、宝塔(前端vue、后端springboot)详细教程

一、部署介绍

部署的环境是宝塔(宝塔9.0.0)、阿里云服务器(centos 7.6);前端是Vue3项目、后端是springboot3x、jdk11、数据库有redis、mysql;搜索采用的是es。

由于宝塔面板中可以快速进行环境的配置,所以使用宝塔进行网站的部署。

如果宝塔中的环境,不是自己想要的。下面有jdk和es的部署教程。

云服务器安装jdk的教程:Linux(云服务器)安装jdk教程-优快云博客

云服务器安装es的教程:Linux系统安装es详细教程-优快云博客

二、安装宝塔

1、连接云服务器

首先,我们自己要有一台云服务器。然后连接服务器。

2、安装

连接成功后,打开宝塔官网宝塔面板 - 简单好用的Linux/Windows服务器运维管理面板,点击立即免费安装。

往下滑,找到自己服务器的版本复制命令进行安装

这里可以查看系统

也可以继续往下滑,直接远程进行安装

这里我用的第一种,将复制的命令执行。

安装过程中,遇到需要确定的直接输入y即可。

安装完成后,可以看到宝塔的网址已经用户名和密码。

然后我们需要先把上面的端口在云服务器上的防火墙中开放。

然后复制外网面板地址在浏览器中打开。

初始账号和密码在网址下面

如果账号和密码需要进行修改或者忘记了。连接云服务器,输入bt,按照命令行修改。

进行页面后绑定宝塔官网申请的账号

三、环境搭建

1、环境下载

绑定完成后,会出现下面的界面,直接叉掉即可。

自己需要的环境直接在软件商店里进行安装

这里简单安装几个基本的环境,安装都选择免费的即可,版本可以自己选择,选完后极速安装就行。

nginx

mysql

redis

jdk安装完成后可点击管理选择jdk

2、数据库配置

点击左侧的数据库,然后添加数据库

上传成功后击导入

导入成功后,点击工具就可以看到我们的数据库是否成功导入。如果像下面一样是空白的话,点击从服务器获取即可

四、打包前后端项目文件

1、后端项目打包上传

2、前端项目打包上传

执行命令 npm run build

五、网站网址配置及前端网页显示

有域名直接填写域名,没有的话可以部署在自己云服务器的网址上。比如说,我的云服务器的网址是106.24.65.109。直接输入网址即可,没有配置端口默认是80(访问时不需要加上端口)。如果需要配置端口在网址后加上端口号就行(106.24.65.109:9999)。这样访问时,需要带上端口号。

六、网站端口设置及后端项目启动

1、网站端口开放

把前后端项目对应的端口进行开放

如果这里端口开发后,页面无法访问。还需要去把云服务器上的防火墙,把前后端对应的端口也开放。

2、后端项目启动

首先进入到上传jar包的目录 下,然后执行下面的命令启动后端项目

①启动项目后,与jar包同级的文件夹下会有一个nohup.out文件记录项目的日志,

可以使用tail -f nohup.out实时查看项目运行的日志

nohup java -jar postgraduate-0.0.1-SNAPSHOT.jar &

②启动项目后,与jar包同级的文件夹下没有nohup.out文件记录项目的日志

 nohup java -jar postgraduate-0.0.1-SNAPSHOT.jar > /dev/null 2>&1 &

上面两种启动方法,随便选择一种。

启动成功后,就可以正常使用项目了。

前后端分离项目部署需要分别部署前端后端,通常前端部署在 Web 服务器上,而后端则需要部署在应用服务器上。下面是一个简单的前后端分离项目部署流程: 1. 部署前端:将前端代码打包成静态文件,然后上传到 Web 服务器上。常见的 Web 服务器有 Nginx 和 Apache,你可以选择其中一个来部署你的前端代码。 2. 部署后端:将后端代码打包成 Jar 包或者 War 包,然后将其部署到应用服务器上。常见的应用服务器有 Tomcat 和 JBoss,你可以选择其中一个来部署你的后端代码。 3. 配置反向代理:为了让前端能够访问后端接口,你需要在 Web 服务器上配置反向代理。反向代理的作用是将所有的 API 请求转发到后端服务器上。如果使用 Nginx,可以使用以下配置: ```nginx server { listen 80; server_name example.com; location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location / { root /path/to/your/frontend; try_files $uri /index.html; } } ``` 这个配置中,所有以 `/api` 开头的请求都会被转发到后端服务器上,而其他请求则会返回前端页面。 4. 配置数据库:如果你的后端代码需要使用数据库,你需要在应用服务器上安装并配置数据库。常见的数据库有 MySQL 和 PostgreSQL,你可以选择其中一个来作为你的后端数据库。 5. 配置环境变量:为了保护敏感信息,如数据库密码等,你可以将其存储在环境变量中,然后在代码中读取。你需要在应用服务器上设置这些环境变量,以便你的后端代码能够读取它们。 6. 启动服务:最后,你需要在应用服务器上启动后端服务。你可以使用命令行或者脚本来启动应用服务器,具体方法取决于你使用的应用服务器和操作系统。 以上是一个简单的前后端分离项目部署流程,具体细节还需要根据你的实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值