この記事では、 Jekyll Web アプリケーションを作成して Azure Static Web Apps にデプロイする方法について説明します。
このチュートリアルでは、以下の内容を学習します。
- Jekyll Web サイトを作成する
- Azure Static Web Apps リソースを設定する
- Jekyll アプリを Azure にデプロイする
Azure アカウントをお持ちでない場合は、開始する前に無料アカウントを作成してください。
[前提条件]
-
Jekyll をインストールする
- Windows Subsystem for Linux を使用し、必要に応じて Ubuntu の手順に従うことができます。
- アクティブなサブスクリプションを持つ Azure アカウント。 アカウントがない場合は、無料でアカウントを作成することができます。
- GitHub アカウント。 アカウントがない場合は、無料でアカウントを作成することができます。
- Git のセットアップがインストールされていること。 まだの場合は、こちらから Git をインストールできます。
Jekyll アプリを作成する
Jekyll コマンド ライン インターフェイス (CLI) を使用して Jekyll アプリを作成します。
ターミナルから Jekyll CLI を実行して、新しいアプリを作成します。
jekyll new static-app
新しく作成したアプリに移動します。
cd static-app
新しい Git リポジトリを初期化します。
git init
変更をコミットします。
git add -A git commit -m "initial commit"
アプリケーションの GitHub へのプッシュ
Azure Static Web Apps では、GitHub を使用して Web サイトを発行します。 次の手順では、GitHub リポジトリを作成する方法を示します。
https://github.com/new という名前のから空の GitHub リポジトリを作成します (README を作成しないでください)。
GitHub リポジトリをリモートとしてローカル リポジトリに追加します。 次のコマンドの
<YOUR_USER_NAME>
プレースホルダーの代わりに、GitHub のユーザー名を追加してください。git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static
ローカル リポジトリを GitHub にプッシュします。
git push --set-upstream origin main
注
git ブランチの名前は、
main
とは異なる場合があります。 このコマンドのmain
を正しい値に置き換えます。
Web アプリのデプロイ
次の手順では、新しい静的サイト アプリを作成し、運用環境にデプロイする方法について説明します。
アプリケーションを作成する
Azure portal に移動します
[リソースの作成] を選択します
[Static Web Apps] を探します
[Static Web Apps] を選択します。
を選択し を作成する
[基本] タブで、次の値を入力します。
プロパティ 価値 サブスクリプション Azure サブスクリプション名。 リソース グループ jekyll-static-app 名前 jekyll-static-app プランの種類 無料 Azure Functions API のリージョンとステージング環境 最も近いリージョンを選択します。 ソース GitHubの [GitHub でサインイン] を選択し、GitHub で認証します。
次の GitHub 値を入力します。
プロパティ 価値 組織 ご自分の希望する GitHub 組織を選択します。 リポジトリ jekyll-static-app を選択します。 ブランチ メイン を選択します。 注
リポジトリが表示されない場合、GitHub で Azure Static Web Apps を認可する必要がある可能性があります。 GitHub リポジトリを参照し、[設定] > [アプリケーション] > [認可された OAuth アプリ] の順に移動して、[Azure Static Web Apps]、[許可] の順に選択します。 組織リポジトリの場合は、アクセス許可を付与する組織の所有者である必要があります。
[ビルドの詳細] セクションで、[ビルド プリセット] ドロップダウンから [カスタム] を選択し、既定値をそのまま使用します。
[ アプリの場所 ] ボックスに「 ./」と入力します。
[Api location](API の場所) ボックスは空のままにします。
[ 出力場所 ] ボックスに「 _site」と入力します。
確認と作成
[確認および作成] を選択して、詳細がすべて正しいことを確認します。
[作成] を選択して、App Service Static Web App の作成を開始し、デプロイのための GitHub Actions をプロビジョニングします。
デプロイが完了したら、[リソースに移動] を選択します。
リソース画面で、[URL] リンクを選択して、デプロイしたアプリケーションを開きます。 GitHub Actions が完了するまで 1、2 分かかることがあります。
カスタム Jekyll の設定
静的 Web アプリを生成すると、アプリケーションの発行構成設定を含む ワークフロー ファイル が生成されます。
JEKYLL_ENV
などの環境変数を構成するには、ワークフローの Azure Static Web Apps GitHub Actions に env
セクションを追加します。
- 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 }}
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 you 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: "_site" # Built app content directory - optional
###### End of Repository/Build Configurations ######
env:
JEKYLL_ENV: production
リソースをクリーンアップする
このアプリケーションを引き続き使用しない場合は、次の手順を使用して Azure Static Web App リソースを削除することができます。
- Azure Portal を開きます。
- 上部の検索バーで、前に指定した名前でアプリケーションを検索します。
- アプリをクリックします。
- [削除] ボタンをクリックします
- [はい] をクリックして削除操作を確定します