GitHub Actions を使用し Nuxt3 RC を SPA で Azure Static Web Apps へ Deploy する
Azure へのホスティングもサポートする Nuxt3 が RC になりました を読み SPA でもデプロイ出来るのかが気になり自分なりに調べてみた。
GitHub を使える事、Azure を登録している事を前提に書きます。
プロジェクトの作成をする
プロジェクトの作成
まずは、デプロイするプロジェクトを作成します。
npx nuxi init swa-nuxt3-app
SPA モードに設定を変更する
作成したプロジェクトを開き nuxt.config.ts に以下を追記します。
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
+ ssr: false,
+ target:"static",
})
.output/public を生成する
以下コマンドを実行します。
npm run generate
成功すると以下に記述されている通り、.output/public に、generate 成果物が生成されます。
PS C:\Projects\Nuxt3\swa-nuxt3-app> npm run generate
> generate
> nuxt generate
Nuxt CLI v3.0.0-rc.2 22:33:12
i Vite client warmed up in 1010ms 22:33:16
i Client built in 1314ms 22:33:16
i Building server... 22:33:16
√ Server built in 886ms 22:33:17
√ Generated public .output/public nitro 22:33:17
i Initializing prerenderer nitro 22:33:17
i Prerendering 3 initial routes with crawler nitro 22:33:18
├─ / (6ms) nitro 22:33:18
├─ /200 (1ms) nitro 22:33:18
├─ /404 (1ms) nitro 22:33:18
√ You can now deploy .output/public to any static hosting!
後はリポジトリを作成し、今作成したプロジェクトを push をすれば、プロジェクトの作成は完了です！
Azure Static Web Apps にリソースを作成しデプロイをする
リソースの作成
まず、AzurePortal を開きます。
画面左上にある リソースの作成 を選択し、テキストフォームに Static Web App と検索をし、検索をします。
すると、静的 Web アプリが表示されるので作成を押下します。
静的 Web アプリの作成 が始まるので、リソースグループ等を設定していきます。
今回は以下のように設定したいと思います。
リソースグループ: rg-nuxt3-app
名前: app-nuxt3-spa
プランの種類: Free: 趣味または個人的なプロジェクト用
リージョン: East Asia
デプロイ詳細から、ソース から GitHub を選択し自身の GitHub アカウントを連携します。
連携後は以下の項目に以下の内容を設定し、確認および作成 を押下します。
組織: 自身の GitHub アカウント
リポジトリ: 上記で作成したリポジトリ
分岐: 資材が置かれているブランチ
ビルドのプリセット: Custom
アプリの場所: /
出力先: .output/public
設定内容を確認し、作成を押下します。
リソースの作成は、これで完了です！
自動生成された Deploy 用の Yaml を修正する
リソースの作成が完了後、GitHub にあるリポジトリを確認すると .github/workflows が追加されています。
ですが、自動生成された yaml は、npm run build が前提になっているので、npm run generate をする様に修正をします。
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- master
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- master
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WONDERFUL_ROCK_0D5475F00 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: ".output/public" # Built app content directory - optional
+ app_build_command: "npm run generate"
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WONDERFUL_ROCK_0D5475F00 }}
action: "close"
上記の修正をリポジトリに push し、GitHub Actions が以下のように完了するのを待てば終わりです！
お疲れ様です！SPA でのデプロイが完了しました！
デプロイされた環境を確認する
完了した、workflows の Build And Deploy を開きます。
最後から、３行目に Visit your site at: デプロイ先URL が記述されているので、URL を開きます。
以下のようなサイトが表示できれば完了です！
Discussion