Asraful
Asraful

Reputation: 1290

NextJs Static resources are not found (404), After Deploying in Azure Spring App service as a combined Jar

I have packaged Spring Boot backend with Nextjs front end as a jar and deployed in Azure Spring Apps.

So, i am facing 404 as below . However, in my local machine it is working perfectly fine.

enter image description here

nextjs.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'standalone',
    reactStrictMode: true,
    images: {
        unoptimized: true
    },

    experimental: {
        proxyTimeout: 1000 * 120, // 120 seconds
    },
    async rewrites() {
        return [
            {
                source: '/api/:path*',
                destination: 'http://localhost:8080/api/:path*',
            },
        ]
    },
}
export default nextConfig

package.json

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next scdtart",
  "lint": "next lint"
},

pom.xml for NextJS

   <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.11.3</version>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                    </execution>
                    <execution>
                        <id>npm run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
                <configuration>
                    <nodeVersion>v20.0.0</nodeVersion>
                </configuration>
            </plugin>

Dependences:

  "dependencies": {
    "@heroicons/react": "^2.1.1",
    "@tremor/react": "^3.14.0",
    "@vercel/analytics": "^1.1.3",
    "http-proxy-middleware": "^2.0.6",
    "next": "14.1.0",
    "next-auth": "^4.24.5",
    "nextjs-cors": "^2.2.0",
    "react": "^18",
    "react-dom": "^18"
  },

Target Directory is :

enter image description here

Upvotes: 0

Views: 144

Answers (1)

Pravallika KV
Pravallika KV

Reputation: 8541

I followed below steps to deploy the Spring Boot Application with NextJs frontend as a jar to Azure Spring Apps.

API Controller:

@GetMapping("/api/hello")
public ResponseEntity<?> hello() {
   HashMap<String, String> map = new HashMap<>();
   map.put("field1", "Hello from java backend! " + System.currentTimeMillis());
   return ResponseEntity.ok(map);
}

Local Response:

enter image description here

  • Run below command to configure deployment in pom.xml:
mvn com.microsoft.azure:azure-spring-apps-maven-plugin:1.19.0:config
  • Select your subscription, Spring App and the app to deploy the application.

My POM.XML:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <parent>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-parent</artifactId>
       <version>3.2.1</version>
       <relativePath/> <!-- lookup parent from repository -->
   </parent>
   <groupId>no.knalum</groupId>
   <artifactId>spring-boot-1</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <name>spring-boot-1</name>
   <description>Demo project for Spring Boot</description>
   <properties>
       <java.version>17</java.version>
   </properties>
   <dependencies>
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-web</artifactId>
       </dependency>

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

   </dependencies>

   <build>
       <plugins>
           <plugin>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-maven-plugin</artifactId>
           </plugin>

           <plugin>
               <groupId>com.github.eirslett</groupId>
               <artifactId>frontend-maven-plugin</artifactId>
               <version>1.15.0</version>

               <executions>
                   <execution>
                       <id>install node and npm</id>
                       <goals>
                           <goal>install-node-and-npm</goal>
                       </goals>
                       <phase>generate-resources</phase>
                   </execution>
                   <execution>
                       <id>npm run build</id>
                       <goals>
                           <goal>npm</goal>
                       </goals>
                       <phase>generate-resources</phase>
                       <configuration>
                           <arguments>run build</arguments>
                       </configuration>
                   </execution>
               </executions>

               <configuration>
                   <nodeVersion>v21.5.0</nodeVersion>
                   <npmVersion>9.8.0</npmVersion>
                   <workingDirectory>frontend/</workingDirectory>
               </configuration>
           </plugin>

           <plugin>
               <groupId>org.apache.maven.plugins</groupId>
               <artifactId>maven-resources-plugin</artifactId>
               <version>3.2.0</version>
               <executions>
                   <execution>
                       <id>copy resources from frontend to java resources</id>
                       <phase>generate-resources</phase>
                       <goals>
                           <goal>copy-resources</goal>
                       </goals>
                       <configuration>
                           <outputDirectory>target/classes/static/</outputDirectory>
                           <resources>
                               <resource>
                                   <directory>frontend/out/</directory>
                               </resource>
                           </resources>
                       </configuration>
                   </execution>
               </executions>
           </plugin>

           <plugin>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-maven-plugin</artifactId>
               <executions>
                   <execution>
                       <id>Build fat jar</id>
                       <goals>
                           <goal>repackage</goal>
                       </goals>
                       <configuration>
                           <mainClass>no.knalum.springboot1.SpringBoot1Application</mainClass>
                       </configuration>
                   </execution>
               </executions>
           </plugin>
           <plugin>
               <groupId>com.microsoft.azure</groupId>
               <artifactId>azure-spring-apps-maven-plugin</artifactId>
               <version>1.19.0</version>
               <configuration>
                   <subscriptionId>b83c1ed3XXXXXXXXc23f</subscriptionId>
                   <resourceGroup>rgname</resourceGroup>
                   <clusterName>springappname</clusterName>
                   <sku>Standard</sku>
                   <appName>appname</appName>
                   <isPublic>false</isPublic>
                   <deployment>
                       <cpu>1</cpu>
                       <memoryInGB>2</memoryInGB>
                       <instanceCount>1</instanceCount>
                       <runtimeVersion>Java 17</runtimeVersion>
                       <resources>
                           <resource>
                               <directory>${project.basedir}/target</directory>
                               <includes>
                                   <include>*.jar</include>
                               </includes>
                           </resource>
                       </resources>
                   </deployment>
               </configuration>
           </plugin>
       </plugins>
   </build>
</project>
  • Deploy the Application to Azure using the command:
mvn azure-spring-apps:deploy

enter image description here

  • Deployed Successfully:

enter image description here

  • Open the App and Assign Endpoint, endpoint URL will be assigned:

enter image description here

Browse the URL:

enter image description here

Upvotes: 0

Related Questions