Spring boot+vue打包、上传宝塔面板并配置https
终于把网站搞完了,也终于能够通过域名访问了,这次就简单回顾一下这么多时间的经历,总结一下。
项目地址穆音博客,本文发布原地址在Spring boot+vue打包、上传宝塔面板并配置https
我的开发环境是前端使用vue-admin-template,后端使用Spring boot+mybatis-plus,由于我要根据后端打包的效果做一下前端的配置,所以就先在后端打包。
1.后端打包
后端打包时要注意代理穿透、后端许可的连接的部分。
首先是配置代理穿透:
代理穿透可以写两个允许的域名,我是写的自己要配置的域名加上服务器的ip地址,也可以就选择一个进行配置,不过建议都写上。注意我们前端开发时候是协商端口的,发布时候就不要写端口了,不然限定死了后面可能就连接不上了。
之后是进行application.yml里的配置:
port就是你最开始开发时候的端口信息,之前怎么写,就不用动了。
上下文路径就是前端在连接后端是会全局添加的一个路径,建议和我一样加上这个,因为后面在进行网页配置的时候会同时用要前端后端的配置,如果都是"/"的话两个会打架,所以加上个路径可以有所区分。
ssl是将对后端的访问转成https的协议,如果没有域名就可以不用配置,有的话就到云服务厂商哪里下载ssl的证书,选择给tomcat配置的,下载后放到和application.yml一起的resources目录下边就行。密码就是和文件一起下下来里面的txt文件的值,直接粘贴过来即可。
数据库配置
由于我开发的时候就直接使用的云端的数据库,所以这部分我就直接跳过了,如果开发时用的本地数据库,就把localhost改成服务器的ip地址,数据库的username、密码按照创建数据库时设置的用户名和密码即可。
打包
终于到了打包环节,打包就直接在侧边栏的maven的lifecycle(生命周期)里双击package即可,如果之前生成过jar包就先双击clean再打包
之后在最外面的target目录下会右我们打包生成的jar包,这个就是我们最后要用的jar包(不是那个.jar.origional)
jar包域名配置测试
我们打开宝塔面板,在网站的PHP项目下点击添加站点
之后点击右侧的设置,在弹出的窗口中点击ssl,将自己申请好的ssl证书和密钥分别填入即可。
运行jar
首先我们到安全面板,在防火墙中添加放行我们后端的端口,注意在云服务器厂商处也要添加!保证我们能能够正常访问端口。
点击最右侧的文件,进入我们网站项目的目录下,将jar包上传,完成后点击终端.
我们首先看一下当前有没有正在运行的Java程序,以防造成端口的占用:
//查看正在运行的Java程序id
jps
//结束程序运行
kill <进程ID>
//测试运行
java -jar yourjarname.jar
//持久运行
nohup java -jar yourjarname.jar &
//退出
exit
测试运行后打开域名和相关端口查看,我是用的swagger看有没有配通的,
前面是https加上自己的域名/api/
是我们之前设置的上下文字符,后面是你可以访问的相关界面,能够打开这个说明我们可以后端可以用这个端口号进行使用,接下来就是修改前端的部分代码。
前端配置
前端打包
我使用的是vue-admin-template首先这个不能用正常的npm run build
进行打包,他有一个生产环境的打包npm run build:stage
和发布环境的打包npm run build:prod
两个分别对应最外侧的.env.production和.env.staging,我们要在这里配置为
VUE_APP_BASE_API = 'https://blog.muvocal.com:9999/api'
也就是我们刚才看的那个URL的前面部分。
如果部署时发现资源路径不对,就修改vue.config.js
中的配置文件
publicPath: './' //请根据自己路径来配置更改
相关部分可以到vue-admin-template的官网中构建部分查看。
之后我们使用
# 构建测试环境
npm run build:stage
# 构建生产环境
npm run build:prod
进行打包即可。
打包完成后会在dist文件夹下生成一系列文件,一个文件夹,一个index.html和一个或几个图标。
我们将dist文件夹内的东西直接拖拽上传到之前放jar包的那个文件夹下。如果你直接用的系统生成的文件夹,会有一些初始的html和配置文件,将其全部删除即可。
最终nginx配置
我们再到网站处点开站点的设置,点击弹出的面板中的配置文件,添加以下几个语句:
两个分别是静态的打开网站后直接查看的html,下边是后端的接口的配置,如果之前后端没有配置/api
的话在这里就会很麻烦。
完成配置后即可访问网站。
Spring boot+vue打包、上传宝塔面板并配置https的更多相关文章
- Spring Boot入门——文件上传与下载
1.在pom.xml文件中添加依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht ...
- Spring Boot 在接收上传文件时,文件过大异常处理问题
Spring Boot 在接收上传文件时,文件过大时,或者请求过大,spring内部处理都会抛出异常,并且捕获不到. 虽然可以通过调节配置,增大 请求的限制值. 但是还是不太方便. 之所以捕获不到异常 ...
- 【Vue中的坑】Vue打包上传线上报Uncaught SyntaxError: Unexpected token <
今天在vue打包上传线上后,报一下错误,一下就懵了,这可咋整啊,一如既往的想都没想就开始复制错误,上网开搜 Uncaught SyntaxError: Unexpected token < Un ...
- spring boot:单文件上传/多文件上传/表单中多个文件域上传(spring boot 2.3.2)
一,表单中有多个文件域时如何实现说明和文件的对应? 1,说明和文件对应 文件上传页面中,如果有多个文件域又有多个相对应的文件说明时, 文件和说明如何对应? 我们在表单中给对应的file变量和text变 ...
- Maven配置jar(war)包自动打包上传Maven服务器的配置
Maven配置jar(war)包自动打包上传Maven服务器的配置 创建jar(war)包工程 创建一个maven工程 在工程中穿件一个测试类 配置pom.xml <distributionMa ...
- 【Spring Boot】关于上传文件例子的剖析
目录 Spring Boot 上传文件 功能实现 增加ControllerFileUploadController 增加ServiceStorageService 增加一个Thymeleaf页面 修改 ...
- 基于Spring Boot的图片上传
package com.clou.inteface.domain.web.user; import java.io.File; import java.io.IOException; import j ...
- vue打包上传oss
今天把vue打包之后上传到oss,遇到了一点问题,现在解决了总结一下心得: OSS (Object Storage Service)名为对象存储,配合cdn使用达到静态文件托管加速,提升网站文件访问速 ...
- [转]Spring Boot修改最大上传文件限制:The field file exceeds its maximum permitted size of 1048576 bytes.
来源:http://blog.csdn.net/awmw74520/article/details/70230591 SpringBoot做文件上传时出现了The field file exceeds ...
- Spring Boot 使用 ServletFileUpload上传文件失败,upload.parseRequest(request)为空
使用Apache Commons FileUpload组件上传文件时总是返回null,调试发现ServletFileUpload对象为空,在Spring Boot中有默认的文件上传组件,在使用Serv ...
随机推荐
- 谁会拒绝一个开源的 3D 博客呢?
说到博客大家一定都不陌生,不管你是深耕职场多年的老鸟,还是在学校努力学习的小鸟,应该都有过一段"装扮"博客的经历,比如:放上喜欢的图片.添加炫酷的交互.换上 DIY 的博客主题等等 ...
- Firefox、Edge下无法使用jQuery的css("margin")、css("padding”)和css("border")获取值
今天遇到了浏览器的迷惑行为,在Edge上使用jQuery的css("margin")获取值,发现获取的是空值,换了Firefox也是如此.看了jquery官方原话,发现如下一段话R ...
- Kingpin Private Browser - 隐私保护浏览器,隐身模式、广告拦截做你的私人浏览器
Kingpin Private Browser 是一个功能齐全的浏览器,隐身模式和广告拦截总是启用.它不会记住历史记录.密码或cookie.默认情况下,浏览器使用谷歌搜索(您可以在设置中将其更改为Du ...
- 自己定义jquery插件轮播图
轮播图-html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Spring(Bean详解)
GoF之工厂模式 GoF是指二十三种设计模式 GoF23种设计模式可分为三大类: 创建型(5个):解决对象创建问题. 单例模式 工厂方法模式 抽象工厂模式 建造者模式 原型模式 结构型(7个):一些类 ...
- golang 中的 cronjob
引言 最近做了一个需求,是定时任务相关的.以前定时任务都是通过 linux crontab 去实现的,现在服务上云(k8s)了,尝试了 k8s 的 CronJob,由于公司提供的是界面化工具,使用.查 ...
- 四月十七日Java基础知识点
1.默认构造方法:如果class前面有public修饰符,则默认的构造方法也会是public的.由于系统提供的默认构造方法往往不能满足需求,所以用户可以自己定义类的构造方法来满足需要,一旦用户为该类定 ...
- redis 基于 漏斗算法 实现对 api 的限流
漏斗算法 漏桶算法的原理: 漏桶有一定的容量,给漏桶注水,当单位时间内注入水量大于流出水量,漏桶内积累的水就会越来越多,直到溢出. 就好比大批量请求访问nginx相当于注水,nginx根据配置按照固定 ...
- elasticsearch升级和索引重建。
1.背景描述 2020年团队决定对elasticsearch升级.es(elasticsearch缩写,下同)当前版本为0.9x,升级到5.x版本.es在本公司承载三个部分的业务,站内查询,订单数 ...
- Java学习笔记13
1.Date类 1.1 概述 java.util.Date类表示特定的瞬间,精确到毫秒. 1.2 构造方法 Date类有多个构造方法,部分已经过时. 方法 作用 public Date() 从此刻 ...