Help us understand the problem. What is going on with this article?

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

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

by huideyeren
1 / 18

はじめに


前置き

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

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


自己紹介

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


主に使う「武器」

  • 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ほぼそのまま。

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

Azure Static Web Appsのビルド設定

私は以下の設定を採用

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

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


YAMLの編集

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

ポイントは以下の通り。

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

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


どこがまずかったのか

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

対処

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

その結果

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

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

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


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

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

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


ご清聴ありがとうございました

huideyeren
何でも興味を持つ雑食系ITエンジニア。今のところ興味は.NET関連多め。あとフロントエンドやPython、RubyやLinux、ドキュメンテーション、機械学習も手を出してみたいところ。まあオタク。別名はIosifとかJosephとかhuideyerenとかヨーシャとか。Twitter: @huideyeren
http://huideyeren.info/
sazaby-league-hr
株式会社サザビーリーグの特例子会社。横浜業務サポートセンターはITに特化した業務支援を行う拠点です。「障がい者による社会貢献」という当たり前の社会を「半歩先」に作ることを目指しています。
http://www.sazaby-league-hr.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした