01 / AZURE BASICS
学習目標と所要時間
Freeと正しいパスを選び、Actionsの成功後に標準HTTPS URLを確認できる。
前提：前章までのファイルと学習記録を用意します。
02 / AZURE BASICS
説明：仕組みと具体例
この章の考え方
詳しく見る
AzureポータルでStatic Web Appsを作成すると、GitHubの対象リポジトリとブランチに連携し、.github/workflows配下に公開処理の設定が追加されます。初回はActionsが完了してから表示を確認します。Azureのリソース作成完了と、サイトファイルの公開完了は別の状態です。
具体的な仕組み
詳しく見る
プレーンなHTML・CSSではビルドプリセットをCustom等の静的ファイル構成にし、app_locationは/、api_locationは空、output_locationも空にします。NodeやReactのビルドは不要です。生成された設定で場所が異なると、index.htmlが見つからず失敗したり空の内容を配ったりします。
使うときの判断
詳しく見る
基本はazurestaticapps.netの標準ドメインを使い、TLS証明書はサービス側で扱います。独自ドメインの購入は不要です。GitHubの認可画面では全リポジトリでなく、可能な範囲で教材対象だけに絞ります。組織の制約で連携できない場合は管理者と相談し、本人が許可されるまではローカル演習を続けます。
構成と権限
詳しく見る
下のYAMLは静的ファイル向けの独立した完全例です。YAMLは字下げで構造を表す設定形式です。教材ではAzureが生成したワークフローを基本とし、例を追加して二重に公開しません。置き換えて使う場合は、既存のSettings→Secrets and variables→Actionsで生成済みSecrets名を確認し、AZURE_STATIC_WEB_APPS_API_TOKEN部分だけその名前へ合わせます。秘密の値そのものをYAMLへ貼りません。usesは実行する公開アクション、skip_app_buildはビルド済みの静的ファイルをそのまま使う指定です。
03 / AZURE BASICS
場面で学ぶ：Azure Static Web AppsでHTTPS公開する
場面を順に追う解説アニメです。初期状態は停止しています。「次の場面」でゆっくり読むか、自動再生を選べます。動きを減らすOS設定では手動で進めます。
04 / AZURE BASICS
操作手順：一つずつ確かめる
- AzureポータルでStatic Web Appsを検索し、本人が作成画面を開く。サブスクリプションと専用リソースグループを確認する。
- Hosting planのFreeを選び、作成先リージョンと教材用の名前を記録する。Standardや追加の監視・APIを選ばない。
- SourceをGitHubとし、本人が認可対象を確認する。専用リポジトリ、mainブランチを指定する。
- アプリの場所/、APIの場所は空、出力場所は空を指定する。ReviewでFreeと対象を再確認して本人が作成する。
- GitHubのActionsで対象の実行を開き、checkout→ビルド／アップロード→完了の状態を読む。失敗していればURL確認より先にログを調べる。
- Azureの概要に表示される標準URLを開き、HTTPS、画像、リンク、390pxでの表示を確認する。
main更新で静的ファイルを公開する完全なYAML例。生成されたSecrets名を照合し、二重ワークフローを作らない
name: Publish static learning site
on:
push:
branches: [main]
workflow_dispatch:
permissions:
contents: read
jobs:
publish:
runs-on: ubuntu-latest
steps:
- name: Get source files
uses: actions/checkout@v4
- name: Upload static files
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
action: upload
app_location: "/"
api_location: ""
output_location: ""
skip_app_build: true
05 / AZURE BASICS
演習：自分で変え、結果を残す
リポジトリ→Actions→Static Web Apps→閲覧者の構成図に、ファイルと認証トークンの扱いを加える。
対象と目的／使用環境／変更した内容／期待した結果／実際の結果／失敗時に確かめたこと／まだ未実施のことを記録してください。スクリーンショットに認証情報や請求の個人情報を含めません。
07 / AZURE BASICS
完了チェックと学習記録
説明できたこと、実際に確認したことだけをチェックします。学習進捗と下のメモは、このブラウザーのローカルストレージへ保存し、外部送信しません。別端末とは同期せず、サイトデータ削除・プライベートモード・保存禁止では保持できない場合があります。秘密情報は記入しないでください。
08 / AZURE BASICS
よくある失敗と対処
- API欄へ/を入れる：この課題はAPIを作らないので空。
- 表示がまだ初期画面：Actionsの完了と対象ブランチを確認する。
09 / AZURE BASICS
確認日と公式資料
公式情報の確認日：2026年10月25日（日本時間）。画面・上限・契約条件は変わるため、実行前にも公式資料と自分の契約を確認してください。ログや画面の例は説明用で、実環境の操作結果ではありません。