React frontend (with Amplify Auth & Storage) hosted on AWS Amplify that calls an Express API running on AWS App Runner.

Both projects live in the same repo:

• The Amplify app is deployed via continuous CI/CD with GitHub on Amplify Hosting
• The App Runner service is deployed via AWS Copilot + Docker.

The user's JWT from Amplify Auth is passed with the API request and verified in the service using aws-jwt-verify.

Amplify.configure({
  ...awsExports,
  ...{
    API: {
      endpoints: [
        {
          name: "apprunner-api",
          endpoint:
            process.env.REACT_APP_APPRUNNER_API || "http://localhost:8080",
          custom_header: async () => {
            return {
              Authorization: `${(await Auth.currentSession())
                .getAccessToken()
                .getJwtToken()}`,
            };
          },
        },
      ],
    },
  },
});

The API service returns a simple "promo" message for the UI.

This pattern can be extended to access additional resources or private services via the App Runner service.

The frontend can be deployed using Amplify Hosting continuous CI/CD from the repository. Use the API endpoint created to populate the Environment Variable REACT_APP_APPRUNNER_API in the Amplify Hosting console for the application.

Update the COGNITO_USERPOOL_ID and COGNITO_CLIENT_ID environment variables in backend/copilot/api/manifest.yml. These values should coincide with the AWS Cognito Auth resources created by Amplify, and redeploy.

variables: # Pass environment variables as key value pairs.
  # LOG_LEVEL: info
  # Add in here or in AWS Console
  COGNITO_USERPOOL_ID: <value>
  COGNITO_CLIENT_ID: <value>

Once AWS Copilot is installed:

Change into the backend directory and deploy:

cd backend

copilot deploy

Once deployed, the service will be visible in the App Runner console.