Migrate a static website from AWS to Azure

Published on
Reading time
Authors

Today we're going to look at how you can migrate a static website hosted in AWS S3 to Azure's Storage Static Websites.

Before we get going there are a few things to be aware of:

  • The Azure Static Websites feature doesn't currently support naked (or apex) domains (using a website without 'www' for example). This is on the backlog and will arrive in the not-too-distant future.
  • You can't currently use Static Websites with HTTPS and a custom domain. Unsurprisingly, this is also on the backlog :) . You can work around this using Azure CDN in the meantime - we'll take a look at how later in this post.

Before we go any further you will need to make sure you have your AWS access key(s) and secrets so we can configure the AWS CLI.

Step 1: Move content from AWS S3 to Azure Blob Storage

Let's get started by opening a web browser and logging into the Azure Cloud Shell for the Azure Subscription we want to migrate our website to at https://shell.azure.com/. Make sure you choose Bash for your shell session.

I've made migrating the web content really straight-forward - you can grab the following Gist directly in Cloud Shell and use it by passing it just a few arguments.

migrate-static-web-content.sh
#!/bin/bash

resourcegroup=$1
demolocation=$2
storageacctname=$3

#####
# Setup AWS
#####

# Setup AWS environment
export AWS_ACCESS_KEY_ID=$4
export AWS_SECRET_ACCESS_KEY=$5
s3bucket=$6

# install AWS CLI just for this profile (global will fail in Cloud Shell)
pip install awscli --user

# reload to ensure we pick up changes to path that include 'aws' command
source .profile

#####
# Setup Azure
#####

# required December 2018 as static website feature only just GA.
az extension add --name storage-preview

# create resource group
az group create --name $resourcegroup --location $demolocation

# create storage account
az storage account create --resource-group $resourcegroup --name $storageacctname --location $demolocation --sku Standard_LRS --https-only true

# Convert storage into General Purpose V2 account which support static website feature
acctmetadata=$(az storage account update --resource-group $resourcegroup --name $storageacctname --set kind=StorageV2)

# Enable static website feature - default index and 404 doc to the same (ueful for Angular / SPA-style apps)
# retry following code as it can fail depending on time it takes to upgrade storage account to V2
n=0
until [ $n -ge 3 ]
do
    az storage blob service-properties update --account-name $storageacctname --static-website --404-document index.html --index-document index.html && break
    n=$[$n+1]
    sleep 10
done

#####
# Copy content from AWS
#####

aws s3 cp s3://$s3bucket clouddrive/website/ --recursive

#####
# Copy content to Azure Storage
#####

az storage blob upload-batch -s 'clouddrive/website' --destination '$web' --account-name $storageacctname

# Print Azure Web URL for user
echo "Visit your website at the following URL (you can click it!):"
echo $acctmetadata | python3 -c "import sys, json; print(json.load(sys.stdin)['primaryEndpoints']['web'])"

Arguments for the script are:

  1. Azure Resource Group that will contain the new Storage Account
  2. Azure Region (Location) for Resource Group *AND* the Storage Account
  3. Azure Storage Account Name
  4. AWS Access Key
  5. AWS Secret
  6. Name of AWS S3 bucket that contains current static web site content.
curl https://gist.githubusercontent.com/sjwaight/773a3b831e571ce80f518059255a5435/raw/9226e473291e6ffaf3e6afc348e1a31fa39499ad/migrate-static-web-content.sh --output migrate-static-web-content.sh
chmod 755 migrate-static-web-content.sh
./migrate-static-web-content.sh swdemosweb01 westus2 mysemo832478fd AXXXXXXXXXXXXXXXXXXXXXXQ 'fXXXXXXXXXXXXXXXXXXXXXXXXXX/' bucketnametomigrate.com

Once the script has run you should now be able to browse the website at the URL of the static website on Azure that is produced at the end of the script. You can even click on it in Cloud Shell and it will open in a new browser tab!

Step 2: Dealing with DNS

Depending on your needs you can take one of two approaches:

  • Leave your DNS zone hosted with your current DNS provider and update the necessary host entries to point to your new Azure-hosted static website or CDN endpoint.
  • Move your entire DNS zone to Azure DNS. This is at the advanced end of the spectrum and should be performed by someone familiar with DNS.

If you're using Route 53 for your DNS there is no one-click solution to migrate just yet. The easiest way to move would be to leverage an existing open source toolkit that can do the work for you - most likely by exporting to an open standard DNS zone file format supported by BIND DNS servers that can then be imported into Azure DNS. Unfortunately AWS don't provide an easy way to export zone information in a well-known format like BIND which is a shame.

Important Note: if you are unfamiliar with DNS you would be advised to seek professional help. If you don't manage DNS correctly you can adversely impact your services beyond just your website!

Step 3: Enabling SSL on your website

As noted at the beginning of this post we can't easily enable SSL (HTTP) directly on a Static Website just yet, but we can work around this by using Azure CDN.

The beauty of doing it this way (even once Web Sites support SSL) is that you can allow the Azure CDN to manage your SSL certificate for you. No more expiry to worry about (and you get content acceleration as a side benefit!)

Get started using the excellent quick start guide from the Microsoft Docs site. Once you have a CDN profile and endpoint configured then you can add SSL.

Summary

Static Websites has been a highly requested feature in Azure for some time, and it's great to see it is here and Generally Available. Over time I fully expect the service to mature, and that a lot of the manual steps covered in this blog post will become much more straight-foward or automated!

PS - You can also deploy to Storage Static Websites easily using Azure DevOps - if you make the move to Azure I'd strongly recommend considering this workflow which is likely much more integrated than you will have been used to! There's also a great tutorial on getting started with the Static Websites feature as well on the Microsoft Docs site.

Happy days! 😎