Angular4应用与Dropwizard API同域名独立部署技术咨询

Hey there! Let's break down your problem into two practical parts: first, fixing the static resource integration snag you hit with Dropwizard, then walking through how to deploy both services under the same domain independently.

Part 1: Fixing Dropwizard Static Resource Integration for Angular 4 #

Since you’ve already tried common solutions, let’s focus on easy-to-miss details that often cause this failure:

• Verify Asset Configuration Paths: Ensure your Dropwizard config.yml points directly to Angular’s built dist folder (this is where Angular outputs production-ready files after running ng build --prod). Example config:

  assets:
    mappings:
      - /app/* -> /app/
    overrides:
      /app/ -> /absolute/path/to/your/angular/dist/
  

  Double-check the path—relative paths can be tricky if your Dropwizard app runs from a different directory.

• Handle Angular's HTML5 Mode: If your Angular app uses HTML5 routing (the default for Angular 4), Dropwizard needs to forward all non-API requests to index.html (otherwise, refreshing an Angular route will throw a 404). Add this resource class to your Dropwizard app:

  @Path("/")
  public class AngularRouteForwarder {
      private final String angularIndexPath;
  
      // Inject the path to your dist/index.html from config
      public AngularRouteForwarder(String angularIndexPath) {
          this.angularIndexPath = angularIndexPath;
      }
  
      @GET
      @Path("{path:.*}")
      public Response forwardToIndex(@Context HttpServletRequest request) {
          String requestPath = request.getRequestURI();
          // Skip API routes to avoid interfering with your Dropwizard endpoints
          if (requestPath.startsWith("/api/")) {
              return Response.status(Response.Status.NOT_FOUND).build();
          }
          return Response.ok(new File(angularIndexPath)).build();
      }
  }
  

  Then register it in your Dropwizard application's run method:

  @Override
  public void run(YourAppConfiguration config, Environment env) {
      String angularIndex = config.getAssetsConfiguration().getOverrides().get("/app/") + "index.html";
      env.jersey().register(new AngularRouteForwarder(angularIndex));
  }
  

Part 2: Same-Domain Independent Deployment (Reverse Proxy Approach) #

If you’d rather keep the Angular and Dropwizard services separate, using a reverse proxy like Nginx is the most reliable way to host both under the same domain. Here’s how to set it up:

1. Start Both Services:

   • Serve your Angular 4 app: Use ng serve --prod (for testing) or host the dist folder directly with Nginx/Node.js serve package. Let’s say it runs on localhost:4200.
   • Start your Dropwizard API: Ensure it’s running on a separate port, e.g., localhost:8080, with all endpoints prefixed with /api/.

2. Configure Nginx as Reverse Proxy:
   Create an Nginx server block that routes requests based on path:

   server {
       listen 80;
       server_name yourdomain.com; # Replace with your actual domain
   
       # Route all root requests to Angular
       location / {
           proxy_pass http://localhost:4200;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           # Fix Angular HTML5 route refresh issues
           try_files $uri $uri/ /index.html;
       }
   
       # Route API requests to Dropwizard
       location /api/ {
           proxy_pass http://localhost:8080/api/;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           # Preserve the API path structure
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }
   }
   

   This setup ensures:

   • Users visiting yourdomain.com load the Angular app.
   • Requests to yourdomain.com/api/* are forwarded to your Dropwizard service.
   • No CORS issues, since all requests originate from the same domain.

Final Notes #

If you go the reverse proxy route, make sure to:

• Use a process manager like systemd or pm2 to keep both services running in production.
• Enable HTTPS with Let's Encrypt for your domain to secure traffic.

Hope these solutions help you get things up and running smoothly!

内容的提问来源于stack exchange，提问作者Shubham Agarwal Bhewanewala