Publishing Static Website to Azure Blob Storage via GitHub Actions

az-storage-blob-activate.sh

# Activate static website hosting feature
az storage blob service-properties update \
    --account-name <STORAGE_ACCOUNT_NAME> \
    --static-website true \
    --index-document index.html \
    --404-document 404/index.html

az-storage-blob-upload.sh

az storage blob upload-batch \
    -s dist \
    -d \$web \
    --account-name <STORAGE_ACCOUNT_NAME>

az-storage-create.sh

# Create a new Azure Resource Group
az group create \
    -n <RESOURCE_GROUP_NAME> \
    -l <LOCATION>

# Create a new Azure Storage instance
az storage account create \
    -g <RESOURCE_GROUP_NAME> \
    -n <STORAGE_ACCOUNT_NAME> \
    -l <LOCATION> \
    --sku Standard_LRS \
    --kind StorageV2

az-storage-endpoints.json

{
  ...
  "primaryEndpoints": {
    "blob": "https://<STORAGE_ACCOUNT_NAME>.blob.core.windows.net/",
    "dfs": "https://<STORAGE_ACCOUNT_NAME>.dfs.core.windows.net/",
    "file": "https://<STORAGE_ACCOUNT_NAME>.file.core.windows.net/",
    "queue": "https://<STORAGE_ACCOUNT_NAME>.queue.core.windows.net/",
    "table": "https://<STORAGE_ACCOUNT_NAME>.table.core.windows.net/",
    "web": "https://<STORAGE_ACCOUNT_NAME>.<ARBITRARY_VALUE>.web.core.windows.net/"
  },
  ...
}

az-storage-show.sh

# Get the endpoint URL
az storage account show \
    -g <RESOURCE_GROUP_NAME> \
    -n <STORAGE_ACCOUNT_NAME>

github-actions-workflow-structure.yaml

name: <WORKFLOW_NAME>
on: <EVENT>
jobs:
  <JOB_NAME>:
    runs-on: <RUNNER>
    steps:
    - name: <ACTION_NAME>
      uses: <ACTION>

github-actions-workflow.yaml

name: Publish Static Web App to Azure Blob Storage

on: push

jobs:
  build_and_publish:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout the repo
      uses: actions/checkout@v1

    - name: Login to Azure
      uses: Azure/login@v1
      with:
        creds: ${{ secrets.AZURE_CREDENTIALS }}

    - name: Install npm packages
      shell: bash
      run: |
        cd $GITHUB_WORKSPACE/src/WebApp
        npm install

    - name: Build app
      shell: bash
      run: |
        cd $GITHUB_WORKSPACE/src/WebApp
        npm run build

    - name: Test app
      shell: bash
      run: |
        cd $GITHUB_WORKSPACE/src/WebApp
        npm run test:unit

    - name: Publish app
      uses: Azure/cli@v1.0.0
      with:
        azcliversion: latest
        inlineScript: |
          az storage blob upload-batch -s $GITHUB_WORKSPACE/src/WebApp/dist -d \$web --account-name ${{ secrets.STORAGE_ACCOUNT_NAME }}

gridsome-build.sh

# Build the web app
gridsome build

gridsome-create.sh

# Install gridsome
npm install -g @gridsome/cli

# Create a website
gridsome create WebApp

gridsome-npm.sh

# Run the web app locally
npm run develop

# Build the web app
npm run build

gridsome-run.sh

cd WebApp

# Run the web app locally
gridsome develop