index.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <!DOCTYPE html>
  2. <html lang="en" data-base-path="&#x2F;cpp-httplib">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Static File Server - cpp-httplib</title>
  7. <link rel="stylesheet" href="&#x2F;cpp-httplib/css/main.css">
  8. <script>
  9. (function() {
  10. var t = localStorage.getItem('preferred-theme');
  11. if (!t) t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
  12. if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
  13. })();
  14. </script>
  15. </head>
  16. <body>
  17. <header class="header">
  18. <div class="header-inner">
  19. <a href="&#x2F;cpp-httplib/en/" class="header-title">cpp-httplib <span style="font-size:0.75em;font-weight:normal;margin-left:4px">v0.35.0</span></a>
  20. <div class="header-spacer"></div>
  21. <nav class="header-nav">
  22. <a href="&#x2F;cpp-httplib/en/">Home</a>
  23. <a href="&#x2F;cpp-httplib/en/tour/">Tour</a>
  24. <a href="https://github.com/yhirose/cpp-httplib">GitHub</a>
  25. </nav>
  26. <div class="header-tools">
  27. <button class="theme-toggle" aria-label="Toggle theme"></button>
  28. <div class="lang-selector">
  29. <button class="lang-btn" aria-label="Language">EN</button>
  30. <ul class="lang-popup">
  31. <li><a href="#" data-lang="en">EN</a></li>
  32. <li><a href="#" data-lang="ja">JA</a></li>
  33. </ul>
  34. </div>
  35. </div>
  36. <button class="sidebar-toggle" aria-label="Menu">&#9776;</button>
  37. </div>
  38. </header>
  39. <div class="layout has-sidebar">
  40. <aside class="sidebar">
  41. <nav class="sidebar-nav">
  42. <div class="nav-section">
  43. <a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;" class="nav-section-title active">A Tour of cpp-httplib</a>
  44. <ul class="nav-list">
  45. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;01-getting-started&#x2F;" class="">Getting Started</a></li>
  46. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;02-basic-client&#x2F;" class="">Basic Client</a></li>
  47. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;03-basic-server&#x2F;" class="">Basic Server</a></li>
  48. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;04-static-file-server&#x2F;" class="active">Static File Server</a></li>
  49. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;05-tls-setup&#x2F;" class="">TLS Setup</a></li>
  50. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;06-https-client&#x2F;" class="">HTTPS Client</a></li>
  51. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;07-https-server&#x2F;" class="">HTTPS Server</a></li>
  52. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;08-websocket&#x2F;" class="">WebSocket</a></li>
  53. <li><a href="&#x2F;cpp-httplib&#x2F;en&#x2F;tour&#x2F;09-whats-next&#x2F;" class="">What&#x27;s Next</a></li>
  54. </ul>
  55. </div>
  56. </nav>
  57. </aside>
  58. <main class="content">
  59. <article>
  60. <h1>Static File Server</h1>
  61. <p>cpp-httplib can serve static files too — HTML, CSS, images, you name it. No complicated configuration required. One call to <code>set_mount_point()</code> is all it takes.</p>
  62. <h2>The basics of set_mount_point</h2>
  63. <p>Let's jump right in. <code>set_mount_point()</code> maps a URL path to a local directory.</p>
  64. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  65. <span style="color:#cc99cc;">#include </span><span style="color:#d3d0c8;">&quot;</span><span style="color:#99cc99;">httplib.h</span><span style="color:#d3d0c8;">&quot;
  66. </span><span style="color:#cc99cc;">#include </span><span style="color:#d3d0c8;">&lt;</span><span style="color:#99cc99;">iostream</span><span style="color:#d3d0c8;">&gt;
  67. </span><span style="color:#d3d0c8;">
  68. </span><span style="color:#cc99cc;">int </span><span style="color:#6699cc;">main</span><span style="color:#d3d0c8;">() {
  69. </span><span style="color:#d3d0c8;"> httplib::Server svr;
  70. </span><span style="color:#d3d0c8;">
  71. </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;);
  72. </span><span style="color:#d3d0c8;">
  73. </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;
  74. </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;">);
  75. </span><span style="color:#d3d0c8;">}
  76. </span></pre>
  77. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  78. <span style="color:#b48ead;">#include </span><span style="color:#4f5b66;">&quot;</span><span style="color:#a3be8c;">httplib.h</span><span style="color:#4f5b66;">&quot;
  79. </span><span style="color:#b48ead;">#include </span><span style="color:#4f5b66;">&lt;</span><span style="color:#a3be8c;">iostream</span><span style="color:#4f5b66;">&gt;
  80. </span><span style="color:#4f5b66;">
  81. </span><span style="color:#b48ead;">int </span><span style="color:#8fa1b3;">main</span><span style="color:#4f5b66;">() {
  82. </span><span style="color:#4f5b66;"> httplib::Server svr;
  83. </span><span style="color:#4f5b66;">
  84. </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;);
  85. </span><span style="color:#4f5b66;">
  86. </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;
  87. </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;">);
  88. </span><span style="color:#4f5b66;">}
  89. </span></pre>
  90. </div>
  91. <p>The first argument is the URL mount point. The second is the local directory path. In this example, requests to <code>/</code> are served from the <code>./html</code> directory.</p>
  92. <p>Let's try it out. First, create an <code>html</code> directory and add an <code>index.html</code> file.</p>
  93. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  94. <span style="color:#6699cc;">mkdir</span><span style="color:#d3d0c8;"> html
  95. </span></pre>
  96. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  97. <span style="color:#8fa1b3;">mkdir</span><span style="color:#4f5b66;"> html
  98. </span></pre>
  99. </div><div class="code-dark"><pre style="background-color:#2d2d2d;">
  100. <span style="color:#d3d0c8;">&lt;!</span><span style="color:#f2777a;">DOCTYPE</span><span style="color:#d3d0c8;"> html&gt;
  101. </span><span style="color:#d3d0c8;">&lt;</span><span style="color:#f2777a;">html</span><span style="color:#d3d0c8;">&gt;
  102. </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;
  103. </span><span style="color:#d3d0c8;">&lt;</span><span style="color:#f2777a;">body</span><span style="color:#d3d0c8;">&gt;
  104. </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;
  105. </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;
  106. </span><span style="color:#d3d0c8;">&lt;/</span><span style="color:#f2777a;">body</span><span style="color:#d3d0c8;">&gt;
  107. </span><span style="color:#d3d0c8;">&lt;/</span><span style="color:#f2777a;">html</span><span style="color:#d3d0c8;">&gt;
  108. </span></pre>
  109. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  110. <span style="color:#4f5b66;">&lt;!</span><span style="color:#bf616a;">DOCTYPE</span><span style="color:#4f5b66;"> html&gt;
  111. </span><span style="color:#4f5b66;">&lt;</span><span style="color:#bf616a;">html</span><span style="color:#4f5b66;">&gt;
  112. </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;
  113. </span><span style="color:#4f5b66;">&lt;</span><span style="color:#bf616a;">body</span><span style="color:#4f5b66;">&gt;
  114. </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;
  115. </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;
  116. </span><span style="color:#4f5b66;">&lt;/</span><span style="color:#bf616a;">body</span><span style="color:#4f5b66;">&gt;
  117. </span><span style="color:#4f5b66;">&lt;/</span><span style="color:#bf616a;">html</span><span style="color:#4f5b66;">&gt;
  118. </span></pre>
  119. </div>
  120. <p>Compile and start the server.</p>
  121. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  122. <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
  123. </span><span style="color:#6699cc;">./server
  124. </span></pre>
  125. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  126. <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
  127. </span><span style="color:#8fa1b3;">./server
  128. </span></pre>
  129. </div>
  130. <p>Open <code>http://localhost:8080</code> in your browser. You should see the contents of <code>html/index.html</code>. Visiting <code>http://localhost:8080/index.html</code> returns the same page.</p>
  131. <p>You can also access it with the client code from the previous chapter, or with <code>curl</code>.</p>
  132. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  133. <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;);
  134. </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;);
  135. </span><span style="color:#cc99cc;">if </span><span style="color:#d3d0c8;">(res) {
  136. </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 is displayed
  137. </span><span style="color:#d3d0c8;">}
  138. </span></pre>
  139. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  140. <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;);
  141. </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;);
  142. </span><span style="color:#b48ead;">if </span><span style="color:#4f5b66;">(res) {
  143. </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 is displayed
  144. </span><span style="color:#4f5b66;">}
  145. </span></pre>
  146. </div><div class="code-dark"><pre style="background-color:#2d2d2d;">
  147. <span style="color:#6699cc;">curl</span><span style="color:#d3d0c8;"> http://localhost:8080
  148. </span></pre>
  149. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  150. <span style="color:#8fa1b3;">curl</span><span style="color:#4f5b66;"> http://localhost:8080
  151. </span></pre>
  152. </div>
  153. <h2>Multiple mount points</h2>
  154. <p>You can call <code>set_mount_point()</code> as many times as you like. Each URL path gets its own directory.</p>
  155. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  156. <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;);
  157. </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;);
  158. </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;);
  159. </span></pre>
  160. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  161. <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;);
  162. </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;);
  163. </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;);
  164. </span></pre>
  165. </div>
  166. <p>A request to <code>/assets/style.css</code> serves <code>./static/assets/style.css</code>. A request to <code>/docs/guide.html</code> serves <code>./documentation/guide.html</code>.</p>
  167. <h2>Combining with handlers</h2>
  168. <p>Static file serving and routing handlers — the kind you learned about in the previous chapter — work side by side.</p>
  169. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  170. <span style="color:#d3d0c8;">httplib::Server svr;
  171. </span><span style="color:#d3d0c8;">
  172. </span><span style="color:#747369;">// API endpoint
  173. </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) {
  174. </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;);
  175. </span><span style="color:#d3d0c8;">});
  176. </span><span style="color:#d3d0c8;">
  177. </span><span style="color:#747369;">// Static file serving
  178. </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;);
  179. </span><span style="color:#d3d0c8;">
  180. </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;">);
  181. </span></pre>
  182. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  183. <span style="color:#4f5b66;">httplib::Server svr;
  184. </span><span style="color:#4f5b66;">
  185. </span><span style="color:#a7adba;">// API endpoint
  186. </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) {
  187. </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;);
  188. </span><span style="color:#4f5b66;">});
  189. </span><span style="color:#4f5b66;">
  190. </span><span style="color:#a7adba;">// Static file serving
  191. </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;);
  192. </span><span style="color:#4f5b66;">
  193. </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;">);
  194. </span></pre>
  195. </div>
  196. <p>Handlers take priority. The handler responds to <code>/api/hello</code>. For every other path, the server looks for a file in <code>./public</code>.</p>
  197. <h2>Adding response headers</h2>
  198. <p>Pass headers as the third argument to <code>set_mount_point()</code> and they get attached to every static file response. This is great for cache control.</p>
  199. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  200. <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;, {
  201. </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;}
  202. </span><span style="color:#d3d0c8;">});
  203. </span></pre>
  204. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  205. <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;, {
  206. </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;}
  207. </span><span style="color:#4f5b66;">});
  208. </span></pre>
  209. </div>
  210. <p>With this in place, the browser caches served files for one hour.</p>
  211. <h2>A Dockerfile for your static file server</h2>
  212. <p>The cpp-httplib repository includes a <code>Dockerfile</code> built for static file serving. We also publish a pre-built image on Docker Hub, so you can get up and running with a single command.</p>
  213. <div class="code-dark"><pre style="background-color:#2d2d2d;">
  214. <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
  215. </span><span style="color:#6699cc;">Serving</span><span style="color:#d3d0c8;"> HTTP on 0.0.0.0:80
  216. </span><span style="color:#6699cc;">Mount</span><span style="color:#d3d0c8;"> point: / -&gt; ./html
  217. </span><span style="color:#6699cc;">Press</span><span style="color:#d3d0c8;"> Ctrl+C to shutdown gracefully...
  218. </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;
  219. </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;
  220. </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;
  221. </span></pre>
  222. </div><div class="code-light"><pre style="background-color:#eff1f5;">
  223. <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
  224. </span><span style="color:#8fa1b3;">Serving</span><span style="color:#4f5b66;"> HTTP on 0.0.0.0:80
  225. </span><span style="color:#8fa1b3;">Mount</span><span style="color:#4f5b66;"> point: / -&gt; ./html
  226. </span><span style="color:#8fa1b3;">Press</span><span style="color:#4f5b66;"> Ctrl+C to shutdown gracefully...
  227. </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;
  228. </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;
  229. </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;
  230. </span></pre>
  231. </div>
  232. <p>Everything in your <code>./my-site</code> directory gets served on port 8080. The access log follows the same format as NGINX, so you can see exactly what's happening.</p>
  233. <h2>What's next</h2>
  234. <p>You can now serve static files. A web server that delivers HTML, CSS, and JavaScript — built with this little code.</p>
  235. <p>Next, let's encrypt your connections with HTTPS. We'll start by setting up a TLS library.</p>
  236. <p><strong>Next:</strong> <a href="../05-tls-setup">TLS Setup</a></p>
  237. </article>
  238. </main>
  239. </div>
  240. <footer class="footer">
  241. &copy; 2026 yhirose. All rights reserved.
  242. </footer>
  243. <script src="&#x2F;cpp-httplib/js/main.js"></script>
  244. </body>
  245. </html>