当前位置: 首页 > news >正文

ubuntu服务器部署vue springboot前后端分离项目

上传构建好的vue前端文件

vscode构建vue项目,会生成dist目录

npm run build

在服务器root目录新建/projects/www目录,把dist目录下的所有文件,上传到此目录中

上传ssl证书

上传ssl证书到/projects目录中

配置nginx

编辑 /etc/nginx/sites-enabled/default 配置文件

1.此配置通过http和https访问
server {
# httplisten 80 default_server;listen [::]:80 default_server;# httpslisten 443 ssl default_server;listen [::]:443 ssl default_server;# SSL Settingsssl_certificate /projects/bdjw.work_bundle.pem;#你的证书ssl_certificate_key /projects/bdjw.work.key;#你的key# 域名    server_name bdjw.work www.bdjw.work; # 配置域名 # 代理    location / {root /projects/www; # 前端代码文件位置index index.html;try_files $uri $uri/ /index.html; # 解决vue刷新404的问题}location /api/ {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';add_header 'Cache-Control' 'no-cache';if ($request_method = 'OPTIONS') {return 200;}proxy_pass http://127.0.0.1:8080/; # 反向代理}
}
2.此配置http自动跳转到https
server {
# httpslisten 443 ssl default_server;listen [::]:443 ssl default_server;server_name bdjw.work www.bdjw.work; # 配置域名# SSL Settingsssl_certificate /projects/bdjw.work_bundle.pem;#你的证书ssl_certificate_key /projects/bdjw.work.key;#你的keylocation / {root /projects/www; # 前端代码文件位置index index.html;try_files $uri $uri/ /index.html; # 解决vue刷新404的问题}location /api/ {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';add_header 'Cache-Control' 'no-cache';if ($request_method = 'OPTIONS') {return 200;}proxy_pass http://127.0.0.1:8080/; # 反向代理}
}# HTTP请求自动跳转HTTPS
server {listen 80 default_server;listen [::]:80 default_server;server_name bdjw.work www.bdjw.work; # 配置域名return  301 https://$server_name$request_uri; # 把HTTP的域名请求转成HTTPS
}
部署springboot项目

部署springboot项目

跨域问题

使用nginx反向代理解决跨域问题,就不需要springboot再做跨域设置,两种方式同时使用会有冲突。

相关文章:

ubuntu服务器部署vue springboot前后端分离项目

上传构建好的vue前端文件 vscode构建vue项目,会生成dist目录 npm run build在服务器root目录新建/projects/www目录,把dist目录下的所有文件,上传到此目录中 上传ssl证书 上传ssl证书到/projects目录中 配置nginx 编辑 /etc/nginx/site…...

【python】pandas报错:UnicodeDecodeError详细分析,解决方案以及如何避免

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…...

FlinkModule加载HiveModule异常

HiveModule这个模块加载不出来 加在不出来这个模块&#xff0c;网上查说是要加下面这个依赖 <dependency><groupId>org.apache.flink</groupId><artifactId>flink-connector-hive_${scala.binary.version}</artifactId><version>${flink.…...

计算机硬件---如何更新自己电脑的BLOS

1找官网 例如“我使用的是HP&#xff08;惠普&#xff09;品牌的电脑”我只需要在浏览器上搜索“惠普官网”或“惠普-blos更新” 就可以看到&#xff0c;来自官网中更新blos的信息 2.有些品牌要查序列号该怎么办呢&#xff1f; 有许多方法可以查询&#xff0c;例如&#xf…...

AI算法17-贝叶斯岭回归算法Bayesian Ridge Regression | BRR

贝叶斯岭回归算法简介 贝叶斯岭回归&#xff08;Bayesian Ridge Regression&#xff09;是一种回归分析方法&#xff0c;它结合了岭回归&#xff08;Ridge Regression&#xff09;的正则化特性和贝叶斯统计的推断能力。这种方法在处理具有大量特征的数据集时特别有用&#xff…...

唯众物联网综合实训台 物联网实验室建设方案

物联网综合实训装置 物联网工程应用综合实训台是我公司针对职业院校物联网行业综合技能型人才培养&#xff0c;综合运用传感器技术、RFID技术、接口控制技术、无线传感网技术、Android应用开发等&#xff0c;配合实训台上的433M无线通信设备、ZigBee节点、射频设备、控制设备、…...

深入浅出 Vue.js:从基础到进阶的全面总结

深入浅出 Vue.js&#xff1a;从基础到进阶的全面总结 Vue.js 是一个用于构建用户界面的渐进式框架。它不仅易于上手&#xff0c;还能通过其强大的生态系统支持复杂的应用开发。本文将从基础到进阶&#xff0c;全面总结 Vue.js 的核心概念、常用技术和最佳实践&#xff0c;并提…...

路网双线合并单线——ArcGISpro 解决方法

路网双线合并成单线是一个在地图制作、交通规划以及GIS分析中常见的需求。双线路网定义&#xff1a;具有不同流向、不同平面结构的道路。此外&#xff0c;车道数较多的道路&#xff08;例如&#xff0c;双黄实线车道数大于4的道路&#xff09;也可以视为双线路网&#xff0c;本…...

邮箱验证码功能开发

该文章用于记录怎么进行邮箱验证码开发。 总所周知&#xff0c;我们在某些网站进行注册的适合总是会遇到什么填写邮箱&#xff0c;邮箱接收验证码&#xff0c;验证通过后才可以继续注册&#xff0c;那么这个功能是怎么实现的呢&#xff1f; 一&#xff0c;准备工作 1.1 邮箱…...

2024-07-15 Unity插件 Odin Inspector3 —— Button Attributes

文章目录 1 说明2 Button 特性2.1 Button2.2 ButtonGroup2.3 EnumPaging2.4 EnumToggleButtons2.5 InlineButton2.6 ResponsiveButtonGroup 1 说明 ​ 本文介绍 Odin Inspector 插件中有关 Button 特性的使用方法。 2 Button 特性 2.1 Button 依据方法&#xff0c;在 Inspec…...

根据脚手架archetype快速构建spring boot/cloud项目

1、找到archetype&#xff0c;并从私仓下载添加archetype到本地 点击IDEA的file&#xff0c;选择new project 选择maven项目&#xff0c;勾选create from archetype 填写archetype信息&#xff0c;&#xff08;repository填写私仓地址&#xff09; 2、选择自定义的脚手架arche…...

安灯系统在电力设备制造业中的应用效果

安灯系统作为面向制造业生产现场的专门应用软硬件系统&#xff0c;在电力设备制造企业中发挥着重要的作用。作为精益制造执行的核心工具&#xff0c;安灯系统为企业提供了快速联络生产、物料、维修、主管等部门的功能&#xff0c;以实时掌控和管理生产线状况&#xff0c;实现生…...

代码随想录打卡第二十五天

代码随想录–回溯部分 day 24 休息 day 25 回溯第三天 文章目录 代码随想录--回溯部分一、力扣93--复原IP地址二、力扣78--子集三、力扣90--子集Ⅱ 一、力扣93–复原IP地址 代码随想录题目链接&#xff1a;代码随想录 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0…...

openharmony上传图片,并获取返回路径

适用条件&#xff1a; openharmony开发 4.0 release版本&#xff0c;对应能力API10 一直不断尝试&#xff0c;一会用官方提供的上传文件&#xff0c;一会用第三方库的axios都不行&#xff0c; 一会报错‘没权限&#xff0c;一会报错’路径错误&#xff0c;还有报错‘401参数错…...

git常用命令及git分支

git常用命令及git分支 git常用命令设置用户签名初始化本地库查看本地库状态将文件添加到暂存区提交到本地库查看历史记录版本穿梭 git分支什么是分支分支的好处分支的操作查看分支创建分支切换分支删除分支合并分支合并冲突 git常用命令 设置用户签名 //设置用户签名 git con…...

c# 依赖注入-服务的生命周期

在 C# 中&#xff0c;依赖注入服务的生命周期指的是在应用程序中管理和控制依赖项注入服务对象的生命周期的方式。常见的生命周期包括瞬态&#xff08;transient&#xff09;、作用域&#xff08;scoped&#xff09;和单例&#xff08;singleton&#xff09;三种。 瞬态&#…...

一站式短视频矩阵开发,高效托管!

短视频矩阵系统源码SaaS解决方案提供全面的开发服务&#xff0c;包括可视化视频编辑、矩阵式内容分发托管以及集成的多功能开发支持。 短视频矩阵&#xff1a;引爆您的数字营销革命 短视频矩阵系统是一套多功能集成解决方案&#xff0c;专为提升在短视频平台上的内容创作、管理…...

实践致知第16享:设置Word中某一页横着的效果及操作

一、背景需求 小姑电话说&#xff1a;现在有个word文档,里面有个表格太长&#xff08;如下图所示&#xff09;&#xff0c;希望这一个设置成横的&#xff0c;其余页还是保持竖的&#xff01; 二、解决方案 1、将鼠标放置在该页的最前面闪烁&#xff0c;然后选择“页面”》“↘…...

Leetcode—3011. 判断一个数组是否可以变为有序【中等】(__builtin_popcount()、ranges::is_sorted())

2024每日刷题&#xff08;144&#xff09; Leetcode—3011. 判断一个数组是否可以变为有序 O(n)复杂度实现代码 class Solution { public:bool canSortArray(vector<int>& nums) {// 二进制数位下1数目相同的元素就不进行组内排序// 只进行分组// 当前组的值若小于…...

盲盒一番赏小程序:开启惊喜之旅,探索无限创意!

在这个充满无限想象与惊喜的时代&#xff0c;盲盒已成为连接心灵与梦想的奇妙桥梁。为了将这份独特的乐趣与探索精神传递给每一位热爱生活、追求新鲜的你&#xff0c;我们自豪地推出了“盲盒一番赏”小程序——一个集创意、趣味、互动与社交于一体的盲盒新纪元&#xff0c;邀您…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...