#はじめに
この記事では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を以下の様にします。変更したことが分かればどんな変更でも問題ないです!
<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
という権限がないとページを正しく表示できない設定にしています。
{
"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
に上書きしているだけです。
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
と同じ階層に保存しています。
この設定ファイルでは特段何か制限しているわけではありません。
本番環境に制限を設けたい人はこの設定ファイルを変更してください。
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": [""]
}
}
ここまで完了したらdevelopブランチ
でpush
しましょう。
そして、pull request
を作成して、main
にマージします。
するとgithub-actionsで処理が始まります。
この処理が無事に完了したらmain
とdevelop
でアクセス制御が変わっていることが確認できます!
ここまで来たら開発環境を閲覧するために新規作成したapp-test-dev
のプロジェクト内のロール管理
でadmin
を追加すればで完了です!
#まとめ
今回はAzure staic web appでのステージング環境構築を紹介しました。
ステージング環境構築は力業で行っているのでもっとスマートな方法があればぜひとも教えていただきたいです!コメントお待ちしています!
#参考