はじめに

前置き

この記事はスライド形式で公開することを前提とするため、箇条書き中心になっております。

なお、この見解は私個人の見解で、所属する会社の見解とは一致しないことをご承知ください。

自己紹介

このあたりを見ていただけると助かります。

就職氷河期(1981年)生まれの
多分カウボーイエンジニア
アパレル系の特例子会社でC#開発やってます
そのほかいろんな事やってます
- PyCon JPのスタッフも……
- 同人サークル「恢徳堂」主筆など物書きも

主に使う「武器」

C#
- でもASP.NET Coreは実務では使えていない
SQL
- Transact-SQLメイン
JavaScript/TypeScript
Python
Ruby
テキスト

さて本題に入ります

Azure Static Web Apps

Build 2020でアナウンスされた新サービス
静的なWebサイトとAPIを公開出来る
- 静的ページの方はCDN使っているらしい
- APIはAzure FunctionsでJavaScript
  - LinuxのNode.jsで動いているらしい
GitHub Actionsと 密接に 結びついたデプロイ
JAMstackのほか、HugoやJekyllなどにも対応

Middleman

Ruby製静的サイトジェネレーター
Railsわかる人なら使いやすい
現在のバージョンは4.3.6
- ただし私のページではver.4系にバージョンアップ出来ていない
自社のページでも使っている

私のページ

骨董品 のMiddlemanを使って作られている
- サポートの終わったver.3系
- 更新もあまりされていない
テンプレートは5t111111/middleman-blog-drops-templateの色を変えて使用
- このテンプレート、私が使ったときはNode.jsはFont Awesomeを取ってくるのに使用するのみだった
  - 今ではbabelを使っている模様

ホスティングにどこを使っているの？

現状はNetlifyでホストしている
- ビルドはNetlifyのCI/CD環境を使用
- 設定もYAMLいらず
  - コマンドを指定するのみ
  - しかもAzure Static Web Appsより速い
もともとはGitHub Pagesでデプロイしていた
- ビルドはローカル
これを機にAzure Static Web Appsも試そう
- だけど一筋縄ではいかない

Azure Static Web Appsの設定

詳しくはMS公式ドキュメント参照。

これ、GitHub Actionsほぼそのまま。

AzureポータルでAzure Static Web Appsを作成
サブスクリプションと名前、リージョンを決める
GitHubアカウントとAzureアカウントを連携する
GitHubリポジトリを連携する

Azure Static Web Appsのビルド設定

私は以下の設定を採用

設定項目	値
App location	`/`
Api location	今回は入力しない
App artifact location	`build`

その後、リポジトリに追加されたYAMLを編集する。

YAMLの編集

YAMLの内容はGitHubの当該ファイルのページを参照。

ポイントは以下の通り。

RubyとNode.jsのセットアップを追加。
ビルドタスクを追加
デプロイタスクをデプロイのみ行う方法に変更

だが、Netlifyでは動くのにGitHubでは動かない！

どこがまずかったのか

Font Awesome 4.7.0になぜかスクリーンリーダー向けの増えていたため
package.jsonにnpm run buildの設定がなかった

対処

Font Awesomeをver.5系のFree版にアップデート
npm run buildの設定を追加
- ただし 何もしない
- ビルドはデプロイ前に行う形とする

その結果

実際にAzure Static Web Appsにデプロイできました！

ただしデプロイはNetlifyの方が速かったです。

なので、今後もNetlifyで運用を続ける予定です。

そういえばリニューアルは？

PyCon JP 2019で発表したCMS + JAMstack化は現在頓挫中です。

余裕ができたらこちらの方も計画を進めます。

Azure Static Web Appsに骨董品のMiddlemanで作られたページをデプロイしてみた