はじめに
前置き
この記事はスライド形式で公開することを前提とするため、箇条書き中心になっております。
なお、この見解は私個人の見解で、所属する会社の見解とは一致しないことをご承知ください。
自己紹介
このあたりを見ていただけると助かります。
- 就職氷河期(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を使っている模様
- このテンプレート、私が使ったときはNode.jsはFont Awesomeを取ってくるのに使用するのみだった
ホスティングにどこを使っているの？
- 現状は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化は現在頓挫中です。
余裕ができたらこちらの方も計画を進めます。