1.做一个小系统,使用了springboot+vue 基础框架参考这哥们的,直接拿过来用,链接https://github.com/smallsnail-wh/interest

前期的开发环境搭建就不说了,太多了,自己找吧。

2.发布部署

将开发好的前端vue代码 执行 npm run build 默认会生成dist文件夹(里面都是一些js文件)+index.html文件,留着后面备用

nginx

nginx安装好之后,start nginx.exe 直接启动,在浏览器中输入localhost出现如下信息代表安装成功(默认是80端口可以省略,如果你修改成了其他端口,是要带上端口号的)

将vue生成的dist文件夹和index.html整体拷贝到nginx/html下面,如图

如果你的不是index.html文件名臣,需要在conf文件夹下的nginx.conf文件修改成相应的文件名,比如:我的就是index_prod.html

location / {
root html;
index index_prod.html index_prod.htm;//按照实际的文件名进行修改

}

再次输入localhost就可以看到你开发的前端程序了。

后段tomcat,war包部署,

先将后段打成war包,放在tomcat下的webapps文件夹下(tomcat端口要跟开发时候的springboot端口保持一致)

server:
port: 8080//比如我的是8080
servlet:
context-path: /wh 将上述文件放进去之后,启动tomcat,
浏览器重输入localhost:8080/inform(war包名称)/,出现未授权,是因为springboot有拦截器,出现下面的页面就代表后端搭建完成。可以

至此,前后端都搭建完成啦,但是前端还是无法访问后端的,因为nginx还需要一些设置
 

#context-path: /wh 这个wh是我在application.yml 下面servlet的配置信息

location /wh {
proxy_pass http://localhost:8080/inform;#这个一定要带上你的war包名称,不然无法访问哦
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
# root html;
# index index.html index.htm;
}

Nginx 重新加载配置信息 nginx -s reload

再次访问,登录验证,发现能够成功连接前后端了。

然而登陆没问题,登录之后刷新浏览器,就会出现404的错误,加上这句try_files $uri $uri/ /index_prod.html; 就解决了

location / {
root html;
index index_prod.html index_prod.htm;
try_files $uri $uri/ /index_prod.html;

}

至此前后端部署完成

我的完成配置信息如下:

 server {
listen 80;#前端端口
server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / {
root html;
index index_prod.html index_prod.htm;
try_files $uri $uri/ /index_prod.html;#解决登录之后刷新404 } location /wh {
proxy_pass http://localhost:8080/inform;#前端能够访问到后端
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
# root html;
# index index.html index.htm;
}

springboot+vue前后端分离,nginx代理配置 tomcat 部署war包详细配置的更多相关文章

  1. SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题

    原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...

  2. Springboot+vue前后端分离项目,poi导出excel提供用户下载的解决方案

    因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...

  3. SpringBoot,Vue前后端分离开发首秀

    需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有SpringBoot,lombok,SpringData JPA,Swagger,跨域,前端有Vue和axios 不了解这些技术的可以去入门一 ...

  4. SpringBoot +Vue 前后端分离实例

    今天下了Vue,想试一试前后端分离的实现,没想到坑还不少,这里就记录一下我遇到的坑和我的代码: 一.Vue的下载安装:从网上找就好了,没什么问题,除了下载以后,要把镜像库改成淘宝的,要不然太慢了. 二 ...

  5. SpringBoot+Vue前后端分离项目,maven package自动打包整合

    起因:看过Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,我早想这样玩玩了. 1. 建立个maven父项目 next 这个作为父工程,next Finish ...

  6. Jeecg-Boot 2.0 版本发布,基于Springboot+Vue 前后端分离快速开发平台

    目录 Jeecg-Boot项目简介 源码下载 升级日志 Issues解决 v1.1升级到v2.0不兼容地方 系统截图 Jeecg-Boot项目简介 Jeecg-boot 是一款基于代码生成器的智能开发 ...

  7. SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(一)

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异. 笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方 ...

  8. Nginx+Springboot+Vue 前后端分离 解决跨域问题

    1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...

  9. springboot vue前后端分离 跨跨域配置

    public class CustomCorsFilter extends OncePerRequestFilter { @Override protected void doFilterIntern ...

随机推荐

  1. 解决thinkPHP3.2.3使用Smarty模板后无法使用系统常量问题

    https://blog.csdn.net/u014520745/article/details/52029411 在ThinkPHP/Library/Think/View.class.php 输出模 ...

  2. Git-命令行-删除本地和远程分支

    命令行方式 Git Bash: 切换到要操作的项目文件夹 命令行 : $ cd <ProjectPath> 查看项目的分支们(包括本地和远程) 命令行 : $ git branch -a ...

  3. C# .NET MD5 HASH

    using System; using System.Security.Cryptography; using System.Text; namespace AAA { /// <summary ...

  4. 函数中不能对全局变量进行修改,想要修改全局变量需要在变量前面加global

    # def change_name(name):#     global school    #     school = "Mage Linux"#     print(&quo ...

  5. javascript+html5+canvse+3d俄罗斯方块

    javascript+html5+canvse+3d俄罗斯方块 必须使用支持html5的浏览器打开,比如firefox,chrome 得分:0速度:1000 // 你的浏览器不支持 <canva ...

  6. Chromium(Chrome) frame structure detail

    1. Chromium VS Chrome Chromium is an open-source Web browser project started by Google, to provide t ...

  7. flask教程

    http://docs.jinkan.org/docs/flask/ https://dormousehole.readthedocs.io/en/latest/ https://m.w3cschoo ...

  8. PTA币值转化

    include<stdio.h> include<math.h> int n,s=0; int main(void){ int i,j,k,p=1,flag=1; int f( ...

  9. Excel 2016 密码保护破解

    Excel 2016的密码保护可以区分为几个: 文件密码保护(Excel中叫做工作簿保护) 文件打开权限密码 文件修改权限密码 工作表保护 关于各个保护密码的设置方式请查阅其他资料,我的情况是之前自己 ...

  10. spark2.1源码分析2:从SparkPi分析一个job的执行

    从SparkPi的一个行动操作入手,选择Run–Debug SparkPi进入调试: F8:Step Over F7:Step Into 右键Run to Cursor Ctrl+B 查看定义 导航– ...