次の方法で共有

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

この記事では、 VuePress Web アプリケーションを作成して Azure Static Web Apps にデプロイする方法について説明します。 最終的な結果は、関連する GitHub Actions を備えた新しい Azure Static Web Apps アプリケーションであり、アプリのビルドと発行方法を制御できます。

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

  • 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. devDependencyとして VuePress を追加します。

    npm install --save-dev vuepress

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

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

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

    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 という名前のから空の 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. 静的 Web アプリを検索する

  4. 静的 Web アプリの選択

  5. を選択し を作成する

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

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

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

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

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

    注

    リポジトリが表示されない場合は、GitHub で Azure Static Web Apps を承認することが必要な場合があります。 GitHub リポジトリを参照し 、[Settings > Applications > Authorized OAuth Apps] に移動し、[ Azure Static Web Apps] を選択して、[ 許可] を選択します。 組織リポジトリの場合、アクセス許可を付与するには、組織の所有者である必要があります。

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

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

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

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

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

  4. リソース画面で、 URL リンクを選択して、デプロイされたアプリケーションを開きます。 GitHub Actions が完了するまで、1 ~ 2 分待つ必要がある場合があります。

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

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

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

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

次のステップ

カスタム ドメインを追加する

  • Last updated on