AzureのStatic Web Appsに自動でデプロイするPipelinesを作成

# やりたいこと
Next.jsで開発しているWebアプリをAzureのStatic Web Appsにデプロイしたいです。

VS codeからデプロイすることも可能ですが、今回はPipelineを作成してmainブランチにマージされるたびに自動でデプロイできるようにします。

# 使うサービス・フレームワークなど
#### 1. Next.js
React.jsのフレームワークで、Reactより簡単にルーティング処理を実装できるようになりました。
今回デプロイするアプリもNext.jsで書いてます。

https://nextjs.org/

#### 2. Static Web Apps
Azureの無料ホスティングサービスで、ReactやVue、Angularといったクライアント側で動くフレームワーク、HTMLやCSSなどの静的コンテンツのデプロイに使用します。
VercelやNetlifyと似たようなものです。

ただ、サーバー側でのレンダリングを考慮していないので、Next.jsなどでサーバーサイドレンダリングを実装してもStatic Web Appsでは使用されないので注意が必要です。
もし仮に必要な場合はApp Serviceを使ったデプロイになります。

https://learn.microsoft.com/ja-jp/azure/static-web-apps/overview


#### 3. Azure DevOps
コードの管理やPipelineの作成はここで行います。

# 方法
#### 事前準備
・Next.jsで作成したアプリがあること（CSRのみを使ったアプリであること）
・実装したコードをAzure DevopsのReposにPushしていること
#### その１. Static Web Appsを作成
![スクリーンショット 2023-11-01 16.30.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/40e78a02-d235-c8c6-6e74-4dd8db53c192.png)

1 . リソースを作成する、対象のサブスクリプションとリソースグループを選択
2 . アプリの名前を作成
3 . プランを選択
>基本Freeプランでいいかなと思います。（文字通り無料なので）
今回はアプリにIP制限をかけたいので`Standard`プランにしています。IP制限はFreeプランではできませんので注意。

4 . リージョンを選択
> Japanがないので、今回は一番近い`East Asia`にしました。

5 . デプロイの詳細
> ここからデプロイの設定もできますが、今回は`その他`を選択しています。

#### その２. Pipelineの作成
1 . Azure Devopsにアクセスして左のサイドバーから<b>`Pipelines`</b>を選択

![スクリーンショット 2023-11-01 16.45.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/f4c2ccea-a1be-b28f-e6b3-c56405e31719.png)

<br>

2 . <b>`New pipeline`</b>を選択

![スクリーンショット 2023-11-01 16.46.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/8f59bbcd-1582-7db3-c0a5-a180ecf86fe3.png)

<br>

3 . コードはReposにあるので、<b>`Azure Repos Git`</b>を選択。次の画面で、対象のリポジトリを選択

![スクリーンショット 2023-11-01 16.46.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/3637ac19-b956-48d4-0291-e2df1fd23cbf.png)

<br>

4 . <b>`Starter pipeline`</b> を選択

![スクリーンショット 2023-11-01 16.49.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/251f34bb-d7eb-a286-3faf-cfe25ffcb7ad.png)

<br>

5 . <b>`azure-pipelines.yml`</b>が作成されるので、以下の内容を記述

```yml
# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- script: echo Hello, world!
  displayName: 'Run a one-line script'

- script: |
    echo Add other tasks to build, test, and deploy your project.
    echo See https://aka.ms/yaml
  displayName: 'Run a multi-line script'

- task: AzureStaticWebApp@0
  inputs:
    app_location: '/'
    api_location: ''
    output_location: '.next'
  env:
    azure_static_web_apps_api_token: $(deploy_token)
    NEXT_PUBLIC_API_URL: $(api_url)
```
・`trigger`は実行を開始するブランチを指定します。<b>「main」</b>と書かれているのでmainブランチにCommitがPushされるたびに実行されます。
もしmainブランチにPushされても自動で実行されて欲しくない場合は<b>「none」</b>と入力してください。

・`pool`の`vmImage`はデフォルトで<b>「ubunt-latest」</b>と書かれていて、特に変える必要はないのでこのままです。

・`script`に書かれている内容(Run..とecho..の二つ)はyml作成時にサンプルであるもので、なくて良いです。

・`task`から下が新規で記載している箇所になります。<b>「AzureStaticWebApp@0」</b>と入力してください。
> ここには対象のリソースなどを記載するので、もしApp Serviceに何か処理を入れたいときは「AzureWebAppContainer@1」と記載します。

・`app_location`はコードがある箇所を指定します。リポジトリにはNext.jsで作成したフロントエンド側のプロジェクトしかないので、ルートの<b>「/」</b>を記載します。

・`api_location`は何も書く必要ないです。

・`output_location`はBuildしたフォルダの格納場所を指定します。ですのでNext.jsだと<b>「.next」</b>になります。

・`env`には.envファイルに記載している内容や、デプロイをするStatic Web Appsのtokenを記載します。

<br>

6 . Azure Portalから<b>`deploy_token`</b>を取得

`デプロイトークンの管理`をクリックして、コピー。
![スクリーンショット 2023-11-01 18.26.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/d2802d57-3942-37c2-7a32-4c08b4bac0b5.png)


<br>

7 . envに記載している値を<b>`variables`</b>に登録

`varialbles`をクリック。

![スクリーンショット 2023-11-01 18.24.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/2e7e5e29-f237-1ec7-ed8e-f175153fdc73.png)
<br>
`New variable`をクリック

![スクリーンショット 2023-11-01 18.25.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/96d15e5b-721d-0c72-2573-92f347f89534.png)
<br>
Nameには`deploy_token`、Valueには先ほどコピーしたトークンを貼り付け。

![スクリーンショット 2023-11-01 18.30.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/ddda4fe6-c8f2-c849-4930-3a510b7bead7.png)
<br>
NEXT_PUBLIC_API_URLはアプリ内でAPIコールをするため、エンドポイントを定義していますが、必要ない人は登録しなくて良いです。

![スクリーンショット 2023-11-01 18.31.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/dc71dfdf-0bad-61e1-6d3e-d604da5a398e.png)

# 実行
<b>`「Save and run」`</b>をクリック

![スクリーンショット 2023-11-01 18.34.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/9555a55b-846c-76fa-9004-c0a58709760c.png)

<br>

Pipelineが実行されます。しばし待機..

![スクリーンショット 2023-11-01 18.41.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/5278fb21-9ca3-6282-fd28-85702d92f9fd.png)

<br>

↓のようになればOK！
![スクリーンショット 2023-11-01 18.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812049/2b2ff8de-25d6-446b-2575-6501ef170258.png)

実際にデプロイできているかAzure PortalからStatic Web Appsにアクセスしてみてください。

これでmainブランチにPush（もしくはマージ）したタイミングで自動でデプロイされるようになりました。