DEV Community

Md. Mizanur Rahman
Md. Mizanur Rahman

Posted on

Build Node.js app in Replit & use s3 as static web hosting serving with CDN


In this AI Era, there's lot of prompt module are available to ease our daily life. Among them i have found one good one which is 'replit'. link: https://replit.com/

I have developed my portfolio in replit. it's node.js app. i have given a prompt to develop like this and gave all kinds of information in replit.


After building the project, i have downloaded the code and then build the application code locally.

npm init -y
npm run build

Then i have created a S3 bucket and upload assets folder and index.html of that build project. [S3 has all public access blocked]

For static web hosting, i had to enable the "Static website hosting" from S3--> Properties.
So, if that option is enabled then a weblink you will get and try to open it and found that your app is available on that link.[If public access enabled]

Now the main part, CDN configuration. I have created an CDN with Default config.[CDN takes time to be created fully]
I have configured altenate domain name with my domain 'mizaniftee.xyz'

Then i have configured the SSL from AWS ACM. Records were automatically added in my hosted zone.

N.B: If you want to use CDN with your wildcard domain then it couldn't be added manually. like i wanted to forward mizaniftee.xyz to CDN URL but couldn't. here www.mizaniftee.xyz was doable

As i have set S3 as private, so i had to add some permission in s3 bucket by which CDN could access the files.
going to s3--> Permissions then add below

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::s3_Bucket_name/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::YOUR_ACCOUNT_ID:distribution/DISTRIBUTION_ID"
                }
            }
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Now i could easily access my portfolio website with my domain which is serving through CDN to s3 bucket Files.

Top comments (0)