如何使用Nginx和dropwizard部署angularjs应用程序前端

我正在开发一个使用angularjs应用程序前端的应用程序,作为后端dropwizard。我计划使用Nginx作为后端dropwizard服务器的网关和资产服务器(图像,也许还有angularjs应用程序)。

我的问题是部署的最佳策略是什么:

  1. 将angularjs与dropwizard后端捆绑在一起并使用nginx作为前端?
  2. 在nginx服务器上部署angularjs应用程序?

提前致谢,


答案 1

我会使用nginx作为API网关,将您的请求路由到后端。

实现作为所有客户端的单一入口点的 API 网关。API 网关通过以下两种方式之一处理请求。某些请求只是代理/路由到相应的服务。它通过扇出到多个服务来处理其他请求。

使用网关,您可以根据需要灵活地更改后端。因为nginx只能作为网关工作,所以他也可以为你提供静态文件(angularjs)。网关具有更多优势,例如日志记录,身份验证等。


答案 2

按照这个答案,您可以使用此nginx配置文件将服务器内部的Dropwizard应用程序从端口8080代理到端口80:

server {
listen 80;

server_name api.example.com;

location / {
    proxy_pass http://127.0.0.1:8080;
    proxy_set_header  Host             $http_host;
    proxy_set_header  X-Real-IP        $remote_addr;
    proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
    }
}

对于您的Angular应用程序,您可以从Dropwizard提供静态资产,也可以通过Nginx设置虚拟主机

作为旁注,请记住从 Dropwizard 应用程序在 mainClass 中配置 CORS:

  @Override
  public void run(Configuration configuration, Environment environment) throws Exception {
    configureCors(environment);
    environment.jersey().register(new HelloWorldResource(template));
  }

  private void configureCors(Environment environment) {
    FilterRegistration.Dynamic filter = environment.servlets().addFilter("CORS", CrossOriginFilter.class);
    filter.addMappingForUrlPatterns(EnumSet.allOf(DispatcherType.class), true, "/*");
    filter.setInitParameter(CrossOriginFilter.ALLOWED_METHODS_PARAM, "GET,PUT,POST,DELETE,OPTIONS");
    filter.setInitParameter(CrossOriginFilter.ALLOWED_ORIGINS_PARAM, "*");
    filter.setInitParameter(CrossOriginFilter.ACCESS_CONTROL_ALLOW_ORIGIN_HEADER, "*");
    filter.setInitParameter("allowedHeaders", "Content-Type,Authorization,X-Requested-With,Content-Length,Accept,Origin");
    filter.setInitParameter("allowCredentials", "true");
  }

推荐