前后端分离项目部署上线详细教程

简介: 前后端分离项目部署上线详细教程


今天,给大家分享的是,Springboot+Vue项目如何部署上线的详细步骤。

代码编辑器

前端:Webstorm 2021.1.2

后端:IntelliJ IDEA 2021.1.2

所用技术

前端:avue

后端:Springboot

准备工作

  • 1.首先你先需要有一台服务器,直接去各大云厂买一台即可,我这边使用的是腾讯云服务器,2H4G5M的,已经部署了5个项目了,都很流畅,最后需要备案
  • 2.去各大云厂注册个域名,用来访问项目,域名很便宜,几十块钱能买一年的。解析到你的服务器下,域名最后也需要备案。

打包项目

1.在IntelliJ IDEA 2021.1.2以下简称idea中,点击菜单栏中的视图--》工具窗口--》Maven--》打开项目--》生命周期--》双击clean,清除目录中的生成结果。

2.双击下面的package开始打包,等控制台中日志记录运行完之后,会发现此时项目中多了个target的目录,改目录中有个.jar文件就是我们的需要往服务器中传的。

在idea中打包springboot项目还可以使用命令的方式(在终端中定位到当前项目的目录下):

  • mvn claen:清除目录中的生成结果
  • mvn package:打包程序

3.将该文件上传至服务器的指定目录下,我这边传到了/www/wwwroot/hbv目录中,大家可以自定义。

4.打开Webstorm,直接在下面的终端中执行npm run build,等控制台执行完即可。此时你就会发现项目中多了个dist目录,将该目录直接上传到服务器中指定位置,我这边还是传到了/www/wwwroot/hbv目录中,大家可以自定义。

到现在为止,前后端项目都已经打包完成,且已经传到了服务器中(怎么传先不介绍,大家可以用一款免费软件FileZilla,用了好几年了,一直很稳定)

软件界面大致就是这样的,左边客户端,右边服务器,上传:左边文件拉到右边。下载:右边拉到左边,特别简单。

配置nginx

1.我这边比较偷懒,直接在服务器中装了个宝塔面板,可以省好多事,当然nginx也是可视化的。

2.由于我服务器中有多个项目,nginx中的配置文件没必要都展示,所以我就把当前后端分离版的项目配置信息贴出来:

server {
        listen       80;
        server_name  xxxx.com;
 
    location / {
            root   /www/wwwroot/hbv/dist;
         try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        
       location ^~ /api/ {
         proxy_pass http://xx.xx.xx.xx:6666/;
         proxy_connect_timeout 300s;
         proxy_send_timeout 300s;
         proxy_read_timeout 300s;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

关键配置信息说明:

  • server_name:写你的域名即可,通过该域名访问服务器中的项目
  • root:配置的是你前端项目上传的地址,需要制定到dist目录下,请求时自动会找index.html页面
  • proxy_pass:配置的是你后端访问地址,直接写服务器地址加端口号即可,注意端口号别冲突了

在终端启动后端服务

1.在根目录下,通过命令:cd /www/wwwroot/hbv目录下,因为我后端的项目放在了改目录下

2.通过命令:ls查看后端项目是否存在

3.通过命令:nohup java -jar blog-web-2.2.5.jar &启动服务,记得一定要按两下回车

5.最后在浏览器中通过域名就可以访问了。

若是有问题的,可以在留言区留言说明,最后点个在看再走呗~

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
8月前
|
Java 关系型数据库 MySQL
开发环境部署教程
开发环境部署教程
37 0
|
Java 数据安全/隐私保护 Windows
使用阿里云服务器部署若依项目
硕士导师的要求,使用阿里云服务器搭建java环境,部署若依项目并设置外网访问,可随时进行查看,修改,编辑。
|
4天前
|
前端开发 应用服务中间件 网络安全
前端项目部署
前端项目部署
39 0
|
8月前
|
SQL 关系型数据库 MySQL
三步搭建个人网站并发布上线【内网穿透】
在这个个性飞扬的时代,每个人都希望拥有表现自我的平台,而互联网的包容性和广泛性正好契合了这些需求,也让个人博客网站如雨后春笋般涌现。以往搭建个人博客网站耗费颇多,不仅要租用网站服务器,还要有相当的计算机基础,让普通人难以企及。不过随着软件技术的发展,我们已经可以通过几个简单的步骤,在家用电脑上搭建起像样的个人博客网站,并通过cpolar搭建的数据隧道,将其发布到公共互联网上,实现以最低成本建立个人博客网站的目标。今天,我们就为大家介绍,如何用短短三步,建立起一个像样的个人独立网站
131 2
三步搭建个人网站并发布上线【内网穿透】
|
12月前
|
小程序 Java 关系型数据库
java项目部署到linux服务器,微信小程序后台springboot项目部署到腾讯云服务器(图文详解)
java项目部署到linux服务器,微信小程序后台springboot项目部署到腾讯云服务器(图文详解)
507 1
|
前端开发 JavaScript 开发工具
前端图床搭建实践(前端)
前端开发过程中不可避免会用到图片、视频等多媒体物料,常见的处理方案通常会进行动静分离,将图片等资源放置在图床上,除了使用业界常用的图床资源,比如:七牛云、微博图床等,除了借助第三方图床外,我们也可以自己搭建一个图床,为团队业务开发提供更好的基础服务,提升开发体验及效率。本文旨在回顾总结下自建图床的前端部分实现方案,希望能够给有类似需求的同学一些借鉴和方案。
38 0
|
存储 前端开发 JavaScript
前端图床搭建实践(后端)
前端开发过程中常常需要用到的图片等资源,除了使用常见的第三方图床外,我们也可以自己搭建一个私有图床,为团队提供前端基础服务。本文旨在回顾总结下自建图床的后端部分实现方案,希望能够给有类似需求的同学一些借鉴和方案。另外说一下,由于是前端基础建设,这里我们完全由前端同学所熟悉的node.js来实现所需要的后端服务需求。
70 0
|
前端开发 应用服务中间件 Linux
使用阿里云服务器部署前端项目
使用阿里云服务器部署前端项目,完成后可通过服务器域名访问网页
1602 0
使用阿里云服务器部署前端项目
|
自然语言处理 NoSQL 前端开发
若依项目部署详解
大家好,我是小卷,今天给大家带来若依系统的部署
若依项目部署详解
|
Java 网络安全 数据库
SSH框架搭建详细教程
SSH框架搭建详细教程
131 0
SSH框架搭建详细教程