最近项目进入了即将验收阶段,项目部署是必不可少的。因为某些缘由,咱们把前端项目(Angular4)和后端项目(JavaWeb),因为要部署了四个项目:Angular4(微信端),微信端数据服务,JavaWeb(PC端)*2,而且是放在同一个服务器下。Java项目比较好部署,Tomcat/Jetty均可以轻松部署好。可是Angular部署起来不是那么的容易(固然是对于我这种菜鸟而言),我先说下为何我说不容易的缘由。css
最初时,我用ng build –prod –aot编译打包的时候。这里注意一下,因为如今官方已经内置了,因此打包的时候只须要输入ng build –prod便可了。这里能够以个人项目体积相比较一下:html
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便可完成产品化最小打包。这里我有一点不懂,预编译构建反而比常规构建的体积还要大,但愿大神能够帮忙解答。java
这里就再也不讲如何让项目更小了。nginx
当我把dist里面的文件拷到Tomcat的ROOT文件夹下,打开http://127.0.0.1的时候,熟悉的项目页面展现了出来。习惯性按了F5刷新,发现出现了404错误。在百度找了相关的问题,得出:在第一次进入页面时,跑正常流程以及正常流程都是由Angular的路由机制进行处理。然而若是有刷新操做,那么则是向后端服务发送的请求,若是后端没有把你的请求重定向到index.html(此处是指单页面应用入口),那就会报404找不到页面错误。web
哇,好啰嗦啊。不过至少明白了是什么缘由,知道了什么缘由那就应该想该如何去解决吧!数据库
解决方法1:windows
将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页,他立刻给你一个帮丢失的孩子找到家的一个页面。
很良心,很善良吧,他对公益是作好了,但你的工做要丢了啊。你的页面要是放在公众号里面,一受权就进入了找小孩的页面,大家经理不砍死你就行了。因此这个办法用不用,你本身看着办吧!
因为咱们项目是先后分离,无状态化服务。后端负责数据库操做,把相关接口数据返回给前端,前端只负责处理显示逻辑以及与后端进行交互。频繁转发,
后端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; } } }
要注意的是根目录配置并非location / {},这表明着全部请求都作转发。
好了,就这么多,行不行你本身看着办吧! 欢迎大神指导改正!蟹蟹~