次の方法で共有


Azure Static Web Apps 上でユニバーサル レンダリングを使用した Nuxt 3 サイトをデプロイする

このチュートリアルでは、Nuxt 3 アプリケーションを Azure Static Web Apps にデプロイする方法について説明します。 Nuxt 3 では、サーバーと API ルートを含むユニバーサル (クライアント側とサーバー側) レンダリングがサポートされています。 追加構成を行うことなく、ユニバーサル レンダリングを使用した Nuxt 3 アプリを Azure Static Web Apps にデプロイできます。 アプリが Static Web Apps の GitHub アクションまたは Azure Pipelines タスクに組み込まれている場合、Nuxt 3 によってアプリは静的資産および Azure Static Web Apps と互換性のある Azure Functions アプリに自動的に変換されます。

前提条件

Nuxt 3 アプリを設定する

npx nuxi init nuxt-app を使用して、新しい Nuxt プロジェクトを設定できます。 このチュートリアルでは、新しいプロジェクトを使用する代わりに、既存のリポジトリ設定を使用して、Azure Static Web Apps 上でユニバーサル レンダリングを使用した Nuxt 3 サイトをデプロイする方法を示します。

  1. http://github.com/staticwebdev/nuxt-3-starter/generate に移動します。

  2. リポジトリに nuxt-3-starter という名前を付けます。

  3. 次に、新しいリポジトリをお使いのコンピューターにクローンします。 <YOUR_GITHUB_ACCOUNT_NAME> は、必ず自分のアカウント名に置き換えてください。

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter
    
  4. 新しくクローンされた Nuxt.js アプリに移動します。

    cd nuxt-3-starter
    
  5. 依存関係をインストールします。

    npm install
    
  6. 開発環境で Nuxt.js アプリを起動します。

    npm run dev -- -o
    

http://localhost:3000 に移動してアプリを開きます。いつも使用しているブラウザーで、次の Web サイトが開かれます。 サーバーと API ルートを呼び出すボタンを選択します。

Nuxt.js アプリを開始する

Nuxt 3 サイトをデプロイする

次の手順では、Azure Static Web Apps リソースを作成し、GitHub からアプリをデプロイするように構成する方法を示します。

Azure Static Web Apps リソースの作成

  1. Azure Portal に移動します。

  2. [リソースの作成] を選択します。

  3. Static Web Apps を検索します。

  4. Static Web Apps を選択します。

  5. [作成] を選択します

  6. [基本] タブで、次の値を入力します。

    プロパティ
    サブスクリプション Azure サブスクリプション名。
    リソース グループ my-nuxtjs-group
    名前 my-nuxt3-app
    [プランの種類] Free
    Azure Functions API のリージョンとステージング環境 最も近いリージョンを選択します。
    ソース GitHub
  7. [GitHub でサインイン] を選択し、GitHub で認証します。

  8. 次の GitHub 値を入力します。

    プロパティ
    組織 ご自分の希望する GitHub 組織を選択します。
    リポジトリ 以前に選択したリポジトリを選択します。
    ブランチ [main](メイン) を選択します。
  9. [Build Details](ビルドの詳細) セクションで、 [Build Presets](ビルドのプリセット) ドロップダウンから [Custom](カスタム) を選択し、既定値をそのままにします。

  10. [App location](アプリの場所) ボックスに「 / 」と入力します。

  11. [API の場所] ボックスに「.output/server」と入力します。

  12. [出力先] ボックスに「.output/public」と入力します。

[Review and create] (確認および作成)

  1. [確認および作成] を選択して、詳細がすべて正しいことを確認します。

  2. [作成] を選んで、静的 Web アプリの作成を開始し、デプロイのための GitHub Actions をプロビジョニングします。

  3. デプロイが完了したら、[リソースに移動] を選択します。

  4. [概要] ウィンドウで、 [URL] リンクを選択して、デプロイしたアプリケーションを開きます。

Web サイトがすぐに読み込まれない場合は、バックグラウンドで GitHub Actions ワークフローがまだ実行されています。 ワークフローが完了したら、ブラウザーを最新の情報に更新して Web アプリを表示できます。

リポジトリの Actions に移動することで、Actions ワークフローの状態を確認できます。

https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions

変更を同期する

アプリを作成すると、Azure Static Web Apps によってリポジトリに GitHub Actions ワークフロー ファイルが作成されます。 ターミナルに戻り、次のコマンドを実行して、新しいファイルを含むコミットをプルします。

git pull

コードを更新して GitHub にプッシュし、アプリに変更を加えます。 GitHub Actions によって、アプリが自動的にビルドおよびデプロイされます。

詳細については、Azure Static Web Apps Nuxt 3 デプロイの事前設定ドキュメントを参照してください。