ded/cpp-httplib
1
0
Fork 0
mirror of https://github.com/yhirose/cpp-httplib.git synced 2026-04-12 19:58:29 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
e906c31a796d4243063d7b44bb96f0e560a13c8f
cpp-httplib/docs/ja/tour/04-static-file-server/index.html
yhirose e906c31a79 Add favicon and update navigation icons across documentation 
- Added a favicon link to all tour pages in the Japanese documentation.
- Updated navigation links to include SVG icons for Home and GitHub.
- Changed language button to include an SVG icon for better visual representation.
- Improved theme toggle button to use SVG icons for light and dark modes.
- Refactored the documentation build commands in the justfile for clarity and consistency.
2026-03-01 23:04:38 -05:00

288 lines
28 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="ja" data-base-path="&#x2F;cpp-httplib">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Static File Server - cpp-httplib</title>
<link rel="icon" type="image/svg+xml" href="&#x2F;cpp-httplib/favicon.svg">
<link rel="stylesheet" href="&#x2F;cpp-httplib/css/main.css">
<script>
(function() {
var t = localStorage.getItem('preferred-theme');
if (!t) t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
})();
</script>
</head>
<body>
<header class="header">
<div class="header-inner">
<a href="&#x2F;cpp-httplib/ja/" class="header-title">cpp-httplib <span style="font-size:0.75em;font-weight:normal;margin-left:4px">v0.35.0</span></a>
<div class="header-spacer"></div>
<nav class="header-nav">
<a href="&#x2F;cpp-httplib/ja/">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Home
</a>
<a href="&#x2F;cpp-httplib/ja/tour&#x2F;">Tour</a>
<a href="https:&#x2F;&#x2F;github.com&#x2F;yhirose&#x2F;cpp-httplib" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
GitHub
</a>
</nav>
<div class="header-tools">
<button class="theme-toggle" aria-label="Toggle theme"></button>
<div class="lang-selector">
<button class="lang-btn" aria-label="Language">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
JA
</button>
<ul class="lang-popup">
<li><a href="#" data-lang="en">EN</a></li>
<li><a href="#" data-lang="ja">JA</a></li>
</ul>
</div>
</div>
<button class="sidebar-toggle" aria-label="Menu">&#9776;</button>
</div>
</header>
<div class="layout has-sidebar">
<aside class="sidebar">
<nav class="sidebar-nav">
<div class="nav-section">
<a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;" class="nav-section-title active">A Tour of cpp-httplib</a>
<ul class="nav-list">
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;01-getting-started&#x2F;" class="">Getting Started</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;02-basic-client&#x2F;" class="">Basic Client</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;03-basic-server&#x2F;" class="">Basic Server</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;04-static-file-server&#x2F;" class="active">Static File Server</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;05-tls-setup&#x2F;" class="">TLS Setup</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;06-https-client&#x2F;" class="">HTTPS Client</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;07-https-server&#x2F;" class="">HTTPS Server</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;08-websocket&#x2F;" class="">WebSocket</a></li>
<li><a href="&#x2F;cpp-httplib&#x2F;ja&#x2F;tour&#x2F;09-whats-next&#x2F;" class="">What&#x27;s Next</a></li>
</ul>
</div>
</nav>
</aside>
<main class="content">
<article>
<h1>Static File Server</h1>
<p>cpp-httplibは、HTMLやCSS、画像ファイルなどの静的ファイルも配信できます。面倒な設定は要りません。<code>set_mount_point()</code> を1行呼ぶだけです。</p>
<h2>set_mount_point の基本</h2>
<p>さっそくやってみましょう。<code>set_mount_point()</code> は、URLのパスとローカルディレクトリを紐づけます。</p>
<div class="code-dark"><pre style="background-color:#2d2d2d;">
<span style="color:#cc99cc;">#include </span><span style="color:#d3d0c8;">&quot;</span><span style="color:#99cc99;">httplib.h</span><span style="color:#d3d0c8;">&quot;
</span><span style="color:#cc99cc;">#include </span><span style="color:#d3d0c8;">&lt;</span><span style="color:#99cc99;">iostream</span><span style="color:#d3d0c8;">&gt;
</span><span style="color:#d3d0c8;">
</span><span style="color:#cc99cc;">int </span><span style="color:#6699cc;">main</span><span style="color:#d3d0c8;">() {
</span><span style="color:#d3d0c8;"> httplib::Server svr;
</span><span style="color:#d3d0c8;">
</span><span style="color:#d3d0c8;"> svr.</span><span style="color:#6699cc;">set_mount_point</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/</span><span style="color:#d3d0c8;">&quot;, &quot;</span><span style="color:#99cc99;">./html</span><span style="color:#d3d0c8;">&quot;);
</span><span style="color:#d3d0c8;">
</span><span style="color:#d3d0c8;"> std::cout &lt;&lt; &quot;</span><span style="color:#99cc99;">Listening on port 8080...</span><span style="color:#d3d0c8;">&quot; &lt;&lt; std::endl;
</span><span style="color:#d3d0c8;"> svr.</span><span style="color:#6699cc;">listen</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">0.0.0.0</span><span style="color:#d3d0c8;">&quot;, </span><span style="color:#f99157;">8080</span><span style="color:#d3d0c8;">);
</span><span style="color:#d3d0c8;">}
</span></pre>
</div><div class="code-light"><pre style="background-color:#eff1f5;">
<span style="color:#b48ead;">#include </span><span style="color:#4f5b66;">&quot;</span><span style="color:#a3be8c;">httplib.h</span><span style="color:#4f5b66;">&quot;
</span><span style="color:#b48ead;">#include </span><span style="color:#4f5b66;">&lt;</span><span style="color:#a3be8c;">iostream</span><span style="color:#4f5b66;">&gt;
</span><span style="color:#4f5b66;">
</span><span style="color:#b48ead;">int </span><span style="color:#8fa1b3;">main</span><span style="color:#4f5b66;">() {
</span><span style="color:#4f5b66;"> httplib::Server svr;
</span><span style="color:#4f5b66;">
</span><span style="color:#4f5b66;"> svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/</span><span style="color:#4f5b66;">&quot;, &quot;</span><span style="color:#a3be8c;">./html</span><span style="color:#4f5b66;">&quot;);
</span><span style="color:#4f5b66;">
</span><span style="color:#4f5b66;"> std::cout &lt;&lt; &quot;</span><span style="color:#a3be8c;">Listening on port 8080...</span><span style="color:#4f5b66;">&quot; &lt;&lt; std::endl;
</span><span style="color:#4f5b66;"> svr.</span><span style="color:#8fa1b3;">listen</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">0.0.0.0</span><span style="color:#4f5b66;">&quot;, </span><span style="color:#d08770;">8080</span><span style="color:#4f5b66;">);
</span><span style="color:#4f5b66;">}
</span></pre>
</div>
<p>第1引数がURLのマウントポイント、第2引数がローカルのディレクトリパスです。この例だと、<code>/</code> へのリクエストを <code>./html</code> ディレクトリから配信します。</p>
<p>試してみましょう。まず <code>html</code> ディレクトリを作って、<code>index.html</code> を置きます。</p>
<div class="code-dark"><pre style="background-color:#2d2d2d;">
<span style="color:#6699cc;">mkdir</span><span style="color:#d3d0c8;"> html
</span></pre>
</div><div class="code-light"><pre style="background-color:#eff1f5;">
<span style="color:#8fa1b3;">mkdir</span><span style="color:#4f5b66;"> html
</span></pre>
</div><div class="code-dark"><pre style="background-color:#2d2d2d;">
<span style="color:#d3d0c8;">&lt;!</span><span style="color:#f2777a;">DOCTYPE</span><span style="color:#d3d0c8;"> html&gt;
</span><span style="color:#d3d0c8;">&lt;</span><span style="color:#f2777a;">html</span><span style="color:#d3d0c8;">&gt;
</span><span style="color:#d3d0c8;">&lt;</span><span style="color:#f2777a;">head</span><span style="color:#d3d0c8;">&gt;&lt;</span><span style="color:#f2777a;">title</span><span style="color:#d3d0c8;">&gt;My Page&lt;/</span><span style="color:#f2777a;">title</span><span style="color:#d3d0c8;">&gt;&lt;/</span><span style="color:#f2777a;">head</span><span style="color:#d3d0c8;">&gt;
</span><span style="color:#d3d0c8;">&lt;</span><span style="color:#f2777a;">body</span><span style="color:#d3d0c8;">&gt;
</span><span style="color:#d3d0c8;"> &lt;</span><span style="color:#f2777a;">h1</span><span style="color:#d3d0c8;">&gt;Hello from cpp-httplib!&lt;/</span><span style="color:#f2777a;">h1</span><span style="color:#d3d0c8;">&gt;
</span><span style="color:#d3d0c8;"> &lt;</span><span style="color:#f2777a;">p</span><span style="color:#d3d0c8;">&gt;This is a static file.&lt;/</span><span style="color:#f2777a;">p</span><span style="color:#d3d0c8;">&gt;
</span><span style="color:#d3d0c8;">&lt;/</span><span style="color:#f2777a;">body</span><span style="color:#d3d0c8;">&gt;
</span><span style="color:#d3d0c8;">&lt;/</span><span style="color:#f2777a;">html</span><span style="color:#d3d0c8;">&gt;
</span></pre>
</div><div class="code-light"><pre style="background-color:#eff1f5;">
<span style="color:#4f5b66;">&lt;!</span><span style="color:#bf616a;">DOCTYPE</span><span style="color:#4f5b66;"> html&gt;
</span><span style="color:#4f5b66;">&lt;</span><span style="color:#bf616a;">html</span><span style="color:#4f5b66;">&gt;
</span><span style="color:#4f5b66;">&lt;</span><span style="color:#bf616a;">head</span><span style="color:#4f5b66;">&gt;&lt;</span><span style="color:#bf616a;">title</span><span style="color:#4f5b66;">&gt;My Page&lt;/</span><span style="color:#bf616a;">title</span><span style="color:#4f5b66;">&gt;&lt;/</span><span style="color:#bf616a;">head</span><span style="color:#4f5b66;">&gt;
</span><span style="color:#4f5b66;">&lt;</span><span style="color:#bf616a;">body</span><span style="color:#4f5b66;">&gt;
</span><span style="color:#4f5b66;"> &lt;</span><span style="color:#bf616a;">h1</span><span style="color:#4f5b66;">&gt;Hello from cpp-httplib!&lt;/</span><span style="color:#bf616a;">h1</span><span style="color:#4f5b66;">&gt;
</span><span style="color:#4f5b66;"> &lt;</span><span style="color:#bf616a;">p</span><span style="color:#4f5b66;">&gt;This is a static file.&lt;/</span><span style="color:#bf616a;">p</span><span style="color:#4f5b66;">&gt;
</span><span style="color:#4f5b66;">&lt;/</span><span style="color:#bf616a;">body</span><span style="color:#4f5b66;">&gt;
</span><span style="color:#4f5b66;">&lt;/</span><span style="color:#bf616a;">html</span><span style="color:#4f5b66;">&gt;
</span></pre>
</div>
<p>コンパイルして起動します。</p>
<div class="code-dark"><pre style="background-color:#2d2d2d;">
<span style="color:#6699cc;">g++</span><span style="color:#f2777a;"> -std</span><span style="color:#d3d0c8;">=c++17</span><span style="color:#f2777a;"> -o</span><span style="color:#d3d0c8;"> server server.cpp</span><span style="color:#f2777a;"> -pthread
</span><span style="color:#6699cc;">./server
</span></pre>
</div><div class="code-light"><pre style="background-color:#eff1f5;">
<span style="color:#8fa1b3;">g++</span><span style="color:#bf616a;"> -std</span><span style="color:#4f5b66;">=c++17</span><span style="color:#bf616a;"> -o</span><span style="color:#4f5b66;"> server server.cpp</span><span style="color:#bf616a;"> -pthread
</span><span style="color:#8fa1b3;">./server
</span></pre>
</div>
<p>ブラウザで <code>http://localhost:8080</code> を開いてみてください。<code>html/index.html</code> の内容が表示されるはずです。<code>http://localhost:8080/index.html</code> でも同じページが返ります。</p>
<p>もちろん、前章のクライアントコードや <code>curl</code> でもアクセスできますよ。</p>
<div class="code-dark"><pre style="background-color:#2d2d2d;">
<span style="color:#d3d0c8;">httplib::Client </span><span style="color:#6699cc;">cli</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">http://localhost:8080</span><span style="color:#d3d0c8;">&quot;);
</span><span style="color:#cc99cc;">auto</span><span style="color:#d3d0c8;"> res = cli.</span><span style="color:#6699cc;">Get</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/</span><span style="color:#d3d0c8;">&quot;);
</span><span style="color:#cc99cc;">if </span><span style="color:#d3d0c8;">(res) {
</span><span style="color:#d3d0c8;"> std::cout &lt;&lt; res-&gt;</span><span style="color:#f2777a;">body </span><span style="color:#d3d0c8;">&lt;&lt; std::endl; </span><span style="color:#747369;">// HTMLが表示される
</span><span style="color:#d3d0c8;">}
</span></pre>
</div><div class="code-light"><pre style="background-color:#eff1f5;">
<span style="color:#4f5b66;">httplib::Client </span><span style="color:#8fa1b3;">cli</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">http://localhost:8080</span><span style="color:#4f5b66;">&quot;);
</span><span style="color:#b48ead;">auto</span><span style="color:#4f5b66;"> res = cli.</span><span style="color:#8fa1b3;">Get</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/</span><span style="color:#4f5b66;">&quot;);
</span><span style="color:#b48ead;">if </span><span style="color:#4f5b66;">(res) {
</span><span style="color:#4f5b66;"> std::cout &lt;&lt; res-&gt;</span><span style="color:#bf616a;">body </span><span style="color:#4f5b66;">&lt;&lt; std::endl; </span><span style="color:#a7adba;">// HTMLが表示される
</span><span style="color:#4f5b66;">}
</span></pre>
</div><div class="code-dark"><pre style="background-color:#2d2d2d;">
<span style="color:#6699cc;">curl</span><span style="color:#d3d0c8;"> http://localhost:8080
</span></pre>
</div><div class="code-light"><pre style="background-color:#eff1f5;">
<span style="color:#8fa1b3;">curl</span><span style="color:#4f5b66;"> http://localhost:8080
</span></pre>
</div>
<h2>複数のマウントポイント</h2>
<p><code>set_mount_point()</code> は何回でも呼べます。URLのパスごとに、別々のディレクトリを割り当てられます。</p>
<div class="code-dark"><pre style="background-color:#2d2d2d;">
<span style="color:#d3d0c8;">svr.</span><span style="color:#6699cc;">set_mount_point</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/</span><span style="color:#d3d0c8;">&quot;, &quot;</span><span style="color:#99cc99;">./public</span><span style="color:#d3d0c8;">&quot;);
</span><span style="color:#d3d0c8;">svr.</span><span style="color:#6699cc;">set_mount_point</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/assets</span><span style="color:#d3d0c8;">&quot;, &quot;</span><span style="color:#99cc99;">./static/assets</span><span style="color:#d3d0c8;">&quot;);
</span><span style="color:#d3d0c8;">svr.</span><span style="color:#6699cc;">set_mount_point</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/docs</span><span style="color:#d3d0c8;">&quot;, &quot;</span><span style="color:#99cc99;">./documentation</span><span style="color:#d3d0c8;">&quot;);
</span></pre>
</div><div class="code-light"><pre style="background-color:#eff1f5;">
<span style="color:#4f5b66;">svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/</span><span style="color:#4f5b66;">&quot;, &quot;</span><span style="color:#a3be8c;">./public</span><span style="color:#4f5b66;">&quot;);
</span><span style="color:#4f5b66;">svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/assets</span><span style="color:#4f5b66;">&quot;, &quot;</span><span style="color:#a3be8c;">./static/assets</span><span style="color:#4f5b66;">&quot;);
</span><span style="color:#4f5b66;">svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/docs</span><span style="color:#4f5b66;">&quot;, &quot;</span><span style="color:#a3be8c;">./documentation</span><span style="color:#4f5b66;">&quot;);
</span></pre>
</div>
<p><code>/assets/style.css</code> なら <code>./static/assets/style.css</code> を、<code>/docs/guide.html</code> なら <code>./documentation/guide.html</code> を配信します。</p>
<h2>ハンドラーとの組み合わせ</h2>
<p>静的ファイルの配信と、前章で学んだルーティングハンドラーは共存できます。</p>
<div class="code-dark"><pre style="background-color:#2d2d2d;">
<span style="color:#d3d0c8;">httplib::Server svr;
</span><span style="color:#d3d0c8;">
</span><span style="color:#747369;">// APIエンドポイント
</span><span style="color:#d3d0c8;">svr.</span><span style="color:#6699cc;">Get</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/api/hello</span><span style="color:#d3d0c8;">&quot;, [](</span><span style="color:#cc99cc;">const auto </span><span style="color:#d3d0c8;">&amp;, </span><span style="color:#cc99cc;">auto </span><span style="color:#d3d0c8;">&amp;res) {
</span><span style="color:#d3d0c8;"> res.</span><span style="color:#6699cc;">set_content</span><span style="color:#d3d0c8;">(</span><span style="color:#cc99cc;">R</span><span style="color:#d3d0c8;">&quot;(</span><span style="color:#99cc99;">{&quot;message&quot;:&quot;Hello!&quot;}</span><span style="color:#d3d0c8;">)&quot;, &quot;</span><span style="color:#99cc99;">application/json</span><span style="color:#d3d0c8;">&quot;);
</span><span style="color:#d3d0c8;">});
</span><span style="color:#d3d0c8;">
</span><span style="color:#747369;">// 静的ファイル配信
</span><span style="color:#d3d0c8;">svr.</span><span style="color:#6699cc;">set_mount_point</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/</span><span style="color:#d3d0c8;">&quot;, &quot;</span><span style="color:#99cc99;">./public</span><span style="color:#d3d0c8;">&quot;);
</span><span style="color:#d3d0c8;">
</span><span style="color:#d3d0c8;">svr.</span><span style="color:#6699cc;">listen</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">0.0.0.0</span><span style="color:#d3d0c8;">&quot;, </span><span style="color:#f99157;">8080</span><span style="color:#d3d0c8;">);
</span></pre>
</div><div class="code-light"><pre style="background-color:#eff1f5;">
<span style="color:#4f5b66;">httplib::Server svr;
</span><span style="color:#4f5b66;">
</span><span style="color:#a7adba;">// APIエンドポイント
</span><span style="color:#4f5b66;">svr.</span><span style="color:#8fa1b3;">Get</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/api/hello</span><span style="color:#4f5b66;">&quot;, [](</span><span style="color:#b48ead;">const auto </span><span style="color:#4f5b66;">&amp;, </span><span style="color:#b48ead;">auto </span><span style="color:#4f5b66;">&amp;res) {
</span><span style="color:#4f5b66;"> res.</span><span style="color:#8fa1b3;">set_content</span><span style="color:#4f5b66;">(</span><span style="color:#b48ead;">R</span><span style="color:#4f5b66;">&quot;(</span><span style="color:#a3be8c;">{&quot;message&quot;:&quot;Hello!&quot;}</span><span style="color:#4f5b66;">)&quot;, &quot;</span><span style="color:#a3be8c;">application/json</span><span style="color:#4f5b66;">&quot;);
</span><span style="color:#4f5b66;">});
</span><span style="color:#4f5b66;">
</span><span style="color:#a7adba;">// 静的ファイル配信
</span><span style="color:#4f5b66;">svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/</span><span style="color:#4f5b66;">&quot;, &quot;</span><span style="color:#a3be8c;">./public</span><span style="color:#4f5b66;">&quot;);
</span><span style="color:#4f5b66;">
</span><span style="color:#4f5b66;">svr.</span><span style="color:#8fa1b3;">listen</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">0.0.0.0</span><span style="color:#4f5b66;">&quot;, </span><span style="color:#d08770;">8080</span><span style="color:#4f5b66;">);
</span></pre>
</div>
<p>ハンドラーが先に評価されます。<code>/api/hello</code> にはハンドラーが応答し、それ以外のパスは <code>./public</code> ディレクトリからファイルを探します。</p>
<h2>レスポンスヘッダーの追加</h2>
<p><code>set_mount_point()</code> の第3引数にヘッダーを渡すと、静的ファイルのレスポンスにカスタムヘッダーを付けられます。キャッシュ制御に便利です。</p>
<div class="code-dark"><pre style="background-color:#2d2d2d;">
<span style="color:#d3d0c8;">svr.</span><span style="color:#6699cc;">set_mount_point</span><span style="color:#d3d0c8;">(&quot;</span><span style="color:#99cc99;">/</span><span style="color:#d3d0c8;">&quot;, &quot;</span><span style="color:#99cc99;">./public</span><span style="color:#d3d0c8;">&quot;, {
</span><span style="color:#d3d0c8;"> {&quot;</span><span style="color:#99cc99;">Cache-Control</span><span style="color:#d3d0c8;">&quot;, &quot;</span><span style="color:#99cc99;">max-age=3600</span><span style="color:#d3d0c8;">&quot;}
</span><span style="color:#d3d0c8;">});
</span></pre>
</div><div class="code-light"><pre style="background-color:#eff1f5;">
<span style="color:#4f5b66;">svr.</span><span style="color:#8fa1b3;">set_mount_point</span><span style="color:#4f5b66;">(&quot;</span><span style="color:#a3be8c;">/</span><span style="color:#4f5b66;">&quot;, &quot;</span><span style="color:#a3be8c;">./public</span><span style="color:#4f5b66;">&quot;, {
</span><span style="color:#4f5b66;"> {&quot;</span><span style="color:#a3be8c;">Cache-Control</span><span style="color:#4f5b66;">&quot;, &quot;</span><span style="color:#a3be8c;">max-age=3600</span><span style="color:#4f5b66;">&quot;}
</span><span style="color:#4f5b66;">});
</span></pre>
</div>
<p>こうすると、ブラウザは配信されたファイルを1時間キャッシュします。</p>
<h2>静的ファイルサーバー用のDockerファイル</h2>
<p>cpp-httplibのリポジトリには、静的ファイルサーバー用の <code>Dockerfile</code> が含まれています。Docker Hubにビルド済みイメージも公開しているので、1コマンドで起動できます。</p>
<div class="code-dark"><pre style="background-color:#2d2d2d;">
<span style="color:#d3d0c8;">&gt; docker run</span><span style="color:#f2777a;"> -p</span><span style="color:#d3d0c8;"> 8080:80</span><span style="color:#f2777a;"> -v</span><span style="color:#d3d0c8;"> ./my-site:/html yhirose4dockerhub/cpp-httplib-server
</span><span style="color:#6699cc;">Serving</span><span style="color:#d3d0c8;"> HTTP on 0.0.0.0:80
</span><span style="color:#6699cc;">Mount</span><span style="color:#d3d0c8;"> point: / -&gt; ./html
</span><span style="color:#6699cc;">Press</span><span style="color:#d3d0c8;"> Ctrl+C to shutdown gracefully...
</span><span style="color:#6699cc;">192.168.65.1</span><span style="color:#d3d0c8;"> - - </span><span style="color:#cc99cc;">[</span><span style="color:#d3d0c8;">22/Feb/2026:12:00:00 +0000</span><span style="color:#cc99cc;">] </span><span style="color:#d3d0c8;">&quot;</span><span style="color:#99cc99;">GET / HTTP/1.1</span><span style="color:#d3d0c8;">&quot; 200 256 &quot;</span><span style="color:#99cc99;">-</span><span style="color:#d3d0c8;">&quot; &quot;</span><span style="color:#99cc99;">Mozilla/5.0 ...</span><span style="color:#d3d0c8;">&quot;
</span><span style="color:#6699cc;">192.168.65.1</span><span style="color:#d3d0c8;"> - - </span><span style="color:#cc99cc;">[</span><span style="color:#d3d0c8;">22/Feb/2026:12:00:00 +0000</span><span style="color:#cc99cc;">] </span><span style="color:#d3d0c8;">&quot;</span><span style="color:#99cc99;">GET /style.css HTTP/1.1</span><span style="color:#d3d0c8;">&quot; 200 1024 &quot;</span><span style="color:#99cc99;">-</span><span style="color:#d3d0c8;">&quot; &quot;</span><span style="color:#99cc99;">Mozilla/5.0 ...</span><span style="color:#d3d0c8;">&quot;
</span><span style="color:#6699cc;">192.168.65.1</span><span style="color:#d3d0c8;"> - - </span><span style="color:#cc99cc;">[</span><span style="color:#d3d0c8;">22/Feb/2026:12:00:01 +0000</span><span style="color:#cc99cc;">] </span><span style="color:#d3d0c8;">&quot;</span><span style="color:#99cc99;">GET /favicon.ico HTTP/1.1</span><span style="color:#d3d0c8;">&quot; 404 152 &quot;</span><span style="color:#99cc99;">-</span><span style="color:#d3d0c8;">&quot; &quot;</span><span style="color:#99cc99;">Mozilla/5.0 ...</span><span style="color:#d3d0c8;">&quot;
</span></pre>
</div><div class="code-light"><pre style="background-color:#eff1f5;">
<span style="color:#4f5b66;">&gt; docker run</span><span style="color:#bf616a;"> -p</span><span style="color:#4f5b66;"> 8080:80</span><span style="color:#bf616a;"> -v</span><span style="color:#4f5b66;"> ./my-site:/html yhirose4dockerhub/cpp-httplib-server
</span><span style="color:#8fa1b3;">Serving</span><span style="color:#4f5b66;"> HTTP on 0.0.0.0:80
</span><span style="color:#8fa1b3;">Mount</span><span style="color:#4f5b66;"> point: / -&gt; ./html
</span><span style="color:#8fa1b3;">Press</span><span style="color:#4f5b66;"> Ctrl+C to shutdown gracefully...
</span><span style="color:#8fa1b3;">192.168.65.1</span><span style="color:#4f5b66;"> - - </span><span style="color:#b48ead;">[</span><span style="color:#4f5b66;">22/Feb/2026:12:00:00 +0000</span><span style="color:#b48ead;">] </span><span style="color:#4f5b66;">&quot;</span><span style="color:#a3be8c;">GET / HTTP/1.1</span><span style="color:#4f5b66;">&quot; 200 256 &quot;</span><span style="color:#a3be8c;">-</span><span style="color:#4f5b66;">&quot; &quot;</span><span style="color:#a3be8c;">Mozilla/5.0 ...</span><span style="color:#4f5b66;">&quot;
</span><span style="color:#8fa1b3;">192.168.65.1</span><span style="color:#4f5b66;"> - - </span><span style="color:#b48ead;">[</span><span style="color:#4f5b66;">22/Feb/2026:12:00:00 +0000</span><span style="color:#b48ead;">] </span><span style="color:#4f5b66;">&quot;</span><span style="color:#a3be8c;">GET /style.css HTTP/1.1</span><span style="color:#4f5b66;">&quot; 200 1024 &quot;</span><span style="color:#a3be8c;">-</span><span style="color:#4f5b66;">&quot; &quot;</span><span style="color:#a3be8c;">Mozilla/5.0 ...</span><span style="color:#4f5b66;">&quot;
</span><span style="color:#8fa1b3;">192.168.65.1</span><span style="color:#4f5b66;"> - - </span><span style="color:#b48ead;">[</span><span style="color:#4f5b66;">22/Feb/2026:12:00:01 +0000</span><span style="color:#b48ead;">] </span><span style="color:#4f5b66;">&quot;</span><span style="color:#a3be8c;">GET /favicon.ico HTTP/1.1</span><span style="color:#4f5b66;">&quot; 404 152 &quot;</span><span style="color:#a3be8c;">-</span><span style="color:#4f5b66;">&quot; &quot;</span><span style="color:#a3be8c;">Mozilla/5.0 ...</span><span style="color:#4f5b66;">&quot;
</span></pre>
</div>
<p><code>./my-site</code> ディレクトリの中身が、そのままポート8080で配信されます。NGINXと同じログ形式で、アクセスの様子を確認できますよ。</p>
<h2>次のステップ</h2>
<p>静的ファイルの配信ができるようになりましたね。HTMLやCSS、JavaScriptを配信するWebサーバーが、これだけのコードで作れます。</p>
<p>次は、HTTPSで暗号化通信をしてみましょう。まずはTLSライブラリのセットアップからです。</p>
<p><strong>次:</strong> <a href="../05-tls-setup">TLS Setup</a></p>
</article>
</main>
</div>
<footer class="footer">
&copy; 2026 yhirose. All rights reserved.
</footer>
<script src="&#x2F;cpp-httplib/js/main.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink