静的WebサイトをAzureにGithubからDeployする

Summary

• 静的WebサイトのホストにはAzure storageを使う。
• GithubからのDeployにはGithub actionsを。

Azure storage

Webサイトを提供するためにAzure storageに直接アクセスしてもらうのは不思議な感じもするが、そういうものらしい。Azure web appsを使うにはこちら

StorageV2/StandardとしてStorage accountを作成する。その後、作られたリソースを開き、左のメニューからStatic websiteを選択してEnableする。

すると自動的に$webコンテナが作成され、表示されたURLにアクセスするとそのコンテナの中身が提供される。

Custom domainとSSLを使うためには、さらにAzure CDNを使う必要がある。それについてはまた次回。

Github Actions

次に、GithubからのDeployを設定する。これにはいろいろな方法があると思うが、今回はGithub actionsを使用する。やり方はいろいろあるが、今回はAzure CLIを使用した。

例えばこんな感じ。基本的にはドキュメント通り。$webやconnection stringへシングルクォーテーションを付けるのを忘れずに。Azure storageのConnection stringはGithubのsecretsとして登録した。これはProjectのSettingsページから登録できる。

# This workflow will build and push a node.js application to an Azure Storage on every push to the master branch.
on:
  push:
    branches:
      - master

env:
  NODE_VERSION: '12.x'

jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master
    - name: Use Node.js ${{ env.NODE_VERSION }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ env.NODE_VERSION }}
    - name: npm install, build, and test
      run: |
        # Build and test the project
        npm install
        npm run build
        npm run test --if-present
    - name: 'Deploy to Azure Storage'
      uses: azure/CLI@v1
      with:
        azcliversion: latest
        inlineScript: az storage blob upload-batch -d '$web' -s ./build --connection-string '${{ secrets.AZURE_STORAGE_CONNECTION_STRING }}'