{"id":5185,"date":"2026-04-08T16:58:14","date_gmt":"2026-04-08T07:58:14","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=5185"},"modified":"2026-04-08T17:35:23","modified_gmt":"2026-04-08T08:35:23","slug":"webserver-httplib-react-macos","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/04\/08\/webserver-httplib-react-macos\/","title":{"rendered":"[Webserver]httplib webserver+react(MacOS)"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb C++\uc758 httplib\ub97c \uc0ac\uc6a9\ud55c \ub9e4\uc6b0 \uac04\ub2e8\ud55c \uc6f9\uc11c\ubc84 \uc785\ub2c8\ub2e4.
This is a very simple web server using C++’s httplib.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb httplib \uc6f9\uc11c\ubc84\uc5d0 \ub9ac\uc561\ud2b8\ub97c \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4.
I added React to the httplib web server.<\/p>\n\n\n\n

\u2b50\ufe0f \ub9ac\uc561\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub294 \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uce58\ud558\uba74 \uc0dd\uc131\ub429\ub2c8\ub2e4. www \ub514\ub809\ud1a0\ub9ac\ub294 \uc9c1\uc811 \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4.
The React directory is created when you install a React project. You must create the www directory manually.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uba3c\uc800 Vite+React \uc0dd\uc131 \ubc0f \uc2e4\ud589 \ud569\ub2c8\ub2e4.
First, create and run Vite+React.<\/p>\n\n\n\n

# \ucd5c\uc2e0 Vite + React \uc124\uce58 \/ Install the latest Vite + React\nnpm create vite@latest react -- --template react-js\n\n# \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\ub85c \uc774\ub3d9 \/ Go to project folder\ncd react\n\n# \uc758\uc874\uc131 \uc124\uce58 \/ install dependencies\nnpm install\n\n# \uac1c\ubc1c \uc11c\ubc84 \uc2e4\ud589 \/ Run development server\nnpm run dev\n\n# \ub610\ub294 http:\/\/localhost:5173\/ \uc811\uc18d \/ Or access http:\/\/localhost:5173\/<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb \ub9ac\uc561\ud2b8 \ud398\uc774\uc9c0\uac00 \uc815\uc0c1\uc801\uc73c\ub85c \ubcf4\uc774\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.
Check if the React page is displayed correctly.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb react\ub514\ub809\ud1a0\ub9ac\uac00 \uc0dd\uc131\ub418\uc5c8\ub2e4\uba74 react\ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.
If the react directory has been created, navigate to the react directory.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb  \uc11c\ubc84 \uc2e4\ud589\uc2dc \ub9ac\uc561\ud2b8\ub294 \/react\ub85c \uc124\uc815\ud569\ub2c8\ub2e4. \uadf8\ub798\uc11c \uc544\ub798\uc640 \uac19\uc774 vite.config.js\ud30c\uc77c\uc744 \uc218\uc815\ud569\ub2c8\ub2e4.
When running the server, React is configured to \/react. Therefore, modify the vite.config.js file as follows.<\/p>\n\n\n\n
import { defineConfig } from 'vite'\nimport react from '@vitejs\/plugin-react'\n\n\/\/ https:\/\/vite.dev\/config\/\nexport default defineConfig({\n  plugins: [react()],\n  base: '\/react\/',\/\/ Added<\/strong>\n})<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb \ub9ac\uc561\ud2b8\ub97c \ube4c\ub4dc\ud558\uace0 \uacb0\uacfc\ubb3c(dist \ub514\ub809\ud1a0\ub9ac)\uc744 www \ub514\ub809\ud1a0\ub9ac \uc544\ub798\ub85c \ubcf5\uc0ac\ud569\ub2c8\ub2e4. 
Build React and copy the output (dist directory) under the www directory.<\/p>\n\n\n\n
\u2b50\ufe0f www\ub514\ub809\ud1a0\ub9ac\uac00 \uc5c6\ub2e4\uba74 server\ub514\ub809\ud1a0\ub9ac \uc606\uc5d0 \ub9cc\ub4e4\uba74\ub429\ub2c8\ub2e4.
If the www directory does not exist, you can create it next to the server directory.<\/p>\n\n\n\n
npm run build\nrsync -a .\/dist ..\/www\/<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb\uc11c\ubc84\ucf54\ub4dc \/ Server Code<\/p>\n\n\n\n
\u2714\ufe0f httplib.h<\/p>\n\n\n\n
— \uc544\ub798\uc758 \uba85\ub839\uc5b4\ub85c \ub2e4\uc6b4\ub85c\ub4dc\ud569\ub2c8\ub2e4.
Download using the command below.<\/p>\n\n\n\n
curl -L https:\/\/raw.githubusercontent.com\/yhirose\/cpp-httplib\/master\/httplib.h -o httplib.h<\/code><\/pre>\n\n\n\n
\u2714\ufe0f server.cpp<\/p>\n\n\n\n
#include \"httplib.h\"\n#include <iostream>\n\nint main( ) {\n    httplib::Server svr;\n\n    \/\/ \uae30\ubcf8 \ub77c\uc6b0\ud2b8 \/ default route\n    svr.Get(\"\/\", [](const httplib::Request&, httplib::Response& res ) {\n        res.set_content(\"<h3>hihi! Silver Hand ~~ \ud83d\udc4b<\/h3>\", \"text\/html; charset=utf-8\");\n    });\n\n    \/\/ \ub9ac\uc561\ud2b8 \uacbd\ub85c \/ react path\n    if (!svr.set_mount_point(\"\/react\", \"..\/www\/dist\")) {\n        std::cerr << \"\ub9ac\uc561\ud2b8 \uacbd\ub85c \ud3f4\ub354\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4! \uacbd\ub85c\ub97c \ud655\uc778\ud558\uc138\uc694.\/React path folder not found! Please check the path.\" << std::endl;\n        return 1;\n    }\n\n    \/\/ API \ub77c\uc6b0\ud2b8 \/ api route\n    svr.Get(\"\/api\/hello\", [](const httplib::Request&, httplib::Response& res ) {\n        res.set_content(\"{\\\"message\\\": \\\"API Server \ud83d\ude09\\\"}\", \"application\/json; charset=utf-8\");\n    });\n\n    \/\/ 404 \uc5d0\ub7ec \ud578\ub4e4\ub7ec \/ 404 error handler\n    svr.set_error_handler([](const httplib::Request& req, httplib::Response& res ) {\n        if (res.status == 404) {\n            \/\/ \uc11c\ubc84 \ud130\ubbf8\ub110\uc5d0 \uc5d0\ub7ec \uae30\ub85d (\uad00\ub9ac\uc790 \ud655\uc778\uc6a9)\n            std::cerr << \"[404 Error] \uc694\uccad\ub41c \uacbd\ub85c\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc74c: \" << req.path << std::endl;\n\n            \/\/ \ube0c\ub77c\uc6b0\uc800 \ud654\uba74\uc5d0 \uc548\ub0b4 \uba54\uc2dc\uc9c0 \uc804\uc1a1 (\uc0ac\uc6a9\uc790 \ud655\uc778\uc6a9)\n            res.set_content(\n                \"<h1>\ud398\uc774\uc9c0\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4 \/ The page cannot be found.\ud83d\ude2d<\/h1>\"\n                \"<p>\uc694\uccad\ud558\uc2e0 '\" + req.path + \"' \uacbd\ub85c\ub294 \uc874\uc7ac\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\"\n                \"<p>The requested path '\" + req.path + \"' does not exist.<\/p>\",\n                \"text\/html; charset=utf-8\"\n            );\n        }\n    });\n\n    std::cout << \"Server Listen http:\/\/localhost:8080\" << std::endl;\n    svr.listen(\"0.0.0.0\", 8080 );\n\n    return 0;\n}\n<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb\ucef4\ud30c\uc77c \/ Compiling<\/p>\n\n\n\n
g++ -o server server.cpp -std=c++11 -pthread<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc11c\ubc84\uc2e4\ud589 \/ Run Server<\/p>\n\n\n\n
.\/server<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb \ube0c\ub77c\uc6b0\uc800\ub85c \uc11c\ubc84\uc811\uc18d \/ Connect to server with browser<\/p>\n\n\n\n
\u2714\ufe0f \uae30\ubcf8 \ub8e8\ud2b8 \ub77c\uc6b0\ud2b8 \uc811\uc18d \/ Access default root route<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u2714\ufe0f \ub9ac\uc561\ud2b8 \ub77c\uc6b0\ud2b8 \uc811\uc18d \/ React Route Access<\/p>\n\n\n\n
\"\"
Screenshot<\/figcaption><\/figure>\n\n\n\n
\u2714\ufe0f API\ub77c\uc6b0\ud2b8 \uc811\uc18d \/ API route connection<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u2714\ufe0f \uc874\uc7ac\ud558\uc9c0\uc54a\ub294 \ub77c\uc6b0\ud2b8\uc2e4\ud589  \/ Execute non-existent route<\/p>\n\n\n\n
\"\"
Screenshot<\/figcaption><\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb C++\uc758 httplib\ub97c \uc0ac\uc6a9\ud55c \ub9e4\uc6b0 \uac04\ub2e8\ud55c \uc6f9\uc11c\ubc84 \uc785\ub2c8\ub2e4.This is a very simple web server using C++’s httplib. \ud83d\udc49\ud83c\udffb httplib \uc6f9\uc11c\ubc84\uc5d0 \ub9ac\uc561\ud2b8\ub97c \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4.I added React to the httplib web server. \u2b50\ufe0f \ub9ac\uc561\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub294 \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uce58\ud558\uba74 \uc0dd\uc131\ub429\ub2c8\ub2e4. www \ub514\ub809\ud1a0\ub9ac\ub294 \uc9c1\uc811 \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4.The React directory is created when you install a React project. You must create the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,21,1],"tags":[],"class_list":["post-5185","post","type-post","status-publish","format-standard","hentry","category-cpp","category-react","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/5185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=5185"}],"version-history":[{"count":6,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/5185\/revisions"}],"predecessor-version":[{"id":5195,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/5185\/revisions\/5195"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=5185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=5185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=5185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}