如何将Spring Boot与Angular 1项目分别部署到Apache Tomcat

Great question! Let's break this down into two clear parts: choosing the right deployment approach for your Spring Boot app, and configuring your Angular 1 client for the GoDaddy environment.

Which Should You Choose? #

• Jar with Embedded Tomcat: This is Spring Boot's default and most hassle-free option. Go with this if you don't already have a standalone Tomcat server set up on your server, or if you want to minimize operational overhead. The embedded Tomcat is optimized for Spring Boot, and you get a single, self-contained artifact that's easy to deploy, scale, and manage.
• War for Standalone Tomcat: Opt for this only if you have an existing Tomcat infrastructure (like a clustered environment) you need to integrate with, or if your team has strict policies requiring a separate application server. It adds a bit more complexity since you'll need to manage the Tomcat server itself, but it fits traditional Java EE workflows.

How to Deploy Each Option #

Jar Deployment #

1. Package your app: For Maven, run mvn clean package; for Gradle, use gradle build. This generates a .jar file in your target (Maven) or build/libs (Gradle) directory.
2. Upload to your server: Use SFTP or SCP to transfer the jar file to your server.
3. Run the app: Start it with java -jar your-spring-app.jar. For production, run it as a background service (e.g., using systemd on Linux) so it persists after you log out. You can customize settings like the port with flags: java -jar your-spring-app.jar --server.port=8080.

War Deployment #

1. Modify your entry class: Make your Spring Boot main class extend SpringBootServletInitializer and override the configure method:

   @SpringBootApplication
   public class YourAppApplication extends SpringBootServletInitializer {
       @Override
       protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
           return application.sources(YourAppApplication.class);
       }
       public static void main(String[] args) {
           SpringApplication.run(YourAppApplication.class, args);
       }
   }
   

2. Update build configuration:
   • For Maven: Set <packaging>war</packaging> in your pom.xml, and mark the embedded Tomcat dependency as provided:

     <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-tomcat</artifactId>
         <scope>provided</scope>
     </dependency>
     

   • For Gradle: Add the war plugin and configure the Tomcat dependency as providedRuntime.
3. Deploy: Build the war file, then drop it into your standalone Tomcat's webapps directory. Tomcat will automatically unpack and deploy it.

Angular 1 apps are static once built, so the process focuses on packaging correctly and setting up routing/API access for GoDaddy's environment.

Step 1: Package Your Angular 1 App #

First, build your app into static HTML/CSS/JS files. Depending on your build tool (Grunt, Gulp, or custom webpack config), run the appropriate build command. This will generate a dist or build directory with all the assets you need to deploy.

Step 2: Upload to GoDaddy #

• For shared hosting: Upload the contents of your build directory to the public_html folder (this is your domain's web root).
• For VPS hosting: Upload to the directory configured in your web server (e.g., /var/www/html for Apache).

Step 3: Configure Routing (HTML5 Mode) #

If your Angular 1 app uses HTML5 mode (clean URLs without the #), create an .htaccess file in your web root to handle routing. GoDaddy uses Apache, so add this content:

RewriteEngine On
RewriteBase /
# Skip requests for existing files/directories
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Forward all other requests to index.html
RewriteRule . /index.html [L]

This ensures all routes are handled by your Angular app instead of returning a 404 error.

Step 4: Update API Base URL #

In local development, you likely used http://localhost:8080 for your Spring Boot API. For production, update this to your server's public URL (e.g., https://your-domain.com/api).

Define a constant in Angular 1 to avoid hardcoding:

angular.module('yourApp')
  .constant('API_BASE_URL', 'https://your-domain.com/api');

Use this constant in all your $http requests.

Step 5: Handle Cross-Origin Requests (CORS) #

If your Spring Boot app is deployed on a different server/domain than your Angular app (e.g., Angular on GoDaddy shared hosting, Spring Boot on a VPS), enable CORS in Spring Boot:

• Add the @CrossOrigin annotation to your controller classes/methods.
• Or create a global CORS configuration bean:

  @Configuration
  public class CorsConfig {
      @Bean
      public CorsFilter corsFilter() {
          UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
          CorsConfiguration config = new CorsConfiguration();
          config.setAllowCredentials(true);
          config.addAllowedOrigin("https://your-domain.com"); // Your Angular app's domain
          config.addAllowedHeader("*");
          config.addAllowedMethod("*");
          source.registerCorsConfiguration("/api/**", config);
          return new CorsFilter(source);
      }
  }
  

• Simplest setup: Deploy Spring Boot as a Jar with embedded Tomcat on a VPS, and your Angular 1 static files to GoDaddy's shared hosting. This keeps backend and frontend separate, simplifies scaling, and reduces overhead.
• If you need standalone Tomcat: Go with the War approach, but ensure you're comfortable managing Tomcat updates and configurations on your server.

内容的提问来源于stack exchange，提问作者Nikesh Kedlaya