Eleventyでブログ構築｜さくらのクラウド × ウェブアクセラレータ × GitHub Actionsで高速・省コストなサーバーレス運用

Published: 2025-07-12 · Updated: 2025-07-12 · 18 min read
GithubActions さくらのウェブアクセラレータ さくらのクラウド-オブジェクトストレージ

このブログを、静的サイトジェネレータ Eleventy（11ty） と、さくらのクラウド オブジェクトストレージ ＋ さくらのウェブアクセラレータ（CDN） で構築しました。

GitHub Actionsでのデプロイ・キャッシュ削除を自動化し、サーバーレスで軽量かつ高速な配信環境を実現しています。

この記事では、構成の概要と設定の段取りを共有します。

1. はじめに

このブログを、静的サイトジェネレータ Eleventy（11ty） と、 さくらのクラウド オブジェクトストレージ ＋ さくらのウェブアクセラレータ（CDN） で構築しました。

この構成にしてみた結果、よかったのが以下の点です。

  • 維持費がとても安い
  • サーバー管理がいらず、運用がめちゃくちゃ楽
  • CDN経由の配信なので表示速度安定が望める
  • GitHub Actions を使ってデプロイ＆CDNキャッシュ削除も自動化できる

コスト感はこれくらいです。

2. 全体構成図

diagram

以下のようなディレクトリ構成にしました。

├── .github/
│   └── workflows
│      └── deploy.yml         ← GithubActions / mainブランチpush時に、自動で本番デプロイ（アップロード＆変更差分ファイルをキャッシュ削除実行）
├── src/                      ← Eleventy作業用（記事やテンプレート）
├── dist/                     ← Eleventyの出力先（deploy.shでのアップロード対象）
├── scripts/
│   └── deploy.sh             ← deploy.yml用スクリプト
├── その他Eleventyの設定ファイル等

3. セットアップ手順

3-1. さくらのクラウド オブジェクトストレージ バケット作成

さくらのクラウドのマニュアルページ オブジェクトストレージ サービス基本情報 の サイトの作成 と バケットの作成 の手順でバケットを作成します。

3-2. さくらのクラウド オブジェクトストレージ アクセスキーの発行

さくらのクラウドのマニュアルページ オブジェクトストレージ サービス基本情報 の パーミッション設定によるアクセスキーの発行 の手順で2種類のアクセスキーを発行し、パスワード管理ツールなどに保管しておきます。

  • WRITE (書き込みのみを許可) : GithubActionsで利用するアップロード用
  • READ (読み込みのみを許可) : ウェブアクセラレータ（CDN）で利用するCDN<->オブジェクトストレージ間の接続用

3-3. Github Actions オブジェクトストレージへのアップロードの設定

対象リポジトリの Settings -> Security -> Secrets and Variables -> Actions より下記の Repository secrets を設定します。

  • SAKURA_CLOUD_OBJECTSTORAGE_BUCKET : バケット名 (例:example-blog )
  • SAKURA_CLOUD_OBJECTSTORAGE_ENDPOINT : エンドポイント ( s3.isk01.sakurastorage.jp )
  • SAKURA_CLOUD_OBJECTSTORAGE_REGION : リージョン ( jp-north-1 )
  • SAKURA_CLOUD_OBJECTSTORAGE_W_ACCESS_KEY : 3-2 で準備した WRITE のアクセスキーID
  • SAKURA_CLOUD_OBJECTSTORAGE_W_SECRET : 3-2 で準備した WRITE のシークレットアクセスキー
  • SAKURA_CLOUD_OBJECTSTORAGE_SIGNATURE_VERSION : s3v4 (※)

※ さくらのクラウドのマニュアルページ オブジェクトストレージ サービス基本情報 の サービス仕様 の signature_version を参考に設定

mainブランチにpushされたときに動作させる Github Actions を設定します。 この時点では、オブジェクトストレージへのアップロードまでを設定。 今回は Rclone を使ってみました。

├── .github/
│   └── workflows
│      └── deploy.yml
├── scripts/
│   └── deploy.sh
  • .github/workflows/deploy.yml

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    env:
      SAKURA_CLOUD_OBJECTSTORAGE_BUCKET: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_BUCKET }}
      SAKURA_CLOUD_OBJECTSTORAGE_ENDPOINT: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_ENDPOINT }}
      SAKURA_CLOUD_OBJECTSTORAGE_REGION: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_REGION }}
      SAKURA_CLOUD_OBJECTSTORAGE_SIGNATURE_VERSION: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_SIGNATURE_VERSION }}
      SAKURA_CLOUD_OBJECTSTORAGE_W_ACCESS_KEY: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_W_ACCESS_KEY }}
      SAKURA_CLOUD_OBJECTSTORAGE_W_SECRET: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_W_SECRET }}

    steps:
      - name: Setup rclone
        run: curl https://rclone.org/install.sh | sudo bash

      - name: Deploy
        run: |
          bash ./scripts/deploy.sh
  • scripts/deploy.sh
#!/bin/bash
set -e

mkdir -p ~/.config/rclone

cat <<EOF > ~/.config/rclone/rclone.conf
[sakura]
type = s3
provider = Other
access_key_id = ${SAKURA_CLOUD_OBJECTSTORAGE_W_ACCESS_KEY}
secret_access_key = ${SAKURA_CLOUD_OBJECTSTORAGE_W_SECRET}
endpoint = https://${SAKURA_CLOUD_OBJECTSTORAGE_ENDPOINT}
region = ${SAKURA_CLOUD_OBJECTSTORAGE_REGION}
acl = private
signature_version = ${SAKURA_CLOUD_OBJECTSTORAGE_SIGNATURE_VERSION}
EOF

# アップロード (/dist配下)
rclone copy ./dist sakura:${SAKURA_CLOUD_OBJECTSTORAGE_BUCKET} --progress --s3-acl=private

3-4. Github Actions オブジェクトストレージへのアップロードの動作確認

アップロード対象の dist/ 配下に アップロードテスト用ファイル index.html を作成するcommitをmainブランチにpushし、Github Actionsを動作させます。

├── dist/
│   └── index.html
  • dist/index.html
<p>test</p>

GitHub Actions の履歴より、実行内容を確認します。 Jobs -> deploy -> Deploy の出力を確認します。

さくらのクラウド オブジェクトストレージ のコントロールパネルより、対象バケットにアップロードが出来ていることが確認できたらOKです。

3-5. ウェブアクセラレータ（CDN）の配信設定・動作確認

ウェブアクセラレータ マニュアル の 初期設定（オブジェクトストレージ・独自ドメイン利用） の手順に従って設定します。 3-2 で準備した READ のアクセスキーID・シークレットアクセスキーで設定します。

ウェブアクセラレータ マニュアル の Let's Encrypt 自動更新証明書の利用 の手順に従って、証明書の自動更新設定を行います。今回はその後に、リクエストプロトコルを httpsにリダイレクト に設定変更しました。

配信設定が完了したらアクセスできることを確認します。

https://(公開ドメイン名)/ にてアクセスし、3-4 で作成した index.html のコンテンツが表示されることを確認できたらOKです（※）。

※ 今回はウェブアクセラレータの ドキュメントインデクス を設定有効化しています。有効にすると / で終わる URL は index.html を追加してアクセスする設定です。

3-6. ウェブアクセラレータ（CDN）のキャッシュ削除用のAPIキーの発行

さくらのクラウド マニュアル の APIキーの手順に従って設定します。 サービスへのアクセス権 の項目で ウェブアクセラレータ を選択したAPIキーを発行し、パスワード管理ツールなどに保管しておきます。

3-7. Github Actions 更新ファイルへのウェブアクセラレータ（CDN）のURL単位キャッシュ削除の追加設定

対象リポジトリの Settings -> Security -> Secrets and Variables -> Actions より下記の Repository secrets を追加設定します。

  • SAKURA_WEBACCEL_SITE_URL : 3-5 で用意したサイトURL ( 例: https://www.example.jp ) ※
  • SAKURA_WEBACCEL_TOKEN : 3-6 で準備した ウェブアクセラレータのAPI利用のためのアクセストークン
  • SAKURA_WEBACCEL_SECRET : 3-6 で準備した ウェブアクセラレータのAPI利用のためのアクセストークンシークレット

※ 今回は、ウェブアクセラレータ（CDN）でhttpsリダイレクトする設定にしているため、httpsだけ考慮した実装としています。

mainブランチにpushされたときに動作させる Github Actions を追加設定します。 更新ファイルへのウェブアクセラレータ（CDN）のURL単位キャッシュ削除を設定します。

  • .github/workflows/deploy.yml

name: Deploy and Purge Cache  # 修正行

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    env:
      SAKURA_CLOUD_OBJECTSTORAGE_BUCKET: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_BUCKET }}
      SAKURA_CLOUD_OBJECTSTORAGE_ENDPOINT: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_ENDPOINT }}
      SAKURA_CLOUD_OBJECTSTORAGE_REGION: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_REGION }}
      SAKURA_CLOUD_OBJECTSTORAGE_SIGNATURE_VERSION: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_SIGNATURE_VERSION }}
      SAKURA_CLOUD_OBJECTSTORAGE_W_ACCESS_KEY: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_W_ACCESS_KEY }}
      SAKURA_CLOUD_OBJECTSTORAGE_W_SECRET: ${{ secrets.SAKURA_CLOUD_OBJECTSTORAGE_W_SECRET }}
      SAKURA_WEBACCEL_TOKEN: ${{ secrets.SAKURA_WEBACCEL_TOKEN }}  # 追加行
      SAKURA_WEBACCEL_SECRET: ${{ secrets.SAKURA_WEBACCEL_SECRET }}  # 追加行
      SAKURA_WEBACCEL_SITE_URL: ${{ secrets.SAKURA_WEBACCEL_SITE_URL }}  # 追加行

    steps:
      - name: Checkout code  # 追加行
        uses: actions/checkout@v3  # 追加行
        with:  # 追加行
          fetch-depth: 0  # 追加行

      - name: Setup rclone
        run: curl https://rclone.org/install.sh | sudo bash

      - name: Deploy and Purge Cache  # 修正行
        run: |
          bash ./scripts/deploy.sh
  • scripts/deploy.sh
# アップロード (/dist配下) の処理の下部に下記を追加します

# 直前コミットとの差分
readarray -t CHANGED_FILES < <(git diff --name-only HEAD^ HEAD dist/ | grep -v '/$' | sed 's|^dist|'"${SAKURA_WEBACCEL_SITE_URL}"'|')

if [ ${#CHANGED_FILES[@]} -eq 0 ]; then
  echo "No changed files to purge."
  exit 0
fi

# JSON配列生成（複数行対応）
URLS=$(printf '"%s",' "${CHANGED_FILES[@]}")
URLS=${URLS%,} # 末尾のカンマ除去
PAYLOAD="{\"URL\": [ $URLS ] }"

# 個別URLキャッシュ削除API実行
response=$(curl -sS -u "${SAKURA_WEBACCEL_TOKEN}:${SAKURA_WEBACCEL_SECRET}" \
  -X POST \
  -H "Content-Type: application/json" \
  -d "$PAYLOAD" \
  https://secure.sakura.ad.jp/cloud/zone/is1a/api/webaccel/1.0/deletecache)

echo "Purge API response: $response"

ウェブアクセラレータ 公開APIマニュアル キャッシュ別削除API を利用して、更新ファイルのみキャッシュ削除実行します。

一度に削除指定可能なURL数は100件までですが、私の用途では、1回の変更（mainブランチへのpush）で100件以内となる運用のため、このように1度だけ実行する処理としました。 もし100件以上削除する用途の方の場合は、複数回実行するよう考慮が必要かと思います。

3-8. Github Actions キャッシュ削除の動作確認

アップロード対象の dist/ 配下に アップロードテスト用ファイル index.html を更新するcommitをmainブランチにpushし、Github Actionsを動作させます。

├── dist/
│   └── index.html
  • dist/index.html
<p>test cache purge</p>

GitHub Actions の履歴より、実行内容を確認します。 Jobs -> deploy -> Deploy and Purge Cache より Purge API response: の出力を確認します。

https://(公開ドメイン名)/ にてアクセスし、3-7 で更新した index.html のコンテンツが表示されることを確認できたらOKです（※）。

※ 今回はウェブアクセラレータの ドキュメントインデクス を設定有効化しています。有効にすると / で終わる URL は index.html を追加してアクセスする設定です。

3-9. 静的サイトジェネレーターをつかってコンテンツを生成しよう

今回は 静的サイトジェネレータ Eleventy（11ty） を使って、生成したコンテンツを dist/ に出力するようにしました。

├── .github/
│   └── workflows
│      └── deploy.yml         ← GithubActions / mainブランチpush時に、自動で本番デプロイ（アップロード＆変更差分ファイルをキャッシュ削除実行）
├── src/                      ← Eleventy作業用（記事やテンプレート）
├── dist/                     ← Eleventyの出力先（deploy.shでのアップロード対象）
├── scripts/
│   └── deploy.sh             ← deploy.yml用スクリプト
├── その他Eleventyの設定ファイル等

※ とりあえずは、手動で手元でビルド実行していますが、そこもGithub Actions化しても良いかもしれません。

4. さいごに

以上、mainブランチpush時に、自動でデプロイ（アップロード＆変更差分ファイルをキャッシュ削除実行）を行う構成をやってみた紹介でした。

Author: nozomi1773

.