nuxt.jsで構築した静的サイトをGitHub ActionsでAzureBlobにデプロイして激安Webサイト運用

これは何？

GitHub Actionsを使ってAzureBlobに、サイトをデプロイする方法を書きます。
静的サイトジェネレーターのメリットは、多くはレスポンスがよくなる事ですが、静的サイトですので、Blobのような単純なファイル置き場にファイルを配置するだけでも、Webサイトとして動作せる事ができます。
これを使うと、Azure Web Appsのような、Webサイトホスティング環境を使うよりも断然コストが安く済みます。
とかいう前置きよりも、GitHub Actionsを使った事がなかったので、一度使ってみたかったというのが正直な所です。

前提

多分、この記事にたどり着いた方は、既にnuxt.jsでGitHub Pagesのデプロイを行っているはずです。というわけで、nuxt.jsでの静的サイトの構築方法などは、他の記事にお任せして、いきなりGitHub Actionsを使う所から始めます。

Azure Blob Strage

AzureストレージアカウントからBlobコンテナを一つデプロイしておいてください。
デプロイ後は、必要な情報をメモか、ブラウザで表示しておいてください。必要な情報は下記の通りです。

• コンテナURL(https://Blobアカウント名.blob.core.windows.net/コンテナ名)
• AzureBlobのアクセスキーの接続文字列

GitHub Actions

まずは、ここから始めます。

ページが切り替わってyamlファイルの編集ページになったら、下記のように書きます。
日本語の所は、先ほどのAzureBlobの情報を記入（{}はいらないよ）

参考：https://github.com/marketplace/actions/azure-blob-storage-upload

あとは、保存してあげれば、自動でGitHub Actionsがデプロイを開始してくれます。