🚀

GitHub Actions を使用し Nuxt3 RC を SPA で Azure Static Web Apps へ Deploy する

2022/05/09に公開約7,200字

Azure へのホスティングもサポートする Nuxt3 が RC になりました を読み SPA でもデプロイ出来るのかが気になり自分なりに調べてみた。

GitHub を使える事、Azure を登録している事を前提に書きます。

プロジェクトの作成をする

プロジェクトの作成

まずは、デプロイするプロジェクトを作成します。

npx nuxi init swa-nuxt3-app

SPA モードに設定を変更する

作成したプロジェクトを開き nuxt.config.ts に以下を追記します。

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 をする様に修正をします。

.github/workflows/azure-static-web-apps-wonderful-rock-0d5475f00.yml
 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 を開きます。

最後から、3行目に Visit your site at: デプロイ先URL が記述されているので、URL を開きます。

以下のようなサイトが表示できれば完了です!

今回作成したリポジトリ

swa-nuxt3-app

Discussion

ログインするとコメントできます