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

[アーティクル]
01/10/2024

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

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

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

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。アカウントがない場合は、無料でアカウントを作成することができます。
GitHub アカウント。アカウントがない場合は、無料でアカウントを作成することができます。
Git のセットアップがインストールされていること。まだの場合は、Git をインストールできます。
Node.js がインストールされていること。

VuePress アプリの作成

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

VuePress アプリ用の新しいフォルダーを作成します。
```
mkdir static-site
```
README.md ファイルをフォルダーに追加します。
```
echo '# Hello From VuePress' > README.md
```
package.json ファイルを初期化します。
```
npm init -y
```
VuePress を devDependency として追加します。
```
npm install --save-dev vuepress
```
テキストエディターで package.json ファイルを開き、build コマンドを scripts セクションに追加します。
```
...
"scripts": {
    "build": "vuepress build"
}
...
```
.gitignore ファイルを作成し、node_modules フォルダーを除外します。
```
echo 'node_modules' > .gitignore
```

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

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

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

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

https://github.com/new で vuepress-static-app という名前で空の GitHub リポジトリを作成します (README は作成しないでください)。
GitHub リポジトリをリモートとしてローカルリポジトリに追加します。次のコマンドの <YOUR_USER_NAME> プレースホルダーの代わりに、GitHub のユーザー名を追加してください。
```
git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
```
ローカルリポジトリを GitHub にプッシュします。
```
git push --set-upstream origin main
```

Web アプリのデプロイ

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

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

Azure portal に移動します
[リソースの作成] を選択します
[Static Web Apps] を探します
[Static Web Apps] を選択します。
[作成]

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

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

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

次の GitHub 値を入力します。

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

Note

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

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

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

[確認および作成] を選択して、詳細がすべて正しいことを確認します。
[作成] を選択して、App Service Static Web App の作成を開始し、デプロイのための GitHub Actions をプロビジョニングします。
デプロイが完了したら、[リソースに移動] を選択します。
リソース画面で、[URL] リンクを選択して、デプロイしたアプリケーションを開きます。 GitHub Actions が完了するまで 1、2 分かかることがあります。

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

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

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

次のステップ

カスタムドメインの追加

次の方法で共有