Static Web Appsをデプロイするまで
既にAzureのアカウントがあってサブスクリプションを作成済みという状態を前提条件とします。
リソースグループを作成する
今回作りたいのはStatic Web Appsですが、リソースはどこかのリソースグループに入れる必要があるので作ります。
リソースグループ名を入力します。
リソースにはマイクロソフトで書かれている命名規則があるので参考にするといいです。
リソースグループなのでrg-というリソース名から始めます。
リージョンはJapan Eastにしておきます。
Japan WestはVMとかのリソースが選べないものがあったりするので、リソースが豊富なJapan Eastを選択します。
タグは今回特に設定不要なのでこのまま確認及び作成ボタンを押します。
Static Web Appsで公開する用のアプリを用意する
まずはリリースするというのを目的にしているので、既に作ってくれているサンプルで構成していきます。
以下はvueをベースに作成されたサンプルです。
https://github.com/staticwebdev/vue-basic/generate
今回、私が使うのはどれだったか忘れたんですが、デプロイの設定とかは特に変わらないので上記のサンプルを使えば以降も問題なく動作するはずです。
Static Web Appsを作成する
リソースグループを作成したら、そのリソースグループを選択します。
そこで作成をクリックします。
検索欄にStaticと打てば静的Webアプリというのが出てきます。
こちらの作成をクリック
Static Web Appsの作成画面にきました。
以下を入力していきます。
リソースグループ：こちらは先ほど作成したリソースグループを選択します。rg-stap-sampleとなっているはずです。
名前：こちらも命名規則に則り、stapp-sampleとかにしておきます。
プラン：Freeを選択します。比較ページがあるのでそこで確認できますが、ざっくり言うと認証周りやセキュアな要件でごにょごにょしたい時にStandardのプランを選んだりします。今回はFreeです。
Azure Functions APIとステージング環境のリージョン：サービス公開でリーチしたい地域と近いところを選べばいいと思いますが、AsiaにいるのでEast Asiaを選びます。
ソース：Github，Azure DevOps，その他の選択肢があります。今回はGithubでやっていきます。
選択するとアカウントの連携が必要となるので連携します。
リポジトリや分岐を選択します。
GitHub Actionsのワークフローファイルを作るためにビルドのプリセットを選択します。
フレームワークごとに選べるようになっています。
今回はVue.jsをもとに作成するのでこちらを選択します。
選択すると、以下の欄が出てきます。
デフォルトのままで問題ないです。
APIの場所については、Static Web AppsからAzure Functionsを呼び出す際に必要になってきますが、今回はAPIを作らないので空でOKです。
今回もタグの入力は不要なのでこのまま確認画面から作成します。
作成されたらリソースに移動します。
移動するとURLがあるのでそこをクリックします。
既にGithub Actionsでデプロイが終わっていれば公開された静的なサイトにアクセスできます。
Github Actionsを確認する
Github Actionsでデプロイが終わっているかの確認は紐づけたリポジトリーで確認します。
選択したリポジトリーのActionsをみると、実際にデプロイの状態が見れます。
このスクショは完了後に撮っちゃいましたが、途中だとグルグルしてます。
ざっくりGitHub Actionsについて確認する
GitHub Actionsで使用するワークフロー(ビルドしてデプロイする設定が書かれたファイル)は、Githubの連携時に自動的に作成されます。こちらのファイルは、.github/workflowsに作成されています。
実際の中身は以下です。
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GENTLE_MEADOW_0CE9A0D00 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: "dist" # Built app content directory - optional
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GENTLE_MEADOW_0CE9A0D00 }}
action: "close"
シークレットの情報などはGithubの構成情報から拾ってくるようになってます。(例えばsecrets.GITHUB_TOKENとか。)
シークレットはprojectのsettingを選択して、secretsから登録します。
１から作っていくとなった場合は、以下のドキュメントを確認しながらやっていくのかなと思います。
https://docs.github.com/ja/actions/learn-github-actions/contexts
基本的には、既にあるサンプルを探してきて、デプロイ先を変更するというような感じでやっていくのが効率的だなと思いました。