How to deploy an angularjs application frontend with Nginx and dropwizard

I'm developing an application using angularjs application frontend having as backend dropwizard. I'm planning to use Nginx as gateway for the backend dropwizard server and as an asset server (images and maybe the angularjs application).

My question is what is the best strategy for deployement:

Bundling angularjs with the dropwizard backend and using nginx as frontend?
Deploying angularjs application on the nginx server?

Thanks in advance,

Juan P. Prado

Following this answer You can use this nginx configuration file in order to proxy the Dropwizard application inside your server from port 8080 to port 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;
    }
}

For your Angular application you can either serve static assets from Dropwizard or set a virtual host via Nginx

As a side note, remember to configure CORS in your mainClass from your Dropwizard application:

  @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");
  }

I would use the nginx as a API Gateway which route your requests to your backend.

Implement an API gateway that is the single entry point for all clients. The API gateway handles requests in one of two ways. Some requests are simply proxied/routed to the appropriate service. It handles other requests by fanning out to multiple services.

With a Gateway you have the flexibility to change your backend as you like. Because the nginx works only as a gateway he can also serve your static files (angularjs). A gateway has more advantage like logging, authentication etc.

I'll prefer to deploy angularjs in nxginx because of