How to serve public and static files from amplify deployment

[anuj9196]

Summary

Using the Nextjs 15 app router-based project and deploying on AWS Amplify.

The project is a turborepo setup, and the configuration files are

next.config.ts

import { withSentryConfig } from "@sentry/nextjs";
import type { NextConfig } from "next";
import { PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD } from "next/constants";

const apiHost = process.env.NEXT_PUBLIC_API_HOST;

const createNextConfig = (phase: string): NextConfig => {
  const baseConfig: NextConfig = {
    transpilePackages: ["@workspace/ui"],
    images: {
      remotePatterns: [
        new URL(`${apiHost}/**`),
        {
          protocol: 'https',
          hostname: 'app-media.s3.amazonaws.com',
        },
      ],
    },
    async redirects() {
      return [
        // Basic redirect
        {
          source: '/auth',
          destination: '/auth/login',
          permanent: true,
        },
      ]
    },
  };

  // Development-specific configuration
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      ...baseConfig,
      // Development-only settings
      images: {
        ...baseConfig.images,
        unoptimized: true, // Disable image optimization in dev
      },
    };
  }

  // Production build configuration
  if (phase === PHASE_PRODUCTION_BUILD) {
    return {
      ...baseConfig,
      // Production-only settings
      // assetPrefix: 'https://cdn.feedal.io/web',
      compress: true,
      images: {
        unoptimized: true
      }
    };
  }

  // Default configuration for other phases
  return baseConfig;
};

// Export the function-based configuration
export default (phase: string) => {
  const nextConfig = createNextConfig(phase);
  
  // Make sure adding Sentry options is the last code to run before exporting
  return withSentryConfig(nextConfig, {
    org: "org",
    project: "org-frontend",

    // Only print logs for uploading source maps in CI
    silent: !process.env.CI,

    // Upload a larger set of source maps for prettier stack traces (increases build time)
    widenClientFileUpload: true,

    ...
  });
};

amplify.yml

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm install -g pnpm
            - pnpm install
        build:
          commands:
            - pnpm run build --filter=web
      artifacts:
        baseDirectory: apps/web/.next
        files:
          - "**/*"
        path: apps/web/public/**
      cache:
        paths:
          - .next/cache/**/*
          - node_modules/**/*
    appRoot: frontend/feedal

directory structure

frontend/feedal/
├── apps/
│   ├── landing/ # Landing page app
│   └── web/ # Main dashboard app (this one has the issue)
│       ├── app/
│       │   ├── (dashboard)/
│       │   │   ├── forms/
│       │   │   │   └──── page.tsx
│       │   │   ├── account/
│       │   │   ├── new/
│       │   │   └── layout.tsx
│       │   ├── layout.tsx
│       │   └── page.tsx # ← This was missing initially
│       ├── components/
│       ├── public/      # ← Public images here
│       ├── package.json
│       └── next.config.ts
├── packages/
│   ├── ui/
│   └── eslint-config/
├── package.json
├── turbo.json
└── amplify.yml

After deployment, everything works, but the images come broken.

When I tried accessing them directly like https://app.feedal.io/logo/full_blue.svg, it gives a 404 response.

What did I try?

Uploaded all files from public directory to s3 and configured CloudFront to work as CDN, then the files are accessible using https://cdn.feedal.io/web/logo/full.blue.svg.

Updated next.config.ts with

if (phase === PHASE_PRODUCTION_BUILD) {
    return {
      ...baseConfig,
      // Production-only settings
      assetPrefix: 'https://cdn.feedal.io/web',
      compress: true,
      images: {
        unoptimized: true
      }
    };
  }

However, starts getting other errors like

Also, the URL https://cdn.feedal.io/web/_next/static/media/569ce4b8f30dc480-s.p.woff2 gives a 404 error.

1. How to serve files from the public directory in the production directory from the application?
2. If not possible, then how to upload files to S3 bucket on build?

Additional information

No response

Example

No response

[icyJoseph]

if it is the typical CORS issue, then you have to configure it on the cdn.feedal.io distribution - it's been a while since I used these tools, but I think you should be able to read AWS docs to figure it out, it can just be that somewhere in a dashboard, a checkbox needs to be clicked - or a policy file is missing.

[anuj9196]

@icyJoseph It’s not a typical CORS error. The error is coming because it is looking for font files that are not in the S3 bucket. After all, they were not in the public directory.

If these files are created during build time, how can I upload the static files to S3 on build? Not sure where these files are located and no instructions on how to handle public and static files on production build so that they can be served using CDN, if not directly from the directory (as in development server)

[icyJoseph]

MMm did you manage to make any progress? I'd ask over at Amplify's repository too - The .next and public directory handling should just work, IIRC, Amplify recognizes that this is Next.js and knows what to do with the outputs in those folders.

[anuj9196]

I’m still struggling to get it work. It seems public directory is not copying to the build artifact in .next directory.

Tried changing the artifacts configuration to

artifacts:
        baseDirectory: apps/web
        files:
          - .next/**
          - public/**

But this doesn’t seem to work either. (I know this is not the correct approach)

I’m stuck with how to handle public and static files in production build because of no clear documentation and instruction.

[icyJoseph]

but like, you have to make public available - it is not copied into .next - it is actually decoupled so that you can also make it available at a CDN level. I guess that's the configuration that's missing, but I am surprised to see that the framework is not picking up on this automatically.

Have you followed any guide/docs from them?