how to customize resource names in amplify gen2 | AWS Amplify | Page 1

safe widget Dec 5, 2024, 3:22 PM

#

Hi Experts,

I want to keep reource names as per my convenient in amplify gen2 ? is it possible ?

because i see diff resource names for lambda, s3 buckets...

and i want to add cloud front to a s3 bucket...so if it gets changed, i will have to reconfigure again.

Thanks

jagged cipher Dec 7, 2024, 7:31 PM

#

CloudFront in front of the Amplify storage bucket seems like an antipattern given Amplify already stands up CloudFront in front of the app. That being said, you can access the storage bucket dynamically from the backend using the outputs, if you need to adjust configuration on it or reference it to connect a CloudFront distribution to it as origin.

#

oak breach Dec 7, 2024, 8:23 PM

#

@jagged cipher if we read from the storage bucket, that doesn’t go trough CF. You get a presigned URL.

In one app, i added a CF in front of the storage bucket in order to have direct cached and Public access to a specific prefix where i uploaded public files.
@safe widget to make this work, i created the cf dist in backend.ts and used the s3 bucket as showed by @jagged cipher as a origin

#

It was gen1, and did some workarounds, but it seems that gen2 can be a very clean config

jagged cipher Dec 7, 2024, 9:39 PM

#

To make the provided storage bucket work, you would have to enable static site hosting (this is why this would be an antipattern there, IMO). If you want to serve static content from S3 via CloudFront independently, I would suggest creating a separate bucket and connecting your additional CloudFront distribution to that.

safe widget Dec 8, 2024, 6:34 AM

#

@oak breach , my use case is to display images in app which are uploaded by users, faster, even large images...that is why i was thinking of using cloud front...is there any other option witih amplify resources ? for accessing fast, large images...with cached mechanims... ?

oak breach Dec 8, 2024, 6:35 AM

#

None that I found. This was also my use case

safe widget Dec 8, 2024, 6:36 AM

#

was above solution worked greatly ? with gen2

#

can u provide me configuration snnipets for CF for gen2. ?

oak breach Dec 8, 2024, 6:40 AM

#

I can put something together tomorrow when i get to the office

oak breach Dec 9, 2024, 12:49 PM

#

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource.js';
import { data } from './data/resource.js';
import { registrationLambda } from "./lambda/registration/resource.js";
import { storage } from "./storage/resource.js";
import { Distribution, OriginAccessIdentity } from "aws-cdk-lib/aws-cloudfront";
import { S3BucketOrigin } from "aws-cdk-lib/aws-cloudfront-origins";

const be = defineBackend({
  auth,
  data,
  storage,
  registrationLambda,
});

const storageBucket = be.storage.resources.bucket;
const storageStack = be.storage.stack;

//identity for cloudfront to access the bucket 
const oai = new OriginAccessIdentity(storageStack, "originAccessIdentity");


const s3Origin = S3BucketOrigin.withOriginAccessIdentity(storageBucket, {
  originAccessIdentity: oai,
});

const cfDistribution = new Distribution(storageStack, "cfDistribution", {
  defaultBehavior: {
    origin: s3Origin,
  },
});

//grant the oai to read the bucket
storageBucket.grantRead(oai.grantPrincipal);

//add the cf distribution domain name to the output. maybe you need it in the FE
be.addOutput({
  custom: {
    cfDistributionDomainName: cfDistribution.domainName,
  },
});

#how to customize resource names in amplify gen2