Adventures in deploying Static Website on Cloud
Wondering if you should use PCF, AWS or Azure for Static Website? Read to find out more about the pros and cons of each.
Although web pages in today’s world are becoming powerful and extremely interactive, there is no replacement for a brilliant static website. With technological improvements such as introduction of MFEs and SPAs using ReactJS/Next.js, static websites these days do a lot more than just displaying relevant content to the user.
In this article, I would like to take you through my journey of deploying a static website for an enterprise, built using React on PCF, AWS and Azure and comparing some of their different aspects, and outlining the Blue-Green strategy for each method, which enables zero-downtime deployment. For the sake of brevity, I won’t be delving into overly technical details. Also, for the sake of simplicity, let us consider a bundle named app.zip which is the final build to be deployed and has the directory structure below.
Pivotal Cloud Foundry (PCF):
Steps:
- Create the project repository as required and then add ‘manifest.yaml’ in the root folder. Sample content for manifest.yaml is present below.
2. Configure your pipeline to create build using ‘npm run build’ command and add a file named ‘Staticfile’ in the build directory of the app with the content.
3. Once this is done, the pipeline should navigate to the appropriate app folder and perform ‘cf push’ command.
4. You should now be able to access the website with the route generated
Blue-Green Deployment:
The Blue-Green Deployment when using PCF to host static website can be done with the following steps:
1. Create a new app similar to existing app
2. Deploy the files
3. Test the application using new route URLs
4. Point your DNS to new route URLs
Pros:
1. Ability to auto-scale
2. Monitoring and deployment is easy
3. Applications run stably and smoothly
4. Excellent use case for deploying applications dealing with data such as PI or other critical information and cannot be deployed onto public cloud
5. Dynamic Routing and Infrastructure security
6. Integration with external logging components such as ElasticSearch and Logstash
Cons:
1. Integration with external tools is a little tedious
2. User Interface navigation needs improvement
3. You need to take care of the security and access control
4. The maintenance of SLAs is to be done by you
5. PCF will create a route at the time of deployment, and it can be customised but there is no readily available DNS Service or CDN Service along with PCF
6. Automatic encryption and rotation of keys is now dependent on the underlying hardware
7. Automated Cost alerts for your application is not available out of the box
8. Setting up of infrastructure to meet compliance requirements is now to be done by you
9. As applications grow, the cost of infrastructure becomes an overhead
Amazon Web Services (AWS):
Steps:
1. Create an S3 Bucket with desired configurations — this activity can be done manually or by automation with a CloudFormation Script via AWS Console/AWS CLI/AWS SDK
2. Create an SSL Certificate using AWS Certificate Manager for the Route53 domain name and add relevant CNAMEs as required
3. Create pipeline to deploy to S3 bucket — do note that this requires updating the bucket policy to allow access from your deployment tool
4. Create a CloudFront distribution — Shown below are the sample settings that can be done on the CloudFront distribution. You can also restrict access to your bucket only from a certain origin or country (Geo-Restriction) by updating CloudFront OAI settings
5. Deploy the application and enjoy the access
Blue-Green Deployment:
The Blue-Green Deployment when using AWS S3 to host static website can be done with the following steps.
1. Create a new bucket with the same configuration as existing bucket
2. Update the pipeline to deploy files to the new bucket
3. Create a new CloudFront distribution for the new static website set up
4. Test the application using CloudFront URLs
5. Point your DNS to new CloudFront URLs
Pros:
1. AWS WAF can be attached to the CloudFront distribution to enhance security of the website
2. Granular control of objects in bucket can be achieved by updating bucket and object access policies
3. 99.999999999% durability across regions and 99.99% availability over a given year without the headache of maintaining infrastructure
4. Storage auto-scales and is available in abundance
5. Compared to traditional hosting, bandwidth is cheap
6. Leverages the Edge Location Caches by using CloudFront distributions, reducing the transfer costs associated with the access of files
7. Take advantage of object lifecycle policies to save cost
8. Meets regulatory and other compliance requirements — such as deploying files only in a certain region or performing cross region replication
9. Multiple encryption options are available to secure the bucket content such as SSE-S3, SSE-KMS, SSE-C
10. Logs can be enabled on the bucket for monitoring and audit purposes
11. CloudFront and S3 allow you to configure the CORS settings, caching behavior, Caching rules, Redirection rules for each type of file
Cons:
1. Blue-Green deployment requires creation of new S3 bucket and CloudFront distribution
2. If Route 53 or DNS is not used, then website name would be non-user friendly
3. For bigger file sizes, the cost of maintaining them on the bucket increases
4. There is no hosting package or service for static website. To know the approximate cost for S3 based static website, one has to make use of the AWS Total Cost Calculator Application
5. You might be required to add another CDN on top of CloudFront to reduce the costs further
6. Initial configuration of services is tricky. For example, to use existing domain name instead of static website domain name, you will have to set up redirection rules on the server or CDN to point to the end URLs
7. The bucket name has to be globally unique even though it is created under your account in a region
Microsoft Azure:
Steps:
1. Create a Blob Storage container — first create a storage account and then create a container. This activity can be done manually or using Azure Resource Manager via Azure Portal/Powershell/Azure CLI/Azure SDK
2. Create an SSL Certificate using Azure App Service for the Route53 domain name and add relevant CNAMEs as required
3. Create pipeline to deploy to blob container — do note that this requires updating stored access policy to allow access to container from your deployment tool
4. Create an Azure CDN — You can also restrict to allow access to your container only from a certain origin or country (Geo-Filtering) by updating Azure CDN settings
Blue-Green Deployment:
The Blue-Green Deployment when using Azure Blob to host static website can be done as below.
1. Create a new container with same configuration as existing container
2. Update the pipeline to deploy files to the new container
3. Create a new Azure CDN for the new static website set up
4. Test the application using CDN URLs
5. Point your DNS to new CDN URLs
Pros:
1. Caching behavior and caching rules can be controlled in Azure CDN
2. Azure WAF can be attached to Azure CDN to enhance security of the website
3. 99.99999999999999% durability and 99.99% availability with Geo Redundant Storage (GRS) enabled over a year without the headache of maintaining infrastructure
4. Storage auto-scales and is available in abundance
5. Compared to traditional hosting, bandwidth is cheap
6. Leverages the Azure CDN cache, reducing the transfer costs associated with the access of files
7. Take advantage of Object lifecycle management to save cost
8. Meets Regulatory & other Compliance requirements — such as deploying files only in a certain region or performing replication to other regions
9. Blob content can be encrypted by using Customer-Managed Keys or Microsoft-managed Keys
10. Logs can be enabled on the container for monitoring and audit purposes
11. Your storage account serves as unique namespace for the container
Cons:
1. Blue-Green deployment requires creation of new container and CDN distribution
2. If DNS is not used, then website name would be non-user friendly
3. For bigger file sizes, the cost of maintaining them on the container increases
4. Azure Static Web Apps Service allows you to build and deploy full stack web apps but there is no hosting package or service for just static files. To know the approximate cost for blob storage based static website, one has to make use of the Azure Cost Calculator Application
5. You might be required to add another CDN on top of CloudFront to reduce the costs further
6. Initial configuration of services is tricky. For example, to use existing domain name instead of static website domain name, you will have to set up redirection rules on the server or CDN to point to the end URLs
Conclusion:
Below is a comparison table I have created of various aspects involved in deployment of static website using PCF, AWS and Azure. In terms of ease of deployment and ease of set-up, PCF fares better than AWS and Azure. However, AWS provides better access control and security, global reach, monitoring and compliance. Azure lies between PCF and AWS with respect to all the factors. In my personal experience, if you are willing to spend a little more, AWS is the best pick to host static websites. Which is your go-to place to host static websites?
N.B: The information present in the above article is based on personal experiences & knowledge and in no way should be considered as an expert advice/opinion
Appendix:
Below are the abbreviations used in the article.
