たぶん10分で試せる。Azure Static Web AppsにWebサイトをデプロイして独自ドメイン設定とFunctionsでAPI公開まで


AzureにStatic Web AppsというJAMstack向けなサービスが登場した模様で、プレビュー段階だけど試せたのでメモ残しておきます。

**無料らしい**（大事）

> 参考: [Azure App Service に Static Web Apps が登場！](https://k-miyake.github.io/blog/appservice-static-webapps/)

NetlifyやVercel同様に静的ホスティングだけじゃなく、Functionsも利用できるのが良いですね。

ドキュメントに[GitHub Actionsと連携して〜](https://docs.microsoft.com/ja-jp/azure/static-web-apps/github-actions-workflow)みたいなことが書いててなんでだろう的なこと思ったけどそういえば買収されてましたね（忘れがち）

## 作るもの: 静的サイト & API

AzureのStatic Web ApssにVue.jsで作った簡単なアプリをデプロイします。(いつまで置いてるか分からないのでキャプチャも貼っておきます)	

### 実際にデプロイした静的サイト 

URL: https://www.suikousaibai.ga/ 

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/01e3d430-065e-17af-b139-5e46a7217f9d.png" width="300px" >

### 実際にデプロイしたAPIエンドポイント

URL: https://www.suikousaibai.ga/api/hoge

> <img src="https://i.gyazo.com/4502fc92bb7f15263fcad07b59c800a7.png" width="300px" >

## 手順1. GitHubでリポジトリ&index.htmlを作成

GitHubで新規にリポジトリ作成します。名前はなんでも良いですが、今回は`staticwebapp-vue-sample`という名前にしました。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/f2c7e3ff-a886-c2e8-f97d-4f6c0c9a028b.png" width="400px" />

`create a new file`を選択します。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/3db5a5a6-79fd-a65c-28ac-93052e4c3deb.png" width="400px" />

`index.html`を作成します。内容はなんでも大丈夫ですがコードは以下の記事のものを利用しました。

> [Vue.jsで東京都の今日の天気を表示するWebサイトを作るコピペサンプル](https://qiita.com/n0bisuke/items/439c7dac42603e7dd1aa)

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/bbdd35bc-5bb0-e5a3-525b-97b9e18113ad.png" width="400px" />

リポジトリの完成です。

> https://github.com/n0bisuke/staticwebapp-vue-sample/tree/master

## 手順2. Azureのポータルでアプリを作成

新規作成でStatic Web Appを検索して選択。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/375de5d3-3c35-1019-7e57-f46652671354.png" width="400px" />

作成を押します。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/c952b20d-bae5-fd57-00d9-74faf1088407.png" width="400px" />

サブスクリプションや、リソースグループ、アプリ名などを入力ます。

> <img src="https://i.gyazo.com/22231a87182791bf1b6e5355f63a5d90.png" width="400px" />

ここでGitHubアカウントとの連携が必須みたいです。エラーが出ました。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/fccc6cdc-1953-7ce2-fa5c-54e693bd79ec.png" width="400px" />

GitHubアカウントでサインインし、GitHubと連携させます。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/2dd532c5-523f-92b7-cd6d-d380f8e5ba54.png" width="400px" />

先ほど作成したリポジトリを選択し、作成を進めます。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/5cbc9784-d0cb-81a1-39e0-035aa8f5a996.png" width="400px" />

確認画面が出るので作成します。

> <img src="https://i.gyazo.com/2bd01c1be9b1a6dc3ce5094de16f300b.png" width="400px">

しばらく経つとデプロイが完了します。

> <img src="https://i.gyazo.com/2f2b2ed16d894b611af736e3cf26acbe.png" width="400px">

リソースに移動すると公開されたURLが表示されるのでアクセスすればOKです。

## 手順3: Freenomで無料独自ドメイン

Freenomに関しては前に書いた記事も参考に。

> 参考: [爆速！Vercelとfreenomで独自ドメインのサイトを無料で作成する](https://qiita.com/n0bisuke/items/901154531ea14f978bd4)

### ドメイン取得

Freenomでドメインを取得します。

今回は`suikousaibai.ga`というドメインを取得しました。

### CNAMEの情報を確認

AzureのStatic Web Appの管理画面で、カスタムドメイン>追加を選択します。

* 名前: www
* 種類: CNAME
* 値: 自身のアプリのURL

が表示されます。この情報をもとにfreenomのDNSを設定します。

> ![スクリーンショット 2020-05-22 16.09.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/e314678c-c838-0ff9-52cd-486499ad8618.png "スクリーンショット 2020-05-22 16.09.47.png")

### FreenomのDNS設定

Freenom側で、`Manage Freenom DNS`の画面にいきます。

> ![](https://i.gyazo.com/fa7392c6c219d63280fe6096844748ed.png)

先程のAzure側で見た情報を設定し、`Save Changes`で保存します。

> ![](https://i.gyazo.com/c2fecd96f88a6ae42cdde8d183ecf187.png)

### 数分待つ

しばらく待ちます。数分... (長いと48時間かかる場合もあるらしい)

### Azureの管理画面で検証

Azureの管理画面に戻り、ドメインを入力し、検証を押します。`www.suikousaibai.ga`という形でwwwを入れたドメインの設定でした。他にもやり方あるみたいですがドキュメントを見てみましょう。

ちなみに **プレビュー期間中は、頂点ドメインの登録はサポートされません。** とドキュメントに書いてあって、`suikousaibai.ga`だと現時点では登録できないっぽいですね。

> ![スクリーンショット 2020-05-25 23.48.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/0e18cb68-d314-9a0e-73e3-ca0435e4d539.png "スクリーンショット 2020-05-25 23.48.39.png")


検証に成功しました。と出たら追加ボタンを押しましょう。

> ![スクリーンショット 2020-05-25 23.50.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/daabf4ab-3cfa-b1ed-479b-e5f37955d2fa.png "スクリーンショット 2020-05-25 23.50.33.png")

これで静的サイトのデプロイ+カスタムドメイン設定が完了しました。

> https://www.suikousaibai.ga/ 

静的ホスティングのみの場合はここまでで十分だと思います。

## 手順4: APIフォルダを作成することでAPIが作れる

(ここの手順はVercelと同じ雰囲気でした。)

先ほど作成したGitHubリポジトリはローカルにcloneしておきましょう。

今回は`https://ドメイン/api/hoge`にアクセスするとjsonが返ってくるHOGE APIを作成します。

> 参考: [VercelでLINE BOTを動かす 2020年5月版](https://qiita.com/n0bisuke/items/a5f49193fa68f28a7f25)

APIというフォルダを作成し、その中にAPIのエンドポイントとなる名前でフォルダを作成します。今回はhogeフォルダです。

さらにそのフォルダの中に`index.js`と`function.json`を作成します。

```index.js
module.exports = async function (context, req) {
  context.res = {
     body: { 
       text: "Hello from the API" 
     }
  };
};
```

> ![スクリーンショット 2020-05-26 0.25.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/cb92568a-70e8-b78b-cac2-0808b7338216.png "スクリーンショット 2020-05-26 0.25.47.png")

`function.json`は`"route": "hoge"`の箇所を自身で設定した名前にしましょう。

```function.json
{
    "bindings": [
      {
        "authLevel": "anonymous",
        "type": "httpTrigger",
        "direction": "in",
        "name": "req",
        "methods": [
          "get"
        ],
        "route": "hoge"
      },
      {
        "type": "http",
        "direction": "out",
        "name": "res"
      }
    ]
  }
```

これでpushすればOKです。

Vercelもapiフォルダを作成してその中にAPI作成をしていくので似ている感じがしました。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/8e70187f-5ab9-8dbb-1afb-0107aa60401e.png" width="300px">

↓成功すると管理画面の関数(functions)の箇所にAPIが追加されます。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/ce2a6039-53ce-c9e7-9947-97b538fcf0c2.png" width="300px">


エンドポイントにアクセスするとindex.jsで記載した内容が表示されると思います。

> https://www.suikousaibai.ga/api/hoge

## 更新時

更新する場合はGitHubのリポジトリを編集してPushしていくやり方です。

> 参考: https://github.com/n0bisuke/staticwebapp-vue-sample

## 所感

個人的にはPaaS未満の使い方が最近好きなので割と嬉しい。
Functions使うとお金は別途かかるのか

ドキュメントも必要最低限はそろってそうな印象でした。

> https://docs.microsoft.com/ja-jp/azure/static-web-apps/

もっと色々やれそうな雰囲気あるのでこの辺好きな人は調べていきたいですね。