Azure DevOps: Deploy your SPA on AWS S3 bucket

Introduction


According to Amazon's definition: Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.

These features make AWS S3 a really interesting candidate to store static files. However, since AWS S3 supports http static hosting, single page applications (SPA) can also get benefit from AWS S3.

 

Additionally, if you want to support https, you can also use AWS CloudFront. You can find more info in this article: https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/

 In a project were I'm working, I configured CI/CD to deploy a React application in AWS s3. Due to the poor quality of AWS documentation, even the simplest task can be a challenge, so I will try to explain how to configure Azure DevOps to deploy to AWS S3, as this may be of help to somebody.

 Configuring Release Pipeline on Azure DevOps

In order to work with AWS, the first thing you will need is AWS Tools for Microsoft Visual Studio Team Services installed, which you can install from here: https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-vsts-tools&refid=gs_card.

Once you install the extensions, you will be able to see tasks related to AWS S3, particularly, Download and Upload.

So lets upload our react artifact files to AWS S3.

Configuring AWS Credentials

To use AWS services from Azure DevOps, you need to configure your AWS credentials. For example, in the S3 Upload task, you will see the AWS Credentials section, where you need to add your credentials.


If you don't know how to create your AWS key id and access key, here you have a tutorial (quite a bit more straightforward than AWS official documentation): https://www.cloudberrylab.com/resources/blog/how-to-find-your-aws-access-key-id-and-secret-access-key/

Configure S3 Upload task

Now you have to configure the S3 Upload task. To do so, you have to specify your S3 bucket name and the folder from the build that you want to upload.


If you didn't create your bucket, you can allow Azure DevOps to create it for you. I also configure Overwrite files, in case I want to upload an existing file.
 

 Cleaning Previous Deployments

In spite of the fact that I configured "overwrite" feature to update existing files, react (actually webpack) creates a new bundle with a different name each time you build. for this reason, I need to clean previous deployed files, before starting a new deployment.

To remove existing files, we don't have an Azure DevOps specific task, so we will need to use AWS cli task. I also want to keep folders sandbox and logos, where I have data I don't deploy with react application. In order to do it through a AWS command, you can execute:

aws s3 rm s3://react-app-dev --recursive --exclude "sandbox/*" --exclude "logos/*"

So you need to configure your command in AWS cli task in this way:


However, when you execute your pipeline, you will see this error: AWS CLI is not installed on this machine.



This error, is because you need to install first AWS cli. To install it, add a command task and write this script:


As this is a python script, you will need to add a "Use Python 3.x task" before to use python tasks.

And now your deployment pipeline is ready to deploy your SPA into AWS S3.

To sum up, this is the pipeline in order that you need to follow to deploy your react app on AWS S3 bucket.



Notice that tasks such as AWS S3 or configuring AWS Cli in Azure DevOps can be very useful for many purposes, so this guide can be helpful for example if you need AWS cli for other purposes. 

I hope you find useful this post.

Happy coding!! :)






Comments

  1. growebitdaMarch 12, 2021 at 12:27 PM

    Really good information, this information is excellent and essential for everyone. I am very very thankful to you for providing this kind of information. improve cash flow in business

    ReplyDelete
  2. SathishApril 6, 2021 at 3:09 AM

    Thank you so much.. It helped me very much

    ReplyDelete

Post a Comment

Popular posts from this blog

Building Micro-Frontends with Single-Spa

Image
Introduction Micro-services architecture is becoming trendy since it is a suitable option many projects, specially those that are complex and we want to be able spilt our business logic into different services that can be built and deliver independently. In spite of the fact that micro-services architectures are more complex, they increase the resilience of your system and increase the time-to-market delivery, which can be crucial for many companies. But it is not all about services and backend. With the introduction of single page applications (SPAs), we can build fully-functional user interfaces that can work independently in the browser. And here we should ask ourselves the same questions as for backend applications: Is my SPA becoming a huge monolith? Would I like to deliver functional modules independently? If you using micro-services, is there a relation between my services and your UI? Do we want to have functional teams that can deliver new features (frontend+backend) independe...
Read more

AWS assuming role + MFA with pulumi (and other applications)

Image
Introduction In AWS, managing your IAM in a centralized account is a good practice, so then you can assume a role to access to other accounts without need of duplicating users. You can find more info about this approach in this article . In addition, for security reasons, it is highly recommended to enable MFA (Multi-factor Authentication), so you need a device to generate a temporary code to get access. In the image below it is showed how assume role with MFA works, but you also have an article about MFA in this link . This approach is really useful and most of the configuration can be automated with pulumi (or other providers like terraform or CloudFormation). And once it is configured, you can switch your role and get access to other accounts with a few clicks.  However, when it comes to external software such us pulumi, getting access assuming a role and using MFA might not be too straightforward. In this article we will see how this can be configured and how we can easily refr...
Read more

Managing snapshots for Amazon ElasticSearch with Dotnet Core Lambdas

Image
Introduction It is awesome to have some useful services like ElasticSearch managed by AWS , so you don't have to care about patching, monitoring, etc.  When it comes to backup management for indexes, Amazon ElasticSearch includes automated snapshots. Automated snapshots are only for cluster recovery. You can use them to restore your domain in the event of red cluster status or other data loss. Amazon ES stores automated snapshots in a preconfigured Amazon S3 bucket at no additional charge. In particular, if you are using a higher version than 5.3, Amazon ElasticSearch takes hourly automated snapshots and retains up to 336 of them for 14 days. However, this policy might not be enough if you need to keep your snapshots for a longer 15 days, or you need to take a snapshot to create a new cluster in another region, subnet, etc. If you have different requirements to manage your snapshots, you will have to work with manual snapshots. For this part, AWS does not offer a good managed exper...
Read more