一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署(一)

本文涉及的产品
.cn 域名,1个 12个月
简介: 一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署

思维导图


🌟前言


日常开发项目上线或者部署个人博客网站,都离不开线上服务器部署应用。本文带你学会线上部署应用。以腾讯云轻量应用服务器部署SpringBoot、Vue项目为例。


🌟云服务器配置


域名配置


1.进入到轻量应用服务器控制台,选中域名。如下图所示


ff919c1be5d895306342fc31f65415fe_48c5460a34c64a678ed89abd3db924a9.png


2.如果是首次购买域名,点击添加域名。之后点击添加域名解析



3.此时是A记录,主机名前方命名根据个人需要起名称。一定要勾选实例



端口开放-防火墙配置


1.找到服务器中的防火墙配置,进行开发端口。



2.添加规则。进行端口号添加即可。但是平常不使用ssh登录时,尽量关闭22端口,为了服务器安全。



🌟JDK安装及配置


这里我在linux中的/usr/local/下创建了software文件夹用于后续文件的上传。


1.上传JDK包到linux中,我这里采用的是xftp。



2.通过tar -zxvf jdk-8u171-linux-x64.tar.gz进行解压。这里我已经提前安装过就不再演示了。


3.通过vim /ect/profile配置环境变量。vim的使用方法大家可网上查阅,这里不进行赘述。注意JAVA_HOME的路径为你jdk安装的路径。



4.通过source /ect/profile使环境变量生效。


5.通过java -version验证是否安装成功。



🌟Nginx安装以及配置


1.安装依赖。


yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel


2.上传nginx包,并使用tar -zxvf nginx-1.13.7.tar.gz 解压。需要服务器开放80端口。



3.进入到配置文件目录/usr/local/nginx/conf。这里注意nginx默认安装目录为/usr/local/nginx。


cd /usr/local/nginx/conf


4.修改配置文件。vim nginx.conf。其中红框部分为新增或者修改内容。


解释:

  • upstream部分为你服务器的ip地址+后端项目的访问端口。lbs命名相当于变量名,随意即可。
  • server中的location第一个是接口代理地址配置。proxy_pass中//后的名称要和你上方upstream后的名称一致。
  • server中的location第二个location是前端项目路径的地址配置。写在root处即可。

d9977c2b27142ac7c6d631d64bf60958_b9918cbc2a564a5b81cfa1538280e937.png


5.重新启动nginx加载配置文件,使其生效。


./nginx -s reload

目录
相关文章
|
2天前
|
监控 JavaScript 数据可视化
建筑施工一体化信息管理平台源码,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。
智慧工地云平台是专为建筑施工领域打造的一体化信息管理平台,利用大数据、云计算、物联网等技术,实现施工区域各系统数据汇总与可视化管理。平台涵盖人员、设备、物料、环境等关键因素的实时监控与数据分析,提供远程指挥、决策支持等功能,提升工作效率,促进产业信息化发展。系统由PC端、APP移动端及项目、监管、数据屏三大平台组成,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。
|
26天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
110 13
|
1月前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
2月前
|
分布式计算 关系型数据库 MySQL
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型 图像处理 光通信 分布式计算 算法语言 信息技术 计算机应用
63 8
|
2月前
|
存储 运维 安全
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施,可以保证Spring Boot项目的配置管理在专业水准上,并且易于维护和管理,符合搜索引擎收录标准。
55 2
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
43 0
|
3月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
208 1
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
135 62
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
133 2
|
2月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
下一篇
开通oss服务