Jekyll サイトを Azure Static Web Apps にデプロイする

[アーティクル]
06/07/2023

この記事では、Jekyll Web アプリケーションを作成して Azure Static Web Apps にデプロイする方法を説明します。

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

Jekyll Web サイトを作成する
Azure Static Web Apps リソースのセットアップ
Jekyll アプリを Azure にデプロイする

Azure サブスクリプションをお持ちでない場合は、開始する前に Azure 無料アカウントを作成してください。

前提条件

Jekyll のインストール
- 必要に応じて Linux 用 Windows サブシステムを使用し、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 では、Web サイトの公開に GitHub を使用します。次の手順は、GitHub リポジトリの作成方法を説明したものです。

https://github.com/new で jekyll-azure-static という名前で空の 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
```
Note

Git ブランチは、main とは異なる名前になっている可能性があります。このコマンドの main を正しい値で置き換えてください。

Web アプリのデプロイ

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

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

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

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

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

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

次の GitHub 値を入力します。

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

Note

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

[Build Details] セクションで、 [Build Presets] ドロップダウンから [Custom] を選択し、既定値をそのままにします。
[App location](アプリの場所) ボックスに「 ./ 」と入力します。
[Api location](API の場所) ボックスはからのままにします。
[Output location](出力の場所) ボックスに、「 _site」と入力します。

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

[確認および作成] を選択して、詳細がすべて正しいことを確認します。
[作成] を選択して、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 を開きます。
上部の検索バーで、前に指定した名前でアプリケーションを検索します。
アプリをクリックします。
[削除] ボタンをクリックします
[はい] をクリックして削除操作を確定します

次のステップ

カスタムドメインの追加