mcpField
R
render-static-sites

render-static-sites

github.com/render-ossクラウド・DevOps90370 回インストール今日更新
リポジトリ

render-static-sites について

render-static-sitesは、Renderで静的フロントエンドをデプロイするためのリファレンススキルです。開発者向けにビルド、SPAルーティング、ヘッダー、プルリクエストのプレビュー設定を解説し、適用範囲やCDNの動作も説明します。

主な機能

  1. 01フレームワークのビルド・公開設定
  2. 02SPAの書き換えとリダイレクトの指針
  3. 03カスタムレスポンスヘッダー
  4. 04プルリクエストの自動プレビュー
  5. 05静的サイトとWeb Serviceの比較

活用シーン

  1. 01Renderへの静的フロントエンドのデプロイ
  2. 02SPAフォールバックルートの設定
  3. 03サイトのヘッダーやリダイレクトの設定
  4. 04プルリクエスト用プレビュー環境の作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/render-oss/skills --skill render-static-sites

インストール後、Claude Code で/render-static-sitesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
framework-configs.md
routing-and-headers.md
service-types.md

詳細

静的サイトのレンダリング

静的フロントエンド（React、Vue、Hugo、Gatsby、Docusaurus、Jekyll など）を Render のグローバル CDN にデプロイします。TLS の自動設定、Brotli 圧縮、HTTP/2、DDoS 保護に対応しています。無料プランも利用できます。

使用する場面

  • 静的サイトまたは SPA（サーバーサイドレンダリングなし）をデプロイする
  • フロントエンドに Static Site と Web Service のどちらを使うか選ぶ
  • SPA のフォールバックルーティング、リダイレクト／リライト、または カスタムヘッダーを設定する
  • 静的サイトの PR プレビュー環境をセットアップする
  • CDN ホスト型サイトの ビルド失敗や 古いコンテンツをトラブルシューティングする

稼働中のサーバーが必要な SSR フレームワーク（Next.js、Nuxt、SvelteKit）には、代わりに render-web-services を使用してください。Blueprint の作成については、render-blueprints を参照してください。

静的サイトと Web サービスのどちらを選ぶかについては、references/service-types.md をお読みください。

静的サイトと Web サービスの比較

必要なもの使用するもの理由
純粋な HTML/CSS/JS、SPA、ドキュメント、ブログStatic Site無料、グローバル CDN、キャッシュの即時無効化
SSR（Next.js の next start、Nuxt サーバー）Web Service稼働中の Node/Python などのプロセスが必要
SSR フレームワークからの静的エクスポートStatic Siteフレームワークが完全な静的エクスポート（next export、nuxt generate）に対応している場合
API バックエンドWeb Service静的サイトではサーバーコードを実行できない

重要な制約： 静的サイトは プライベートネットワーク上にありません。内部ホスト名を使って他の Render サービスと通信することはできません。

ビルドと公開

設定用途
buildCommand依存関係をインストールし、アセットをビルドします（例：npm ci && npm run build）
staticPublishPath配信するビルド済み出力のディレクトリです（例：build、dist、public）

Render は依存関係を自動検出してインストールします。ビルドコマンド内で自分でインストールを処理する場合は、SKIP_INSTALL_DEPS=true を設定してください。

主なフレームワーク
フレームワークビルドコマンド公開パス
Create React Appnpm ci && npm run buildbuild
Vite（React/Vue/Svelte）npm ci && npm run builddist
Next.js（静的エクスポート）npm ci && next buildout
Nuxt（静的）npm ci && nuxt generate.output/public
Hugohugo --minifypublic
Gatsbynpm ci && gatsby buildpublic
Docusaurusnpm ci && npm run buildbuild
Jekyllbundle exec jekyll build_site
Astronpm ci && astro builddist

SPA のルーティングとリダイレクト

シングルページアプリでは、すべてのルートに対して CDN が 404 を返すのではなく index.html を配信するよう、すべてに一致するルールが必要です。

ダッシュボード（Settings > Redirects/Rewrites）の Redirect/Rewrite Rules、または Blueprint の routes フィールドで設定します。

routes:
  - type: rewrite
    source: /*
    destination: /index.html

複数パスのリダイレクト（例：古いブログ URL）では、優先されるよう、すべてに一致するルールの 上 に個別のルールを追加してください。

リダイレクトの種類、ヘッダールール、キャッシュパターンについては、references/routing-and-headers.md を参照してください。

カスタムレスポンスヘッダー

ダッシュボード（Settings > Headers）または Blueprint の headers フィールドから、セキュリティとパフォーマンスのヘッダーを追加します。

headers:
  - path: /*
    name: X-Frame-Options
    value: DENY
  - path: /assets/*
    name: Cache-Control
    value: public, max-age=31536000, immutable

PR プレビュー

静的サイトは PR プレビューの自動生成に対応しており、各プルリクエストにビルド済みサイトの固有 URL が割り当てられます。

  • ダッシュボードで有効化：Settings > PR Previews
  • Blueprint：previews.generation を automatic または manual に設定
  • プレビュー URL は <service>-<pr-id>.onrender.com の形式です

Blueprint の設定

services:
  - type: web
    runtime: static
    name: my-frontend
    buildCommand: npm ci && npm run build
    staticPublishPath: dist
    routes:
      - type: rewrite
        source: /*
        destination: /index.html
    headers:
      - path: /*
        name: X-Frame-Options
        value: DENY
    previews:
      generation: automatic

注： Blueprints では、静的サイトに runtime: static を指定した type: web を使用します。独立した type: static はありません。

CDN とパフォーマンス

  • 世界中のエッジキャッシュを備えた グローバル CDN
  • Brotli 圧縮（gzip より優れています）
  • デフォルトで HTTP/2
  • デプロイのたびに キャッシュを即時無効化（ダウンタイムゼロのアトミックデプロイ）
  • DDoS 保護を標準搭載

請求

静的サイトには無料枠があります。次の項目について、ワークスペース単位の月間利用可能量に算入されます。

  • 送信帯域幅（ユーザーに配信されるデータ）
  • パイプライン分数（ビルド時間）

利用可能量を超過すると、追加料金が発生する場合があります。現在の利用可能量と料金は、Render の料金でご確認ください。

参考資料

ドキュメント内容
references/routing-and-headers.mdリダイレクトの種類、リライト規則、ヘッダーパターン、SPA の設定
references/framework-configs.md10 以上のフレームワークに対応するビルドコマンドと公開パス
references/service-types.mdサービスタイプの選択と実行モデル

関連スキル

  • render-web-services — 実行中のサーバーが必要な SSR フレームワーク向け
  • render-blueprints — 静的サイトのフィールドに対応する render.yaml の完全なスキーマ
  • render-domains — カスタムドメインと TLS の設定
  • render-deploy — デプロイのフロー、CLI、MCP 操作

最新ドキュメントの取得

このスキルで最新の Render ドキュメントを参照するよう指示された場合は、必ず次の手順に従ってください。

  1. 利用可能な URL 取得ツールまたは curl などの HTTP クライアントを使って、リンク先の Markdown ドキュメントを直接取得します。ウェブ検索の要約で代用しないでください。
  2. 取得が成功し、期待したドキュメントが返されたことを確認してから、その内容を読みます。ファイルを保存したり、そのパスを表示したりするだけでは不十分です。
  3. リクエストに失敗した場合、またはツールで Markdown の応答を読み取れない場合は、リンク先の HTML 版を開いて読んでください。
  4. どちらの版も取得できない場合は、最新の参照資料を利用できないことを明示し、スキル内のトピック固有の代替手順に従ってください。変わりにくい制約については同梱のガイダンスを使用できますが、変更される可能性があるプラットフォームの詳細を推測しないでください。

複数の参照資料が必要なタスクでは、それぞれにこの手順を適用し、確認できたドキュメントと取得できなかったドキュメントを区別してください。

コメント

Markdown 対応