DEV Community

loading...
Cover image for How to deploy SPA as a static website using AWS S3

How to deploy SPA as a static website using AWS S3

alexeyromanchenko profile image AlexeyRomanchenko ・2 min read

Amazon web services allow you to store different files, using amazon S3 buckets. Everyone can store images or libraries, use it like CDN or similar to it. Also it allows us to deploy frontend web application, connect any domain you want (and you have bought previously).
At first, let's create our frontend application. I will use Create React App template, but you can use the same way Angular, Vue or just static html file. It depends on you.
image

As you have created and developed your app, you have to create a minified bundle.In Create React App for its deploying you have to run command npm run build, after folder build will be created, where minified bundle is located (I believe so).

image

AWS S3


image

Let's create s3 bucket, that supposes to be our static website's hosting. For this purposes we have to create S3 bucket with a public access.
image

After the bucket was created we should go into that bucket.
image

In "Properties" tab at the same bottom of the page you can find "Static website hosting" block.
image

You have to enable it and specify default index file. If you use frontend routing system without hash separating, you should specify index file like an error file.

image

Please, don't forget to upload your files into the bucket.
image

The last step of our deployment will be specifying bucket's policy in the "Permissions" tab.
image

You have to edit bucket's policy in this way, don't forget to save the policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-backet-name/*"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Finally, in the "Properties" tab , where we previoulsy enabled static website hosting we can find the url, that allows to visit our frontend web application:

image

Let's check the link:

image

We deployed our frontend!

P.S. In next articles I assume to create backend microservices using AWS Lambda for our frontend application. And for now, you can find pretty good manual how to deploy frontend application in Azure https://dev.to/magervalentine/deploy-spa-with-azure-blob-storage-in-minutes-7c9


Image wa taken from aws.amazon.com

Discussion (0)

pic
Editor guide