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アプリページ`に移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/e2eb9b1a-0f30-8a98-8f09-ac19c4c3d5de.png)

`作成`を押して

![qiita11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/f118ac4e-1ec3-9a8e-a00e-bd5249029843.png)



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

![qiita12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/3353f7ab-2f9b-fa40-dbd7-162cef18bf7e.png)


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

![qiita13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/9c083167-f362-6d3f-291e-8350e05bb256.png)




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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/4aee5e64-e694-9f0d-2245-e463e1f94000.png)

![qiita1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/232d5262-4936-52e0-7d66-d2670d9b68be.png)




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

![qiita2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/ca114328-8b09-ae69-e29d-ed583cb761b2.png)

![qiita3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/d9ce0746-b4f8-d645-efc7-4cfe03a95fa8.png)


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



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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/1f99f353-b50e-55cf-2d28-72e3f5189e09.png)


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

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


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

![qiita4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/9348df0f-c9e8-12ba-0f72-2f6678b9c616.png)


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

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

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

```
cd app-test
vue create .
 ```

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/ee20f5a8-74b3-670b-8e2e-ca98679d24db.png)


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

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

```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/01763ffa-9e8b-d3a1-31f1-f790c004c335.png)

この処理が完了したら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`を行い,実行すると以下のようなページが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/119431d5-b553-ea2d-3852-f104c0a1c1b5.png)

これをdevelopにpushします。

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

```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/832210b3-1453-eead-3c61-eac6c786f65b.png)

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

![qiita5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/08e0f588-a9fc-8390-8b7c-497e17de3b5b.png)



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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/6364db2a-7b06-9f0e-de3c-d6d0421f0ce1.png)

:::note alert
このように作成したステージング環境は`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すると以下のようなページが表示され、アクセスできないことが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/b9f72b02-eaf4-7bf6-3a0b-b469ed5407be.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/b66d0064-babd-4dd6-cb2c-f9eb17cc3e7c.png)

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

![qiita6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/31e80bdf-8c66-b6e5-61ce-6882767fe27b.png)






`生成`を押すとリンクが作成されるので、リンク先に移動し、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`にすることです。
今回は以下の様に設定しました。

![qiita7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/96465a02-7f97-d7dd-b925-125649598116.png)

![qiita8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/46b4532a-ca63-d9b9-bccd-ccf60ec778bf.png)


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

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

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

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

https://k-miyake.github.io/blog/swa-access-control-env/

まず、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`でアクセス制御が変わっていることが確認できます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/8bf88a77-9f96-04de-cbd5-fa80a4359979.png)

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

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

#参考

- [Azure Static Web Apps でプレビューサイトのみアクセスを制限する](https://k-miyake.github.io/blog/swa-access-control-env/)
- [GitHub Actions](https://docs.github.com/ja/actions)
- [Azure 向けの GitHub Actions とは](https://docs.microsoft.com/ja-jp/azure/developer/github/github-actions)