Nginx+Tomcat部署Angular+javaweb项目(解决刷新404)


声明:本文转载自https://my.oschina.net/u/3512877/blog/1583336,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

插播一条广告→2021 ByteDance字节跳动内推←各城市、各方向的岗位都有,大量招人!


最近项目进入了即将验收阶段,项目部署是必不可少的。由于某些原因,我们把前端项目(Angular4)和后端项目(JavaWeb),由于要部署了四个项目:Angular4(微信端),微信端数据服务,JavaWeb(PC端)*2,并且是放在同一个服务器下。Java项目比较好部署,Tomcat/Jetty都可以轻松部署好。但是Angular部署起来不是那么的容易(当然是对于我这种菜鸟而言),我先说下为什么我说不容易的原因。

最初时,我用ng build –prod –aot编译打包的时候。这里注意一下,由于现在官方已经内置了,所以打包的时候只需要输入ng build –prod即可了。这里可以以我的项目体积相比较一下:

ng build : 8,348,761字节 
ng build –aot : 9,232,405字节 
ng build –prod : 1,839,811字节 
ng build –prod –aot : 1,839,811字节

最后可以看出,ng build –prod即可完成产品化最小打包。这里我有一点不懂,预编译构建反而比常规构建的体积还要大,希望大神可以帮忙解答。

这里就不再讲如何让项目更小了。

当我把dist里面的文件拷到Tomcat的ROOT文件夹下,打开http://127.0.0.1的时候,熟悉的项目页面展示了出来。习惯性按了F5刷新,发现出现了404错误。在百度找了相关的问题,得出:在第一次进入页面时,跑正常流程以及正常流程都是由Angular的路由机制进行处理。然而如果有刷新操作,那么则是向后端服务发送的请求,如果后端没有把你的请求重定向到index.html(此处是指单页面应用入口),那就会报404找不到页面错误。

哇,好啰嗦啊。不过至少明白了是什么原因,知道了什么原因那就应该想该如何去解决吧!

  • 解决方法1:

    将Angular的url风格配置成hash风格,这个办法是我见的最多的了,都是从StackOverflow上面抄来抄去的。现在普遍都用H5的pushstate风格了,并且angular官方告诉我们,如果没有足够使用hash风格的理由,还是尽量使用H5风格,您现在还来个#锚点不太合适吧?而且也有人指出如果配置了hash风格,在微信支付或是angular的深路径依然会出404的问题。如果你执意要用,那也没问题,详细可见官方文档

  • 解决方法2:

    既然它报404,你就在tomcat指定错误页为根目录不就好了吗?

    描述:打开Tomcat容器目录,Tomcat/conf/web.xml,移到底部,在</web-app>上加上以下代码:

    <error-page>     <error-code>404</error-code>     <location>/</location> </error-page>

配置完后,重启Tomcat。这下再怎么刷新,页面都展示没问题了。但是我们发现,虽然页面能展示,但是在network标签下,我们是可以看到404的请求的。也就是说,我们刷新的那一刻,angular是找不到页面的,只是被Tomcat当作404指引到了index.html去了。Tomcat把一位误入歧途的人引回了正路,只不过也同时在他身上印下了“他曾经是坏人”的标记。我们先不说配错误页的方法合不合适,先说有这个404的标记会给我们带来什么问题。首先,只要是遇到了有404错误页处理的平台,你肯定是完了。比如微信,他检测到了你出现了404页,他马上给你一个帮丢失的孩子找到家的一个页面。

很良心,很善良吧,他对公益是做好了,但你的工作要丢了啊。你的页面要是放在公众号里面,一授权就进入了找小孩的页面,你们经理不砍死你就好了。所以这个办法用不用,你自己看着办吧!

  • 解决办法3 
    那你页面找不到,我后端就指导你咯!我写个拦截器,或者过滤器。你发送任何请求前,我先重定向到你index.html去,这总没问题吧!当然没问题呀,这就是针对病因找特效药啊~这一切似乎完美解决~但是,我们发现,我们今天的主题都没讲到,肯定得挑这个解决办法的一点问题啊!不然就显得我们的终极大招平淡无奇了。

由于我们项目是前后分离,无状态化服务。后端负责数据库操作,把相关接口数据返回给前端,前端只负责处理显示逻辑以及与后端进行交互。频繁转发, 
后端ps:你都让我不用处理页面了,还让我转发,是不是傻啊?如果你们后端就是不想做转发的工作,你能怎么办?当然是欺负运维啊!

  • 解决办法·终极 
    如果是运维大神,那估计你可以在旁边喝茶就好了。如果是…萌新?那你作为前端,就可以帮(zhuang)忙(bi)了,用nginx啊!反向代理,负载均衡,balabala…

    这里假装你有nginx环境,我这里用到的是windows。打开nginx.conf文件,不写具体描述了,自己看注释,如果不想看的,可以直接去下载该配置文件。

    http {  # 此处省略好多字  server {      # nginx才配使用80端口,其他服务速速离去     listen       80;      # 没啥好解释的     server_name  localhost;      # 指定根目录,由于我的前端项目是直接放在nginx下的html文件夹,所以我这样配     root html;      # 这里其实是由if变过来的,意思是如果uri存在,那就访问uri的资源,如果uri不存在,那就访问该目录下index.html文件。如果看不懂我的解释,可以看这个https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/#front-controller-pattern-web-apps     try_files $uri $uri/ /index.html;      # 这里是配你Tomcat里面的其他java项目,意思是当你访问http://ip/xxx的时候,会到这个代码块里面进行对应操作     location /xxx {         # 这些照着加就好了,无非是获取服务器host/ip相关,一定要加,否则如果你的项目并不是前后端分离,而是SSH/SSM带有jsp或者模板页面的,那就会出现找不到css/js等找不到一切静态资源文件的错误。为什么会报错,因为你看network面板你就知道,他是去访问http://127.0.0.1/xxx/css...而并不是访问服务器的真实ip,所以还是乖乖加上吧!         proxy_set_header Host $host;         proxy_set_header X-Real-IP $remote_addr;         proxy_set_header REMOTE-HOST $remote_addr;         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;         # 去该地址去找项目资源         proxy_pass http://127.0.0.1:8080/xxx;     }   } }

    好了,就这么多,行不行你自己看着办吧! 
    欢迎大神指导改正!蟹蟹~

本文发表于2017年12月01日 12:33
(c)注:本文转载自https://my.oschina.net/u/3512877/blog/1583336,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 1515 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1