3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

え。こんなに簡単なの!? Azure Static Web Apps

Posted at

Azure Static Web Apps プレビュー版

同じ様な名前のサービスがたくさんあって困惑しているので、実際に触ってみて理解しようと思う。
■[Azure App Service]課金プランの名前
┣ [Azure Web App]課金プランに紐づいて作成する、動的WEBアプリを動かす環境
┗ [Azure Static Web App]同じく、静的WEBサイトを公開する環境

公式サイトに [Web App Service]だったり、[WebApps]だったりするんだよね。どれが正式名称なんでしょう...。

プレビュー期間中は無料。正式リリース後もFreeプランが登場することを期待しつつ

Azure管理ポータルで Static Web App と Github を統合

リソースグループ、WEBアプリの名前、リージョンを入力します。ソースはGithubアカウントで連結します。

image.png

image.png

静的WEBアプリの準備が整ったら

Github の Actions に "Azure Static Web Apps CI/CD"が作成されていました。

image.png

そして約90秒経過すると、WEBサイトにアクセスできるようになりました。

HTML x 1個だけのテストサイトだけど、APIサーバーからJSONデータを読み込んでgoogle.visualization.ColumnChart()を使ってグラフ描画を書き換えできました。GitHub Pages みたいな使い方なのかな。

  • HTTPSでのアクセス(httpでアクセスするとhttpsに置き換えられる)。
  • 独自FQDNで公開したい場合は、Azureにカスタムドメインを設定すればよい。
  • バックアップは無い。障害あったらGithubから再デプロイすればいいですね。
  • ステージング用のURLも用意があるようです。
  • 本番用のURLは https://purple-glacier-***.azurestaticapps.net/
  • SSLサーバー証明書は[Go Daddy Root Certificate Authority -G2]でした。

image.png

まとめ

あらかじめGithubに公開するWEBサイトのHTMLが保存されている前提で、Azure Static Web App を設定したら、たぶん数十分、すぐにWEBサイトを公開、アクセスできるようになりました。仮想サーバーやサーバーOSが無いので、脆弱性やウィルス対策が不要ですね、たぶんWebApp同様に障害あっても自動復旧してもらえるだろうし、静的WEBサイトを公開するなら、このサービスがいいですね。もうIISとかApacheのWEBサーバーを準備してインフラを運用する時代じゃないんですね...。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?