Azure Static Web Apps とNetlifyで表示速度を比較してみた

Jul 5, 2020 19:00 · 4225 words · 9 minute read azure

このブログは、Netlify + Hugoで公開しています。
先日、記事内の画像サイズを小さくすることで、記事の表示速度向上を図りました。

今回はMicrosoft Build 2020で発表された「Azure Static Web Apps」で、記事の表示速度を比較してみました。

Azure Static Web Appsとは
Azure Static Web AppsでHugoアプリを公開する
表示速度比較
ビルド速度
Azure Static Web Appsで使える機能
機能について気になったこと
- SSL証明書
- アクセスログ
利用料金
強み
- Azure Static Web Appsの強み
- Netlifyの強み
最後に

Azure Static Web Appsとは

Azure Static Web Apps は、静的なWebアプリを公開するためのサービスです。
GitHubのリポジトリと紐づけて公開するWebアプリを管理します。Github Actionsと連携させることで、GitHubにPushするだけで、自動的に更新内容を公開することができます。
GitHubにPushするだけでWebアプリを公開できるので、Netlifyを同じような感覚で使うことが可能です。

詳細はこちら

Azure Static Web Apps について

Azure App Service に Static Web Apps が登場！

Azure Static Web AppsでHugoアプリを公開する

まずはAzure Static Web Appsで公開するWebアプリを作成します。
今回は、こちらで高速化した記事と同じ環境を作成します。

PNG画像ファイルを圧縮してブログを高速化した

公式のチュートリアルを参照しながら進めます。

チュートリアル:Hugo サイトを Azure Static Web Apps プレビューに発行する

Hugoアプリ作成

$ hugo new site azure-hugo-sample-site
$ cd azure-hugo-sample-site/

gitリポジトリを初期化

$ git init

Hugo Themeをインストールします。
今回は速度を比較したいので、比較する記事で使っているのと同じThemeを設定します。

hugo-theme-cactus-plus

config.tomlは、exampleSiteのものをそのまま使わせてもらいます。

$ git submodule add https://github.com/nodejh/hugo-theme-cactus-plus.git themes/hugo-theme-cactus-plus
$ cp themes/hugo-theme-cactus-plus/exampleSite/config.toml ./

テスト記事を投稿

$ hugo new posts/test-post.md
$ cat content/posts/test-post.md 
---
title: "Test Post"
date: 2020-06-16T09:45:09+09:00
draft: true
---

## test post

test post

Hutoサイトの動作を確認

$ hugo server -D

無事表示されました。

変更をcommit

$ git add -A$ git commit -m "initial commit"

HugoアプリをGithubにPush

Azure Static Web Apps に紐付ける、GitHubのリポジトリを作成します。
チュートリアルによると、readmeは作成しない方がいいようなので従います。

GitHubリポジトリを、ローカルのgitリポジトリに追加して、GitHubにPush

$ git remote add origin https://github.com/kapiecii/azure-static-web-apps.git
$ git push --set-upstream origin master

HugoアプリをAzureにデプロイ

Azure PortalにログインしてAzure側の設定をしていきます。
久しぶりにAzureにログインしたら見た目が結構変わってました。

過去にAzureを触ったときの記事はこちら。

機械学習（Custom Vison）で指名手配犯を探せるか試してみた

Azure FunctionsでPythonを使ってみた

Static Web Appを検索して選択します。
2020/06/27時点ではまだPreview版です。

「静的Webアプリの作成」をクリックし、静的Webアプリの設定に進みます。

サブスクリプションは「Pay As You Go」を選択しています。使った分だけ支払うプランですが、2020/06/27時点では、プレビュー版であるため無料です。
リソースグループを新規作成し、「hugo-static-app」という名前にしました。

静的Webアプリの名前と、地域を選択します。
私は日本在住なので、一番近い「East Asia」を選択しました。

GitHubアカウントでサインインします。

紐付けるGitHubのリポジトリを選択して、「次：ビルド」

ビルド時の設定をします。

アプリの場所:  /
APIの場所: 空欄
アプリの成果物の場所: public

APIの場所は、Azure Fuctionsを使う場合に設定するようです。設定内容は、公式のチュートリアルに従っています。

タグも設定できまずが、今回は使用しません。

最後に、設定内容を確認して「作成」します。

作成できました。

次は、ローカルでGitHub Actionsの設定をします。ローカルのterminalでgit pullして、自動生成されたYAMLファイルを取得します。

YAMLファイルの詳細はこちら。

GitHub Actionsのワークフロー構文

$ git pull
.github/workflows/azure-static-web-apps-lively-meadow-XXXXXXXX.yml

git pull で取得したYAMLファイルをエディタで編集します。

$ vim .github/workflows/azure-static-web-apps-lively-meadow-XXXXXXXX.yml

今回はHugoを利用するので、「- uses: actions/checkout@v2」の部分に下記のように追記しました

    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod.
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2.4.11
        with:
          hugo-version: "latest"  # Hugo version: latest OR x.y.z
          # extended: true
      
      - name: Build
        run: hugo

変更後の全体像はこんな感じです。

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod # add this line.
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2.4.11
        with:
          hugo-version: "latest"  # Hugo version: latest OR x.y.z
          # extended: true
      
      - name: Build
        run: hugo

      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LIVELY_MEADOW_043D2F900 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          app_artifact_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LIVELY_MEADOW_043D2F900 }}
          action: "close"

GitHub ActionsでHugoを使う方法については、下記を参照するのが良さそうです。

GitHub Actions for Hugo

更新したYAMLファイルをPushします。

$ git add -A
$ git commit -m "Updating GitHub Actions workflow"
$ git push

Azure Static Web Appの画面から、GitHub Actionsの実行状況を確認できます。

GitHub Actionsの処理が終わると、ブラウザからHugoアプリを確認することができますが、この時点だと、表示が崩れています。
config.tomlのbaseurl設定を変更します。

Azure Static Web Appsの概要ページからURLを確認してbaseurlの値に設定します。

# Site settings
baseurl = "https://lively-meadow-043d2f900.azurestaticapps.net/"

Hugoアプリが公開されました。

表示速度比較

表示速度比較用の記事をHugoに追加します。
今回追加するのは、この記事です。

子供が自由に落書きして遊べる筆のおもちゃをペットボトルで作ってみた

Azure Static Web AppsにコンテンツをPushしました。
早速ブラウザからアクセスし、表示速度を計測してみます。

1回目の計測: 3.65秒

2回目の計測: 4.02秒

同じ時間帯で、Netlifyで公開している記事にもアクセスしてみます。

1回目: 5.41秒

2回目: 5.51秒

今回の計測では、Azure Static Web Appsの方が30%程早いという結果になりました。
サーバの位置や、プレビュー版ゆえの利用者の少なさが関係している可能性もあります。

ビルド速度

GitHub Actionsの結果をみると、1記事公開した今回の場合には、大体1分半〜2分程度の時間がかかっていました。

Azure Static Web Appsで使える機能

実際にAzure Static Web Appsを触ってみると、便利そうな機能がたくさんありました。
画面上から確認できた機能を列挙します。

アクセス制御 (IAM)

AzureのIAMでアクセス制御することができます。

構成

DBとの接続や、Webアプリで利用する環境変数のようなものを設定できるようです。

Azure Static Web Apps (プレビュー) のアプリケーション設定を構成する

カスタムドメイン

「カスタムドメイン」のメニューから、独自のドメインを設定できます。

関数

Azure Functionsと連携できるようです。
Azure Functionと簡単に連携できると、一気にできることが増えそうですね。

環境

リポジトリに紐付ける形で、運用環境とステージング環境を扱うことができます。
とても気が利いています。

ロール管理

認証済みユーザの管理ができるようです。認証処理を任せられるのは、とてもありがたいです。

Azure Static Web Apps プレビューの認証と承認

ロック

リソースグループの削除や読み取り専用といった制限ができるようです。

テンプレートのエクスポート

プレビュー版では、まだ使えませんでした。

どうやら、リソース管理周りの設定をエクスポートできるようです。

Azure Resource Manager documentation

What is Azure Resource Manager?

機能について気になったこと

SSL証明書

カスタムドメインが設定できるので、おそらく何か方法があると思うのですが、SSL証明書の設定方法がわかりませんでした。
カスタムドメインを設定すると、SSL証明書を設定するメニューが表示されるのかもしれません。

アクセスログ

他社の類似するサービスにも存在しないのですが、公開しているWebアプリに対するアクセスログを確認する機能があると便利だなと思いました。

利用料金

Azure Static Web Appsは、プレビュー期間中は無料です。

Static Web Apps の価格

Azure Static Web Appsでは、GitHub Actionsを利用します。GitHub Actionsは、2,000分/月までは無料で使うことができます。
今回の場合だと、1回のPushで大体2分くらいかかっていたので、毎月1,000回くらい無料でPushすることができます。

強み

今回比較をする中で、Azure Static Web AppsとNetlifyのそれぞれに強みがあるなと感じました。

Azure Static Web Appsの強み

GitHub Actionsと連携しているので、細かな調整ができそう
Azure Functionsとの連携が簡単
認証・承認やDBなど、Azureの機能と連携させることができる
運用環境とステージ環境の設定ができるなど、運用面を考慮した機能がある

Netlifyの強み

Webアプリ公開までが、とてもシンプル

NetlifyでもAzure Functionsとの連携をしている方もいるようですが、デフォルトで連携機能が用意されているAzure Static Web Appsの方が優位に感じました。

おそらく他にもNetlifyの強みがあると思います。プログで使っているのに良いところをたくさん挙げられなくてごめんよ、Netlify。

最後に

Azure Static Web AppsとNetlifyで表示速度の比較をしました。

最初は表示速度の比較が目的だったのですが、最終的にはAzure Static Web Appsの機能の豊富さが印象に残りました。
AzureのIAM、ロール管理、Azure Functionsとの連携など、Azure Static Web Appsを使う理由を多く見つけることができたと思います。
あと気になるのは費用面ですね。おそらく驚く程高額になることは無いと思っているのですが、個人/業務でどれくらい気軽に使える価格になるのか気になります。