How to deploy an angularjs application frontend with Nginx and dropwizard

Question

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,

score 4 · Answer 1 · answered May 26 '15 at 06:58

4

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.

answered May 26 '15 at 06:58

fabwu

642
6
19

The question is either should i deploy only my frontend angularjs in nginx or to bundle it with my back end server? and Why? – Master Mind May 26 '15 at 23:17
When you deploy your frontend in nginx and proxy to the back end you get a more complex environment but you are a lot more flexible to scale your application. On the other hand a monolithic architecture (angular and back end on the same server) is easy to develop and deploy and is address to a small team. But when you use a nginx anyway put the frontend on the nginx. – fabwu May 27 '15 at 12:53

score 2 · Accepted Answer · edited May 23 '17 at 12:17

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

score 1 · Answer 3 · answered May 22 '15 at 14:24

1

Serving static files like your angularjs app from nginx will reduce the load on dropwizard.

EDIT: Turns out dropwizard does have support for serving static files. However, I still believe nginx would do a better job of it.

answered May 22 '15 at 14:24

dOxxx

1,540
1
12
28

score 1 · Answer 4 · answered May 27 '15 at 10:59

1

I'll prefer to deploy angularjs in nxginx because of

Fast serve static content(angularjs )
rarely interaction to back end server(some http calls)

answered May 27 '15 at 10:59

Ravi

2,360
1
15
11

How to deploy an angularjs application frontend with Nginx and dropwizard

4 Answers4

Linked