前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

这篇具有很好参考价值的文章主要介绍了前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:部署小程序后台(非云开发)需要:

1.一台云服务器(购买三个月以上,不然域名备案不了)

2.备案了的域名(小程序上线审核非常麻烦,域名一定要提前备案,通过审核大概要十几天)

一、购买服务器,注册域名并备案

阿里云或腾讯云都可,哪个便宜买哪个。腾讯云的轻量服务器就有自带的宝塔面板,免安装。阿里云也有,好好找一下。

1.安装宝塔面板,服务器有可略过。

宝塔Linux面板安装教程 - 2022年2月18日更新 - 7.9.0正式版 - Linux面板 - 宝塔面板论坛

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 什么系统就找对应的命令在终端安装。

2.在云服务器的安全组这里,打开对应端口

端口 作用
8888 宝塔默认端口
80 http默认端口
443 https默认端口
22 ssh工具默认端口
3306 mysql数据库默认端口
xxxx 后端项目端口

3.在宝塔面板的软件商店装下这些东西

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 有些在安装面板的时候就已经安装好了。

3.新建站点

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 填写域名(域名我这里用的是公网IP地址,域名留给接下来的小程序使用,域名和IP地址解析了就行,问题不大),点击确定

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 点击设置,配置ssl证书(ssl证书在云服务器那里有免费的,我这里已经配置过了,仅作演示)

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 部署ssl,把在阿里云申请的证书复制上去

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

二、设置数据库

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 导入.sql文件

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 导入出错可能是数据库版本不一样:[ERR] 1273 - Unknown collation: 'utf8mb4_0900_ai_ci'_微笑的花的博客-CSDN博客_utf8mb4_0900_ai_ci

三、打包后台的jar包

看看用户名和密码

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

打包

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用 

上传jar包

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

这里把小程序后端的jar一起打包了 

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

ssl的jks配置看这里:微信小程序后台部署_weixin_48967642的博客-CSDN博客_微信小程序后端部署

ssl:
   key-store: classpath:stupidkid.top.jks #证书的路径
   key-store-password: s64l1tlafob5a #证书密码,请修改为您自己证书的密码.
   key-store-type: JKS #秘钥库类型
   enabled: true
 

注意:jks文件我放在resource目录下。

数据库用户名和密码要与云服务器的一致。 

打包上传。

四、部署后台

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 配置ssl证书

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 五、打包前台

 生产环境配置:IP地址:端口号前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 打包

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 压缩dist文件夹,上传到前台的目录下,解压

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 在浏览器输入IP地址,部署后台成功

六、部署小程序

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 这里使用到了域名配置ssl。

去微信后台,填域名。

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

 在微信开发者工具

前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用

点击上传。 

微信公众平台扫码体验自己的小程序。

(菜鸟首次部署,请批评指正)

插一个nginx配置教程,本文中没用到:百度安全验证文章来源地址https://www.toymoban.com/news/detail-482305.html

到了这里,关于前后端分离:Spring Boot + Vue + 微信小程序 宝塔面板部署教程自用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】的分享,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地

    2024年02月11日
    浏览(60)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【一】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【一】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢

    2024年02月11日
    浏览(54)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【六】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【六】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢

    2024年02月11日
    浏览(54)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢

    2024年02月10日
    浏览(57)
  • Spring Boot+Vue前后端分离项目如何部署到服务器

    🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 🤖 洛可可白 :个人主页 🔥 个人专栏 :✅前端技术 ✅后端技术 🏠 个人

    2024年04月11日
    浏览(61)
  • 手把手教你搭建Spring Boot+Vue前后端分离

    1 什么是前后端分离 前后端分离是目前互联网开发中比较广泛使用的开发模式,主要是将前端和后端的项目业务进行分离,可以做到更好的解耦合,前后端之间的交互通过xml或json的方式,前端主要做用户界面的渲染,后端主要负责业务逻辑和数据的处理。 2 Spring Boot后端搭建

    2023年04月08日
    浏览(66)
  • Java之Spring Boot+Vue+Element UI前后端分离项目

    typeId : this.typeId, }).then((res) = { this.$router.push(“/”); this.$message.success(“文章发布成功!”); }).catch(() = { this.$message.error(“文章发布失败!”); }); }, handleAvatarSuccess(res, file) { this.imageUrl = URL.createObjectURL(file.raw); this.thumbnail = “http://localhost:9090/img/” + res; }, selectType(typename,id) { t

    2024年04月27日
    浏览(76)
  • SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月12日
    浏览(71)
  • Linux/openEuler系统部署spring boot+vue前后端分离项目(nginx均衡代理)

    可以看我前面的文章 华为openEuler系统安装openjdk并配置环境变量 openEuler系统安装nginx HUAWEI-OpenEuler系统安装MySQL服务器并使用详细步骤 Ubuntu安装MySQL服务器详细步骤 在确定项目可以正常运行的前提下,进行package打出jar包 npm run build 打包成功后在项目文件路径下出现dist文件夹

    2024年03月24日
    浏览(94)
  • SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月11日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包