チュートリアル:VuePress サイトを Azure Static Web Apps に発行する

  • [アーティクル]

この記事では、VuePress Web アプリケーションを作成して Azure Static Web Apps にデプロイする方法を説明します。 最終結果として、アプリの構築と発行の方法を制御できる新しい Azure Static Web Apps アプリケーションおよび関連する GitHub Actions が得られます。

このチュートリアルでは、以下の内容を学習します。

  • VuePress アプリの作成
  • Azure Static Web Apps のセットアップ
  • VuePress アプリの Azure へのデプロイ

前提条件

VuePress アプリの作成

コマンド ライン インターフェイス (CLI) で VuePress アプリを作成します。

  1. VuePress アプリ用の新しいフォルダーを作成します。

    mkdir static-site

  2. README.md ファイルをフォルダーに追加します。

    echo '# Hello From VuePress' > README.md

  3. package.json ファイルを初期化します。

    npm init -y

  4. VuePress を devDependency として追加します。

    npm install --save-dev vuepress

  5. テキスト エディターで package.json ファイルを開き、build コマンドを scripts セクションに追加します。

    ...
"scripts": {
    "build": "vuepress build"
}
...

  6. .gitignore ファイルを作成し、node_modules フォルダーを除外します。

    echo 'node_modules' > .gitignore

  7. Git リポジトリを初期化します。

     git init
 git add -A
 git commit -m "initial commit"

アプリケーションの GitHub へのプッシュ

Azure Static Web Apps に接続するには、GitHub のリポジトリが必要です。 次の手順では、サイトのリポジトリの作成方法を説明します。

  1. https://github.com/new で vuepress-static-app という名前で空の GitHub リポジトリを作成します (README は作成しないでください)。

  2. GitHub リポジトリをリモートとしてローカル リポジトリに追加します。 次のコマンドの <YOUR_USER_NAME> プレースホルダーの代わりに、GitHub のユーザー名を追加してください。

    git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app

  3. ローカル リポジトリを GitHub にプッシュします。

    git push --set-upstream origin main

Web アプリのデプロイ

次の手順では、新しい静的サイト アプリを作成し、運用環境にデプロイする方法について説明します。

アプリケーションを作成する

  1. Azure portal に移動します

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

  3. [Static Web Apps] を探します

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

  5. [作成]

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

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

  7. [GitHub でサインイン] を選択し、GitHub で認証します。

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

    プロパティ 値
    組織 ご自分の希望する GitHub 組織を選択します。
    リポジトリ vuepress-static-app を選択します。
    ブランチ [main](メイン) を選択します。

    Note

    リポジトリが表示されない場合、GitHub で Azure Static Web Apps を承認する必要がある可能性があります。 GitHub リポジトリを参照し、[設定] > [アプリケーション] > [認可された OAuth アプリ] の順に移動して、[Azure Static Web Apps]、[許可] の順に選択します。 組織リポジトリの場合は、アクセス許可を付与する組織の所有者である必要があります。

  9. [Build Details](ビルドの詳細) セクションで、 [Build Presets](ビルドのプリセット) ドロップダウンから [VuePress] を選択し、既定値をそのままにします。

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

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

  2. [作成] を選択して、App Service Static Web App の作成を開始し、デプロイのための GitHub Actions をプロビジョニングします。

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

  4. リソース画面で、[URL] リンクを選択して、デプロイしたアプリケーションを開きます。 GitHub Actions が完了するまで 1、2 分かかることがあります。

    デプロイされたアプリケーション

リソースをクリーンアップする

このアプリケーションを引き続き使用しない場合は、次の手順を使用して Azure Static Web App リソースを削除することができます。

  1. Azure portal を開きます。
  2. 上部の検索バーで、前に指定した名前でアプリケーションを検索します。
  3. アプリをクリックします。
  4. [削除] ボタンをクリックします
  5. [はい] をクリックして削除操作を確定します

次のステップ

カスタム ドメインの追加