How to deploy SPA as a static website using AWS S3

AlexeyRomanchenko — Fri, 05 Feb 2021 21:16:05 +0000

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.

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).

AWS S3

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.

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

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

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.

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

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

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/*"
        }
    ]
}

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:

Let's check the link:

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

AWS newbie's overview

AlexeyRomanchenko — Tue, 26 Jan 2021 20:04:41 +0000

Modern programming differs from programming five to ten years ago. Application architectures changed too much, as well as their ways of deployment. My previous experience was connected with old styled monolith ASP.NET web applications. I had one web app and I had to deploy it on a premises’ server, where the IIS web server was installed. Sometimes my small and cozy team had problems with strange issues. For example, our web server froze each time we deployed every new version of our app. We did not have solid DevOps knowledge, so we learned some basic IIS functionality, and from time to time tried to make some devops work.

Last month, I changed my job. We use interesting microservice architecture and store our services in the AWS cloud. It is interesting to discover new ways to create API routing using API Gateway. To make a long story short, this service allows you to create endpoints for the backend app, connect small (or even big) services with endpoints, protect your endpoints with authorization, or check necessary headers in requests.

Last week, I had a pretty tricky moment with sending images to my backend. I could not accept multipart/form-data requests from my frontend. The backend returned a cors error, while the application/json header was accepted.

AWS has a great tool to create microservices with lambda functions: everyone can create APIs using different programming languages like C#, Javascript, Java, Go, Python.

Lambda functions represent well-known serverless architecture where you do not have to worry about your server troubles.

Everyone can use it for small units of work, such as receiving something from a database, or inserting some amount of data to a database, or somewhere else. Lambda is not a great option for long tasks, because it has an execution time limit of 15 minutes.
Another service I learned was S3 storage, where Amazon allows everyone to store different files, like images (to create your own storage, and make it public or private ), or even you can use it to host static frontend applications.

For people who want to deploy their applications and not use lambda functions, they can easily deploy them using Elastic Beanstalk, where you upload a zip file with your app and in some minutes it is deployed. During its deployment Elastic Beanstalk creates a virtual machine that is needed for your application. Don’t forget about if you are using the free tier period, because after that period they will start charging you.

Finally, you can connect your existing domain (or buy a new one) with the Route 53 service, just add a hosted zone for the domain you have chosen. AWS takes 50 US cents per month for adding each hosted zone to your account.

In conclusion, AWS has a big variety of services that could be interesting for developers and helpful as well.

(the image was taken from aws.amazon.com)

DEV Community: AlexeyRomanchenko

How to deploy SPA as a static website using AWS S3

AWS newbie's overview