部署前分离后端+应用程序 [英] Deploying a decoupled front + backend of an application

问题描述

我已经写了使用两个完全解耦组件的Web应用程序：

I've written a web app using two completely decoupled components:

1. 是基于该广场框架和服务的请求的API
   类型： / API / * 任何客户端
。

2. 根据 AngularJS A脱钩前端使用咕噜打造
建

1. An API that is based off the Place Framework and serves requests of type: /api/* to any client.
2. A decoupled front end based on AngularJS built using grunt build

现在，前端会谈到 API ，但我想这两个单位要部署一个代理之后，像 Nginx的，可以代理请求到相应组件。例如，我想所有的 / WEB / * 请求送达了包含所有客户端源代码（JS / HTML /等）和所有的web目录在 / API / * 请求被代理到我的播放架构的服务器（我们需要的路径传递到服务器，以确保正确的路被回）到返回所有API相关的数据。例如，像 GET domain.com/api/users 的要求进行内部代理到 GET 127.0.0.1:9000/api/users。

Now, the front end talks to the API but I'd like both of these units to be deployed behind a proxy, something like nginx that can proxy incoming requests to the respective component. For example, I'd like all the /web/* requests to be served off a web directory containing all the client side source (js/html/etc.) and all the /api/* requests to be proxied to my Play framework server (we will need to pass on the path to the server to make sure the right paths are served back) to return all the API related data. For example, a request like GET domain.com/api/users should be internally proxied to GET 127.0.0.1:9000/api/users.

我已经看到了一些网上讨论这个，我还是想通过你们来运行它，看看它是这种部署的最佳方法。

I've seen some discussions online about this and I'd still like to run it through you guys to see which is the best approach for this kind of deployment.

最后，我想一个面向服务的架构，我想的灵活性，进一步脱钩的事情。

Eventually, I'd like a service oriented architecture and I'd like the flexibility to decouple things even further.

推荐答案

我已经构建并部署播放框架+ AngularJS应用，发现Nginx的是一个伟大的方法。

I have built and deployed Play Framework + AngularJS apps and found nginx to be a great approach.

Nginx的也给你来处理更多的服务，您的应用程序架构的增长增长轨道。例如，您可能会为添加一个专门的服务/ API /用户/ * 同时保持标准的服务，为所有其他 / API / * 路线。

Nginx also gives you a growth path to handle more services as your app architecture grows. For example, you might add a dedicated service for /api/user/* while keeping the standard service for all other /api/* routes.

在某些时候你可能需要立即去一个商业产品，但对我的需求和可预见的未来，nginx的是惊人的。

At some point you might need to go to a commercial product but for my needs for now and the foreseeable future, nginx is amazing.

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

The relevant part of my nginx config is:

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;
    }
}

这里的关键部分是 /资产 URI空间。因为你完全独立打包AngularJS应用你可能会有所不同。我的角应用是游戏应用程序的 /应用/资产/ JavaScript的文件夹中。有优点和缺点，这（我很喜欢你保持它完全独立的想法）。我受够了这种 /资产块被允许的nginx直接服务于静态内容，因为它似乎pretty傻游戏服务完成时的nginx做了精细的工作。

The key part here is the /assets URI-space. Yours will probably be different because you package your AngularJS app completely independently. My angular app is within the Play app's /app/assets/javascripts folder. There are pros and cons to this (I quite like your idea of keeping it completely separate). What I've done with the /assets block is allowed nginx to serve the static content directly, as it seems pretty silly for Play to serve that when nginx does a fine job.

这不是在您的方案，但对别人有游戏内的所有内容，对于上述服静态资产策略来工作，因此相关的，在部署过程中需要解开公共从> 按

It's not so relevant in your scenario but for others that have everything within Play, for the above serving-static-assets strategy to work, the deployment process needs to unpack the public directory from the archive made by play dist, something like this (an excerpt from my bash deployment script):

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

有关您的特定情况下，像下面可能是一个良好的开端：

For your particular scenario, something like the below is probably a good start:

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;
    }
}

这篇关于部署前分离后端+应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！