マルチクラウド 担当者コラム

マルチクラウド・Azure

Azure 第16回 『Azure Static Web Apps で静的Webサイトを構築（後編）』

Azure Static Web Apps とは

Azure Static Web Apps は、Githhubなどのコードリポジトリから、Azure にWeb アプリを自動的にビルドしてデプロイするサービスです。

用途としては、「個人用ブログ」「簡易的なコーポレートサイト」などが考えられます。
動的な処理が必要な場合は「Azure functions」と組み合わせることで実装可能になります。

今回行うこと

  • StaticWebappsにアプリをデプロイ

構築に用いたもの

  • Githubのアカウント
  • Azureのアカウント
  • VSCode
  • VSCodeの拡張機能
  • Git
  • Azure Staic Web app
  • Docusaurus
  • Node.js
  • Yarn

StaticWebappsの作成

  • AzurePortalにアクセスします
  • 検索ボックスで「Static」と検索します
  • 「静的Webアプリ」を選択します
  • 「作成」を選択します
  • 各項目に以下の値を入力します
  • 「確認及び作成」を選択します
  • 「作成」を選択します
項目 値
リソースグループ

Test01（新規作成）

名前

docusaurus01

プランの種類

Free

Azure Functions -

East Asia

ソース

Github

Githubアカウント

自身のアカウント

組織、リポジトリ、分岐

自身の環境に合わせてください

ビルドのプリセット

React

  • デプロイが終わりましたら、リソースに移動します
  • 「Github アクションの実行」を選択します
  • Githubが開いて、デプロイが完了していることが確認できます
  • 「URL」を選択します
  • サイトにアクセスすることができます
  • URLが自動で振られるので外部に公開が容易です
  • カスタムドメインを設定することも可能です

まとめ、所感

  • AzureStaticWebappを用いることで容易にWebアプリを作成可能
  • Markdownで書いたドキュメント等と相性が良さそう
  • CMSを使いたい場合はAppServiceやレンタルサーバー等でWordPressを使う方が良い

マルチクラウドの記事