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

Why you should migrate your old csproj to SDK format

Image
Introduction  With the introduction of Visual Studio 2017, the format used for csproj was updated including several advantages. This new format will be used when you create a new .Net Core project or .Net Standard library. In spite of the fact that VS2017 continues supporting old csproj format, you can migrate your old projects to SDK format. As a result, you will have the following benefits: Cleaner csproj files. With new format, a lot of things can be omitted, so your csproj files will be cleaner. Files are included using a wildcard , instead of including every single file.  Solution project references are simplier . NuGet reference packages as PackageReferences , so you won't need packages.config and you will be able to use wildcard in your references (for example, 1.0.*). NuGet package definition as a part of the project file. You won't need more nuspec files. Definition of AssemblyInfo attributes in csproj , you won't need more AssemblyInfo.cs files. In ad
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 refresh
Read more