1923

都内と業界の隅っこで生活しているエンジニアのノート

Azure Storage での静的 Web サイト ホスティング

前回作ったD3.jsの世界地図をベースに簡単な地図の色塗りサイト作りましたので、Azure Storage + Azure CDN の静的 Web サイトでホスティングします。

もともとAzure Repos でソース管理していましたので、Azure Pipelines でビルドからデプロイの自動化までは作業は大まかに3つ。しばやんのブログの通り行うだけですので簡単です。

  • Azure Storage 設定
  • Azure Pipelines 設定
  • Azure CDN 設定

今回、Vue.js, Vuetify, TypeScriptで作っていますので、Azure Pipelinesの設定はほぼ同じです。
https://github.com/shibayan/daruyanagi.com/blob/master/azure-pipelines.yml

Pipeline caching が GA したので Cache@2 を使って、切り戻し用のバックアップ処理を追加している程度の違いです。

azure-pipelines.ymlにバックアップを追加

- task: AzureCLI@1
  inputs:
    azureSubscription: 'Subscription1'
    scriptLocation: 'inlineScript'
    inlineScript: |
      end=`date -d "5 minutes" '+%Y-%m-%dT%H:%M:%SZ'`
      sas1=`az storage container generate-sas -n '$web' --account-name $1 --https-only --permissions dlr --expiry $end -otsv`
      sas2=`az storage container generate-sas -n 'archives' --account-name $1 --https-only --permissions dlrw --expiry $end -otsv`
      ./azcopy sync "https://$1.blob.core.windows.net/\$web?$sas1" "https://$1.blob.core.windows.net/archives/$(Build.BuildNumber)?$sas2" --recursive --delete-destination=true
    arguments: 'storage1'
  displayName: 'Archive to Storage'

バックアップは Azure Blob のライフサイクル管理)で7日で削除しています。

Azure Blob Storage のライフサイクルの設定

{
    "rules": [
        {
            "enabled": true,
            "name": "LifeCycle1",
            "type": "Lifecycle",
            "definition": {
                "actions": {
                    "baseBlob": {
                        "delete": {
                            "daysAfterModificationGreaterThan": 7
                        }
                    }
                },
                "filters": {
                    "blobTypes": [
                        "blockBlob"
                    ],
                    "prefixMatch": [
                        "archives"
                    ]
                }
            }
        }
    ]
}

Microsoft Learn にAzure CDN と Blob Service を使用して、Web サイト用のコンテンツ配信ネットワークを作成する がありますので、サンドボックスで試すことも出来ます。

そのほか、サーバーサイドが使えない静的サイト+SPAということなので、HTTPS へのリダイレクトを JavaScript で追記。

<script type="text/javascript">
if(location.protocol == 'http:') {
  location.replace(location.href.replace(/http:/, 'https:'));
}
</script>

しばやんから、Microsoft Standard やVerizon Premium なら、https へのリダイレクトは CDN でもできると教えていただきました。

f:id:taka1923:20200328130303p:plain

SPA用にGoogle アナリティクスの設定

import VueAnalytics from 'vue-analytics'
Vue.use(VueAnalytics,
    {
        id: 'UA-XXXXX',
        router
    });

お問い合わせ用のGoogleフォームを追加して完了です。

Azure関連のリソースなどは会社のものを使わせていただき公開(Blank Maps)。今まで自分が旅行したところなどを塗ってみました。 f:id:taka1923:20200328113809p:plain

参考:httpからhttpsにJavaScriptでリダイレクトさせる方法