Skip Navigation
Show nav
Dev Center
  • Get Started
  • ドキュメント
  • Changelog
  • Search
  • Get Started
    • Node.js
    • Ruby on Rails
    • Ruby
    • Python
    • Java
    • PHP
    • Go
    • Scala
    • Clojure
    • .NET
  • ドキュメント
  • Changelog
  • More
    Additional Resources
    • Home
    • Elements
    • Products
    • Pricing
    • Careers
    • Help
    • Status
    • Events
    • Podcasts
    • Compliance Center
    Heroku Blog

    Heroku Blog

    Find out what's new with Heroku on our blog.

    Visit Blog
  • Log inorSign up
View categories

Categories

  • Heroku のアーキテクチャ
    • Dyno (アプリコンテナ)
      • Dyno Management
      • Dyno Concepts
      • Dyno Behavior
      • Dyno Reference
      • Dyno Troubleshooting
    • スタック (オペレーティングシステムイメージ)
    • ネットワーキングと DNS
    • プラットフォームポリシー
    • プラットフォームの原則
  • Developer Tools
    • コマンドライン
    • Heroku VS Code Extension
  • デプロイ
    • Git を使用したデプロイ
    • Docker によるデプロイ
    • デプロイ統合
  • 継続的デリバリーとインテグレーション
    • 継続的統合
  • 言語サポート
    • Node.js
      • Working with Node.js
      • Node.js Behavior in Heroku
      • Troubleshooting Node.js Apps
    • Ruby
      • Rails のサポート
      • Bundler の使用
      • Working with Ruby
      • Ruby Behavior in Heroku
      • Troubleshooting Ruby Apps
    • Python
      • Working with Python
      • Python でのバックグランドジョブ
      • Python Behavior in Heroku
      • Django の使用
    • Java
      • Java Behavior in Heroku
      • Working with Java
      • Maven の使用
      • Spring Boot の使用
      • Troubleshooting Java Apps
    • PHP
      • PHP Behavior in Heroku
      • Working with PHP
    • Go
      • Go の依存関係管理
    • Scala
    • Clojure
    • .NET
      • Working with .NET
  • データベースとデータ管理
    • Heroku Postgres
      • Postgres の基礎
      • Postgres スターターガイド
      • Postgres のパフォーマンス
      • Postgres のデータ転送と保持
      • Postgres の可用性
      • Postgres の特別なトピック
      • Migrating to Heroku Postgres
    • Heroku Data For Redis
    • Apache Kafka on Heroku
    • その他のデータストア
  • AI
    • Working with AI
    • Heroku Inference
      • Inference API
      • Quick Start Guides
      • AI Models
      • Inference Essentials
    • Vector Database
    • Model Context Protocol
  • モニタリングとメトリクス
    • ログ記録
  • アプリのパフォーマンス
  • アドオン
    • すべてのアドオン
  • 共同作業
  • セキュリティ
    • アプリのセキュリティ
    • ID と認証
      • シングルサインオン (SSO)
    • Private Space
      • インフラストラクチャネットワーキング
    • コンプライアンス
  • Heroku Enterprise
    • Enterprise Accounts
    • Enterprise Team
    • Heroku Connect (Salesforce 同期)
      • Heroku Connect の管理
      • Heroku Connect のリファレンス
      • Heroku Connect のトラブルシューティング
  • パターンとベストプラクティス
  • Heroku の拡張
    • Platform API
    • アプリの Webhook
    • Heroku Labs
    • アドオンのビルド
      • アドオン開発のタスク
      • アドオン API
      • アドオンのガイドラインと要件
    • CLI プラグインのビルド
    • 開発ビルドパック
    • Dev Center
  • アカウントと請求
  • トラブルシューティングとサポート
  • Salesforce とのインテグレーション
  • 言語サポート
  • Ruby
  • Working with Ruby
  • Rack を使用した Ruby での静的サイトの作成

This article was contributed by a member of the Heroku community

Its contents might not always reflect updates to the Heroku platform.

Rack を使用した Ruby での静的サイトの作成

日本語 — Switch to English

最終更新日 2021年02月02日(火)

Table of Contents

  • 前提条件
  • ディレクトリ構造の作成
  • 依存関係の指定
  • ファイルサーバーの設定
  • ローカルでの実行
  • Heroku へのデプロイ
  • 更新

この記事は Marshall Huss によって執筆され、Lee Reilly​ からの寄稿が含まれています。Lee は、GitHub Enterprise​ のプログラマーハッキングです。

静的サイトは、動的なサーバー側の機能またはアプリケーションロジックが含まれていないサイトです。この例として、完全に HTML と CSS で構成されているパンフレットサイトや、サーバーコンポーネントと対話しない Flash に組み込まれたクライアント側の対話型ゲームなどがあります。これらのサイトにはユーザーへのコンテンツ配信のためにのみ Web サーバーが必要ですが、Heroku のようなプラットフォームの使用が、すばやいプロビジョニングとこのようなインフラストラクチャへのデプロイのために引き続き有効です。

Rack​ フレームワークを使用すると、静的サイトを Heroku にすばやくデプロイできます。

この記事のサンプルアプリケーションのソースは、GitHub​ で入手できます。

前提条件

このガイドは、次のものが用意されていることを前提としています。

  • Heroku アカウント。 無料ですぐにサインアップできます。
  • インストールされた Heroku CLI​。
  • インストールされた Ruby と Bundler gem​。

ディレクトリ構造の作成

静的ファイルを処理するための Rack のディレクトリ構造を作成するには、次のコマンドを実行します。

$ mkdir -p site/public/{images,js,css}
$ touch site/{config.ru,public/index.html}
$ cd site && bundle init

これにより、次のディレクトリ構造が作成されます。

- site
  |- config.ru
  |- Gemfile
  |- public
    |- index.html
    |- images
    |- js
    |- css

依存関係の指定

多くの動的アプリケーションを実行するには、多数のサードパーティライブラリやフレームワークが必要です。ただし、静的サイトに、他のライブラリからのサポートはほとんど必要ありません。この場合、必要なのは rack​ gem のみです。Gemfile​ ファイルに次の行を追加します。

source 'https://rubygems.org'
gem 'rack'

次に、bundle​ コマンドを実行して、Rack の依存関係をダウンロードして解決します。

$ bundle install
Using rack (1.4.1)
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.

ファイルサーバーの設定

Rack に、どのファイルを静的アセットとして処理するかを指示する必要があります。これは config.ru​ ファイルを編集して行うため、このファイルに次の行を含めます。

use Rack::Static,
  :urls => ["/images", "/js", "/css"],
  :root => "public"

run lambda { |env|
  [
    200,
    {
      'Content-Type'  => 'text/html',
      'Cache-Control' => 'public, max-age=86400'
    },
    File.open('public/index.html', File::RDONLY)
  ]
}

このテンプレートでは、画像、JavaScript ファイル、CSS ファイルをそれぞれ images​、css​、js​ ディレクトリに格納し、HTML でそれらのファイルへの相対的な参照を使用することを前提としています。

ローカルでの実行

Heroku にデプロイする前にサイトをローカルで実行し、すべての変更を表示するには、site​ ディレクトリで次のコマンドを実行します。

$ rackup
>> Thin web server (v1.5.0 codename Knife)
>> Maximum connections set to 1024
>> Listening on 0.0.0.0:9292, CTRL+C to stop

ブラウザに移動して http://localhost:9292​ を開き、ロードされた静的サイトを表示します。サイトに変更を加えたとき、その変更を表示するにはブラウザをリロードするだけです。サーバーを再起動する必要はありません。

Heroku へのデプロイ

サイトを Heroku にデプロイする前に、Heroku CLI の一部として自動的にインストールされた Git バージョン管理システム​にコードを保存する必要があります。site​ ルートディレクトリの内部にいる場合は、次のコマンドを実行します。

$ git init
$ heroku create
$ git add .
$ git commit -m "Initial static site template app"

Heroku にデプロイする場合も Git を使用します。

$ git push heroku master
Counting objects: 6, done.
Delta compression using up to 4 threads.
...

-----> Heroku receiving push
-----> Ruby app detected
...
-----> Launching... done, v1
       http://blazing-galaxy-997.herokuapp.com deployed to Heroku

この時点で、サイトが Heroku にデプロイされ、自動生成された URL が割り当てられています。heroku open​ コマンドを使用してサイトを開きます。

$ heroku open
Opening blazing-galaxy-997... done

更新

サイトに変更を加える場合は、必要なファイルをローカルで編集した後、それを Git にコミットし、Heroku にプッシュしてデプロイされた変更を表示します。

$ git commit -m "Update landing page"
$ git push heroku master

関連カテゴリー

  • Working with Ruby
Windows で生成された Ruby プロジェクトのデプロイ Rake コマンドの実行

Information & Support

  • Getting Started
  • Documentation
  • Changelog
  • Compliance Center
  • Training & Education
  • Blog
  • Support Channels
  • Status

Language Reference

  • Node.js
  • Ruby
  • Java
  • PHP
  • Python
  • Go
  • Scala
  • Clojure
  • .NET

Other Resources

  • Careers
  • Elements
  • Products
  • Pricing
  • RSS
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku Blog
    • Heroku News Blog
    • Heroku Engineering Blog
  • Twitter
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku
    • Heroku Status
  • Github
  • LinkedIn
  • © 2025 Salesforce, Inc. All rights reserved. Various trademarks held by their respective owners. Salesforce Tower, 415 Mission Street, 3rd Floor, San Francisco, CA 94105, United States
  • heroku.com
  • Legal
  • Terms of Service
  • Privacy Information
  • Responsible Disclosure
  • Trust
  • Contact
  • Cookie Preferences
  • Your Privacy Choices