Files
cpp-httplib/docs-src/pages/ja/tour/04-static-file-server.md
yhirose 797758a742 Documentation Site on GitHub Pages (#2376)
* Add initial documentations

* Update documentation for Basic Client and add WebSocket section

* feat: add a static site generator with multi-language support

- Introduced a new Rust-based static site generator in the `docs-gen` directory.
- Implemented core functionality for building sites from markdown files, including:
  - Configuration loading from `config.toml`.
  - Markdown rendering with frontmatter support.
  - Navigation generation based on page structure.
  - Static file copying and output directory management.
- Added templates for base layout, pages, and portal.
- Created a CSS file for styling and a JavaScript file for interactive features like language selection and theme toggling.
- Updated documentation source with new configuration and example pages in English and Japanese.
- Added a `justfile` target for building the documentation site.

* Add language/theme toggle functionality

- Created a new Japanese tour index page at docs/ja/tour/index.html
- Implemented navigation links for various sections of the cpp-httplib tutorial
- Added a language selector to switch between English and Japanese
- Introduced theme toggle functionality to switch between light and dark modes
- Added mobile sidebar toggle for better navigation on smaller screens
2026-02-28 14:45:40 -05:00

4.4 KiB

title, order
title order
Static File Server 4

cpp-httplibは、HTMLやCSS、画像ファイルなどの静的ファイルも配信できます。面倒な設定は要りません。set_mount_point() を1行呼ぶだけです。

set_mount_point の基本

さっそくやってみましょう。set_mount_point() は、URLのパスとローカルディレクトリを紐づけます。

#include "httplib.h"
#include <iostream>

int main() {
    httplib::Server svr;

    svr.set_mount_point("/", "./html");

    std::cout << "Listening on port 8080..." << std::endl;
    svr.listen("0.0.0.0", 8080);
}

第1引数がURLのマウントポイント、第2引数がローカルのディレクトリパスです。この例だと、/ へのリクエストを ./html ディレクトリから配信します。

試してみましょう。まず html ディレクトリを作って、index.html を置きます。

mkdir html
<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body>
    <h1>Hello from cpp-httplib!</h1>
    <p>This is a static file.</p>
</body>
</html>

コンパイルして起動します。

g++ -std=c++17 -o server server.cpp -pthread
./server

ブラウザで http://localhost:8080 を開いてみてください。html/index.html の内容が表示されるはずです。http://localhost:8080/index.html でも同じページが返ります。

もちろん、前章のクライアントコードや curl でもアクセスできますよ。

httplib::Client cli("http://localhost:8080");
auto res = cli.Get("/");
if (res) {
    std::cout << res->body << std::endl;  // HTMLが表示される
}
curl http://localhost:8080

複数のマウントポイント

set_mount_point() は何回でも呼べます。URLのパスごとに、別々のディレクトリを割り当てられます。

svr.set_mount_point("/", "./public");
svr.set_mount_point("/assets", "./static/assets");
svr.set_mount_point("/docs", "./documentation");

/assets/style.css なら ./static/assets/style.css を、/docs/guide.html なら ./documentation/guide.html を配信します。

ハンドラーとの組み合わせ

静的ファイルの配信と、前章で学んだルーティングハンドラーは共存できます。

httplib::Server svr;

// APIエンドポイント
svr.Get("/api/hello", [](const auto &, auto &res) {
    res.set_content(R"({"message":"Hello!"})", "application/json");
});

// 静的ファイル配信
svr.set_mount_point("/", "./public");

svr.listen("0.0.0.0", 8080);

ハンドラーが先に評価されます。/api/hello にはハンドラーが応答し、それ以外のパスは ./public ディレクトリからファイルを探します。

レスポンスヘッダーの追加

set_mount_point() の第3引数にヘッダーを渡すと、静的ファイルのレスポンスにカスタムヘッダーを付けられます。キャッシュ制御に便利です。

svr.set_mount_point("/", "./public", {
    {"Cache-Control", "max-age=3600"}
});

こうすると、ブラウザは配信されたファイルを1時間キャッシュします。

静的ファイルサーバー用のDockerファイル

cpp-httplibのリポジトリには、静的ファイルサーバー用の Dockerfile が含まれています。Docker Hubにビルド済みイメージも公開しているので、1コマンドで起動できます。

> docker run -p 8080:80 -v ./my-site:/html yhirose4dockerhub/cpp-httplib-server
Serving HTTP on 0.0.0.0:80
Mount point: / -> ./html
Press Ctrl+C to shutdown gracefully...
192.168.65.1 - - [22/Feb/2026:12:00:00 +0000] "GET / HTTP/1.1" 200 256 "-" "Mozilla/5.0 ..."
192.168.65.1 - - [22/Feb/2026:12:00:00 +0000] "GET /style.css HTTP/1.1" 200 1024 "-" "Mozilla/5.0 ..."
192.168.65.1 - - [22/Feb/2026:12:00:01 +0000] "GET /favicon.ico HTTP/1.1" 404 152 "-" "Mozilla/5.0 ..."

./my-site ディレクトリの中身が、そのままポート8080で配信されます。NGINXと同じログ形式で、アクセスの様子を確認できますよ。

次のステップ

静的ファイルの配信ができるようになりましたね。HTMLやCSS、JavaScriptを配信するWebサーバーが、これだけのコードで作れます。

次は、HTTPSで暗号化通信をしてみましょう。まずはTLSライブラリのセットアップからです。

次: TLS Setup