前后端分离宝塔面板部署vue 后端有必要学vue吗
阿里云服务器购买和部署项目图文详解
进行阿里云服务器购买和部署SpringBoot项目的详细流程如下:
首先,进行阿里云账号注册,输入账户名、登录密码和手机号。
其次,完成域名注册和备案,详情请参考阿里云域名购买流程和备案流程。
接着,准备服务器,查阅阿里云服务器简介和采购流程。
在进入网络与安全-安全组后,点击"配置规则",手动添加开放的端口。
接下来安装CentOS宝塔面板,远程连接阿里云服务器,前往宝塔官网进行下载,运行命令后,输入"y"并回车,等待大约2分钟至“Complete!”,即安装完成。
安装完成后,登录宝塔面板,输入公网IP:8888/随机安全入口,输入用户名和密码,根据推荐软件安装流程进行相关设置。
在面板软件安装及环境配置阶段,安装宝塔源码一键部署插件,进行Java的JDK环境配置。宝塔面板会默认安装JDK,无需额外操作,使用默认的JDK版本。
创建站点,设置域名:端口,如www.baidu.com:8088,或者公网ip:端口,如127.0.0.1:8088,添加备注,如项目名称。
进行站点设置,添加反向代理配置,点击站点名称右侧的设置连接,然后点击反向代理,添加反向代理,代理名称为项目名称,目标URL为公网IP/域名转发到的服务器端口。
创建数据库,进入宝塔面板,修改root用户密码,创建数据库并设置数据库名、用户名和密码,保持其他默认设置。
导入数据库表,将本地的数据库导出为.sql文件,通过宝塔面板导入。
进行SpringBoot项目打包,修改配置文件,使用Maven插件打包项目。
使用宝塔面板上传项目,上传jar包和配置文件到网站根目录,运行项目,确保防火墙已关闭并放行端口。
解决项目运行报错,优化端口配置。
部署前后端分离SpringBoot+Vue项目,准备mysql、jdk、tomcat、nginx等,配置数据库、SpringBoot打包、前端Vue打包,进行后端和前端部署。
完成部署后,通过域名或IP/index.html访问部署完成的SpringBoot+Vue项目。
如何使用宝塔面板部署Vue+Springboot前后端分离
前言
在深入探讨如何使用宝塔面板部署 Vue+Springboot前后端分离的过程中,我遇到了一些挑战,也从其他博主的分享中汲取了经验。若依管理系统是一个开源、免费的学习资源,提供了成熟的 Springboot框架。对于服务器部署前端的初学者来说,这是一个实用的起点。在尝试使用宝塔面板部署 Vue+Springboot前后端分离时,我遇到了一些问题,尤其是无法直接使用宝塔面板的前后端分离功能,原因可能与使用Apache服务器有关。
后端部署
在深入解决这个问题之前,我先要分享一个关键点:无法使用宝塔面板的前后端分离功能,因为宝塔面板提示前后端分离不支持Apache。为了解决这个问题,我尝试了不使用前后端分离的方法,这与直接使用命令行运行jar文件的原理类似,只是在宝塔面板中操作。
首先,确保在服务器上建立的数据库配置与后端配置文件(application-druid.yml)中的内容一致。打包项目时,通常有两种方式:jar和war,而若依框架默认打包的是jar文件。
为了进行正确的部署,遵循以下步骤:
确认数据库表和密码与后端配置文件相匹配。反复检查这些配置信息。
使用cd命令进入bin目录,运行clean.bat(如果之前没有打包过,可以跳过这一步,但建议执行)。
运行package.bat,等待打包完成。打包成功后,你将在target文件夹下找到.jar结尾的文件。
将生成的.jar文件上传到服务器中,然后使用cmd运行窗口执行该文件来启动服务。
确保后端端口开放,若依默认使用8080端口。可以使用公网IP+8080的方式访问。
选择路径后,将项目路径上传打包好的.jar文件,并确保端口设置正确。接下来,为后端选择一个域名并提交部署。
前端部署
部署前端之前,需要理解网站通过域名访问而非IP访问的原理。在实际部署中,我们需要建立网站并配置域名。由于当前环境仅支持二级域名,我使用了IP+端口进行访问。
在宝塔面板中添加站点,设置域名、根目录、数据库,最后提交以创建网站。为了使用二级域名,我在URL中加入了IP和端口号。
在网站目录下,通常会有一个运行目录,用于存放前端打包后的文件。若将dist文件夹放在网站目录下,运行目录应设置为"/dist";若将文件内容直接放置在网站目录下,则运行目录应设置为"/"。
在前端部署中,关键步骤包括调整前端环境配置、设置正确的publicPath,并确保前端页面能够正确访问后端服务。使用 Vue2后台管理系统模板时,调整src文件夹下的setting.js文件以匹配后端部署的环境配置。
确认vue.config.js文件中的publicPath是否正确,并在必要时修改。在缺少setting.js文件的情况下,直接在代码中插入相关配置。最后,执行npm run build:prod命令进行生产环境打包,并将dist文件上传到服务器中。
完成上述步骤后,通过IP地址+端口即可访问到前端页面。