angularjs-部署应用程序的解耦前端

我使用两个完全分离的组件编写了一个Web应用程序:

>基于Place Framework并提供以下服务的API:
输入:/ api / *到任何客户端.
>使用grunt构建的基于AngularJS的去耦前端

现在,前端与API进行通信,但我希望将这两个单元都部署在代理后面,例如nginx,它可以将传入的请求代理到各个组件.例如,我希望从包含所有客户端源代码(js / html / etc.)和所有/ api / *请求的Web目录中提供所有/ web / *请求,并将其代理到我的Play框架服务器(我们将需要传递到服务器的路径以确保提供正确的路径)以返回所有与API相关的数据.例如,像GET domain.com/api/users这样的请求应在内部代理到GET 127.0.0.1:9000/api/users.

我已经在网上看到了一些有关此问题的讨论,但我仍然希望通过你们进行讨论,以了解哪种是这种部署的最佳方法.

最终,我想要一个面向服务的体系结构,并且希望可以灵活地进一步分离事物.

最佳答案
我已经构建并部署了Play Framework AngularJS应用,并发现nginx是一种很好的方法.

随着应用程序架构的增长,Nginx还为您提供了一条处理更多服务的增长之路.例如,您可以为/ api / user / *添加专用服务,同时为所有其他/ api / *路由保留标准服务.

在某些时候,您可能需要购买商业产品,但就我现在和可预见的未来而言,nginx令人赞叹.

我的nginx配置的相关部分是:

server {
    listen       80;

    # Without this, Play serves the assets from within it's bundled jar. That's
    # fine and works but seems unnecessary when nginx can serve the files directly.
    location /assets {
        alias /app/live/my-play-app-here/active/public;
    }

    location / {
        proxy_pass            http://localhost:9000;
        proxy_set_header      X-Real-IP  $remote_addr;
    }
}

这里的关键部分是/ assets URI空间.您可能会有所不同,因为您完全独立地打包了AngularJS应用.我的角度应用程序位于Play应用程序的/ app / assets / javascripts文件夹中.这有优点和缺点(我非常喜欢您将其完全分开的想法).我对/ assets块所做的操作允许nginx直接提供静态内容,因为当nginx做得很好时,Play却无法提供静态内容.

在您的情况下,它并不重要,但是对于其他在Play中具有所有功能的用户来说,要使上述服务静态资产策略起作用,部署过程需要从play dist制作的档案中解压缩公共目录,例如(从我的bash部署脚本中摘录):

    unzip lib/$SERVICE_BASE_NAME.$SERVICE_BASE_NAME-$VERSION.jar "public/*"

对于您的特定情况,类似以下的内容可能是一个好的开始:

server {
    listen       80;

    location /api {
        proxy_pass            http://localhost:9000;
        proxy_set_header      X-Real-IP  $remote_addr;
    }

    location / {
        alias /app/live/my-angularjs-app-here/active/public;
    }
}

转载注明原文:angularjs-部署应用程序的解耦前端 - 代码日志