Azure Static Web AppsでNuxt.jsの静的サイトを爆速で公開するぞ！
自己紹介
私は東京高専の開発が好きな学生です！
この記事は東京高専プロコンゼミのアドベントカレンダー②の20日目の生地です！
Azure Static Web Appsとはなんぞ
最近、Webホスティングのサービスを結構目にするのですが、その一つにAzure Static Web Appsというのがあるのですよ。
類似サービスとの比較はこちらからどうぞ
なにわともあれ実際にやるのが早い！からやる！！
とりあえず静的サイトを今回は扱うので、Deployment TargetとRendering Modeは上のような選択にしてくださいね。
Nuxtのセットアップが終わったら、本題のAzureに入っていきます。
手順１
package.jsonのBuildを以下のように変更します。
{
"name": "static-app",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt generate", <-- ここ
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"core-js": "^3.6.5",
"nuxt": "^2.14.6"
},
"devDependencies": {}
}手順２
次にGithubに適当にリポジトリを作ってそこにPUSHしましょう
手順３
Azureにアクセスして、検索でStatic Web Appと検索すると一番目に出てくると思います。そして作成ボタンを押しましょう。
作成ボタンを押し、名前と地域を入力します。
また、右下のボタンからGithubにログインしましょう。
まぁなんか適当にリポジトリを選択し、ビルドの詳細は以下のようにしましょう。
それが終わったら、左下の作成ボタンをクリックします。
デプロイが開始され、完了したらリソースに移動します。
そこでURLが発行されているのでアクセスすると…！おそらくローカルで見たやつと同じものが見れているはずです！
また、Github Actionsからデプロイの詳細をみることができます！
自分のドメインを設定する
自分のドメインを先程デプロイしたサイトと結びつけたい場合は、リソースのカスタムドメインから追加ボタンをクリックします。
現時点では、サブドメインにのみ対応しているようです。（あんまり調べてないけど）
なので、上の画像の右に支持されているように、追加したいドメイン（ex: www.makiart.dev) なら管理しているサービスから（Google Domainなど）指定されているレコードを追加しましょう。
追加したら、カスタムドメインという入力フィールドに追加したいドメインを入力して、検証し、追加すればカスタムドメインを登録できます！
Azure Static Web Apps…優秀！
今回は静的サイトのホスティングのみしか行っていませんが、どうやら他にもAPIを一緒にデプロイしたりも、、、できるらしいのでそっちの方も試していきたいと思っています！