【超簡単】Next.jsをAzure Static Web Appsで無料公開する

はじめに

こんにちは、エンジニアのkeitaMaxです。

Azure Static Web AppsというAzureのサービスを利用すればフロントのアプリを簡単に無料で公開できるということを聞き、

Azure初心者の僕が、Azure Static Web Appsで
Next.jsのアプリケーションをGitHub Actionsでデプロイしてみようと思います。

以下URLのMicrosoft Learnのクイック スタート: Azure Static Web Apps を使用して静的サイトを初めて構築するを参考に行なっていきます。

Azure Static Web Appsとは

Azure Static Web Apps は、フル スタックの Web アプリをコード リポジトリから Azure に自動的にデプロイするサービスです。

自分の作ったフロントエンドのアプリを、GitHub などと連携して簡単にデプロイ・公開できる Azure のホスティングサービスらしいです！

デプロイするNext.jsのアプリ

以下のような簡単なアプリをGitHubActionsでデプロイをしていこうと思います。

バージョン

    "next": "15.4.5",
    "react": "^19.0.0",

スクショ

/countに以前作成した以下みたいな画面のものをデプロイしようと思います。

準備

Azureに登録してない人は以下の公式サイトから登録してください。

また、Azure Static Web AppsというVS Codeの拡張機能が必要なようなので、まだの人はインストールしてください。

静的 Web アプリを作成する

VS Codeにインストールした拡張機能を使っていきます

左下のAzureのマークを押しSign in to Azureから作成したAzureアカウントにログインをします。

Static Web Appsを左クリックしてCreate Static Web App...をクリックします。

すると以下のような感じで色々聞かれるので答えていきます。

僕はNext.js を使用していたので、以下のように回答をしました。
East Asia > 'Next.js (static export)' > 「/」 >.next

↑みたいにくるくるが終わると、↓みたいにPOPUPが出てきます。

Opem Actions in GitHubを押すと、自分のリポジトリのGitHubActionsの一覧ページにいき、デプロイしているActionsを見ることができます。

デプロイが完了すると↑のように、Static Web Appsの中に新しく何かできており、
それを右クリックからBrowse Siteを押すと、デプロイしたものをブラウザで見ることができます。

/は初期のままだったのでこんな感じになっています。

/countにアクセすると、

こんな感じで自分が作った画面が表示できます。

これでデプロイすることができました！！

また、以下のようなGitHubActionsのファイルが自動で作られていました。

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - feat/azure_deploy
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - feat/azure_deploy

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@v3
        with:
          submodules: true
          lfs: false
      - 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_PROUD_FOREST_0D3D94D00 }}
          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: ".next" # Built app content directory - optional
          ###### 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_PROUD_FOREST_0D3D94D00 }}
          action: "close"

おわりに

めちゃくちゃ簡単にデプロイまでできてびっくりしました。

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考