Azure static web app(Vue)作成からステージング環境構築まで

はじめに

この記事ではVueでAzure static web appのステージングの構築まで簡単に知りたい！という方向けの記事です。
Azure Static Web APPでは簡単にステージング環境まで構築できますが、アクセス制御に融通がが利かない場合もあります。
今回はそのような場合に力業ですが対処方法を紹介しています。
どなたかの参考になればうれしいです！

事前準備としてAzure Portalとgithubへの登録をお願いします。

環境

• vue 2.6.14
• npm: 7.21.1
• node: 14.17.5

Azure Static Web App作成

まず、AZureのポータルサイトへ移動し、静的Webアプリページに移動します。

作成を押して

作成ページに移動します。リソースグループの新規作成から、リソースを作成します。

今回は以下のように入力しました。

GitHubと連携してデプロイを行うため、サインインします。

ここではgithubのレポジトリを選択します。

もし、レポジトリを作成されていない方はgithubのrepositoryのNewから作成できます。

今回はVueを使用するのでプリセットはVue.jsを選択します。

確認及び作成を押して次のページでも作成押したらAzure static web appの作成は完了です。

Githubクローン

ローカルにgitをクローンします。

githubページのcodeタブからgithubのURLをコピーします。

gitをクローンしたいディレクトリに移動し、クローンします。

git clone <githubからコピーしてきたURL>

処理が完了したら、vue.jsの環境を構築します。
まず、プロジェクトを作成します。
.githubファイルがある場所へ移動し、vueプロジェクトを作成します。

cd app-test
vue create .

ここでvueのバージョンを選択して、処理を完了させます。
今回はVue2を使用します。

npm run serveを実行し、ページが見れたら成功です。

ここまで完了したら、いったんgithubのmainに反映させます。

git add .
git commit -m "first commit"
git push origin main

これでgithubに反映されます。
githubのActionsタブを見ると、ビルド&デプロイを処理していることがわかります。

この処理が完了したらAzure Static Web Appへデプロイできています。
Azure Portalの静的WEBアプリ->該当するプロジェクト->URLからサーバーが更新されているかが確認できます。

あとは変更をmainブランチへpushするようにすれば自動的にサーバーが更新されるようになります。

ステージング環境の作成

Azure static web appではステージング環境をGithubのPullRequestを作成することで簡単に作成できます。
まず、developブランチを作成し移動します。

git branch develop
git checkout develop

git branchでdevelopにいることを確認できれば大丈夫です。

次にHelloWorld.vueを以下の様にします。変更したことが分かればどんな変更でも問題ないです！

HelloWorld.vue

<template>
  <div class="hello">
    <h1>Changed!</h1>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

}
</script>

ローカル環境でnpm run serveを行い,実行すると以下のようなページが確認できます。

これをdevelopにpushします。

git add .
git commit -m "change HelloWorld.vue"
git push origin develop

そして、githubへ移動するとpull requestができます。今回はCompare & pull requestから作成していきます。

比較が無事に終わったら以下のような画面になります。github-actionsのbotがステージ環境のURLを知らせてくれます。

また、Azure Portalの環境からステージング環境を確認できます。ステージング環境はFreeプランだと最大3つまで作成できます。

このように作成したステージング環境はpullrequestを承諾すると消えてしまうので注意が必要です。

アクセスの制御

Azure Static Web Appではconfigファイルを追加することでページをアクセスする人を制御できます。
今回はgithubアカウントで制御する方法を紹介します。

staticwebapp.config.jsonの作成

staticwebapp.config.jsonを作成します。格納する場所はpublicの中にします。
このファイルではadminという権限がないとページを正しく表示できない設定にしています。

public/staticwebapp.config.json

{
    "navigationFallback": {
        "rewrite": "index.html",
        "exclude": [""]
    },
    "routes": [
        {
            "route": "/login",
            "rewrite": "/.auth/login/github"
        },
        {
            "route": "/logout",
            "rewrite": "/.auth/logout"
        },
        {
            "route": "/*",
            "allowedRoles": ["admin"]
        }
    ]
}

このファイルを追加し、pushすると以下のようなページが表示され、アクセスできないことが確認できます。

これからgithubユーザーに権限を付与してアクセスできるようにします。
まず、Azure Portalのロール管理に移動します。

招待を押します。すると招待する人へのリンクを作成できます。今回は以下の様にしました。
ユーザーハンドルにはGithubのユーザーIDを入力して下さい。

生成を押すとリンクが作成されるので、リンク先に移動し、githubでのサインインが完了すると権限の付与が完了しています。

先ほどアクセスできていなかったページのURLに/loginを付け加えるとgithubでログイン処理が行われページが見れるようになります。

ステージング環境のURLが変わるのがめんどう

Azure Static Web Appでは簡単にステージング環境が作成できますが、pullrequestを作成するたびにURLが変わったり、staticwebapp.config.jsonが環境ごとに設定できません。
そのため本番環境は誰でもアクセスできて、ステージング環境では権限を付与されたユーザーのみアクセスできるという環境が作りにくいです。

それを今回力業で解決していきます。大きくやることは以下の二つです。

• azure static web appをdevlopを対象として作成する
• CI/CDを変更し、読み込ませる設定ファイルを変更させる。

azure static web appをdevlopを対象として作成する

devlop用のプロジェクトを作成してサーバーを分けようという考えです。こうすることでステージング環境のURLは変更されません。

作成は簡単で前述したようにAzure Portalで静的Webアプリの作成を行います。
前述した方法の変更点としては分岐をdevelopにすることです。
今回は以下の様に設定しました。

これで第一段階は終了です。

CI/CDを変更し、読み込ませる設定ファイルを変更させる

CI/CDが標準だとビルド -> デプロイという流れになりますが、
今回は変更してビルド -> 設定ファイルの変更 -> デプロイ　という流れになるように変更します。

これはこちらのサイトを参考にさせていただいています。

まず、developブランチをpullします。

git pull origin develop

すると.github/workflowには2つのymlファイルがあることが確認できます。
このファイルでgithubでのデプロイなどを制御しています。
これらのファイルはそれぞれmain、develop用のファイルとなっていて、今回は本番環境用のmainの方のみを編集します。
ファイルの中を見れはどのブランチを対象としているかはわかります。

注意点として

• フォルダの場所等は自分の環境に合わせること
• azure_static_web_apps_api_tokenを自分のものに変更すること(変更前のファイルに記述してあります。)

やっていることはビルドの後にstaticwebapp.config.prod.jsonを/dist/staticwebapp.config.jsonに上書きしているだけです。

.github/workflow/*.yml

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main

jobs:

  build: # ビルド用の Job
    if: github.event_name == 'push' 
    runs-on: ubuntu-latest
    name: Build Job
    steps:
      - uses: actions/checkout@v2
   
      - run: npm ci

      - run: npm run build

      - name: move swa config
        run: mv ./staticwebapp.config.prod.json ./dist/staticwebapp.config.json
        if: github.event_name == 'push'

      
      - name: Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ }} # 自分のトークン
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: 'upload'
          app_location: '/dist'
          skip_app_build: true 

次に、vueプロジェクトのフォルダにstaticwebapp.config.prod.jsonを作成します。
このファイルはpublicの中には保存しないでください。
今回はpublicと同じ階層に保存しています。

この設定ファイルでは特段何か制限しているわけではありません。
本番環境に制限を設けたい人はこの設定ファイルを変更してください。

staticwebapp.config.prod.json

{
    "navigationFallback": {
        "rewrite": "index.html",
        "exclude": [""]
    }
}

ここまで完了したらdevelopブランチでpushしましょう。
そして、pull requestを作成して、mainにマージします。

するとgithub-actionsで処理が始まります。
この処理が無事に完了したらmainとdevelopでアクセス制御が変わっていることが確認できます！

ここまで来たら開発環境を閲覧するために新規作成したapp-test-devのプロジェクト内のロール管理でadminを追加すればで完了です！

まとめ

今回はAzure staic web appでのステージング環境構築を紹介しました。
ステージング環境構築は力業で行っているのでもっとスマートな方法があればぜひとも教えていただきたいです！コメントお待ちしています！

参考

• Azure Static Web Apps でプレビューサイトのみアクセスを制限する
• GitHub Actions
• Azure 向けの GitHub Actions とは