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
Top comments (0)