More than 3 years have passed since last update.

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

Last updated at 2020-08-16Posted at 2020-05-25

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

無料らしい（大事）

参考: Azure App Service に Static Web Apps が登場！

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

ドキュメントにGitHub Actionsと連携して〜みたいなことが書いててなんでだろう的なこと思ったけどそういえば買収されてましたね（忘れがち）

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

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

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

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

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

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

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

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

create a new fileを選択します。

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

Vue.jsで東京都の今日の天気を表示するWebサイトを作るコピペサンプル

リポジトリの完成です。

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

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

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

作成を押します。

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

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

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

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

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

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

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

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

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

参考: 爆速！Vercelとfreenomで独自ドメインのサイトを無料で作成する

ドメイン取得

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

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

CNAMEの情報を確認

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

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

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

FreenomのDNS設定

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

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

数分待つ

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

Azureの管理画面で検証

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

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

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

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

https://www.suikousaibai.ga/

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

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

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

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

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

参考: VercelでLINE BOTを動かす 2020年5月版

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

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

index.js

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

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"
      }
    ]
  }