{"id":1123,"date":"2024-04-19T13:59:45","date_gmt":"2024-04-19T04:59:45","guid":{"rendered":"https:\/\/shinke1987.net\/?p=1123"},"modified":"2024-04-19T13:59:46","modified_gmt":"2024-04-19T04:59:46","slug":"vite-react%e9%96%8b%e7%99%ba%e7%92%b0%e5%a2%83%e3%82%92docker%e3%82%b3%e3%83%b3%e3%83%86%e3%83%8a%e3%81%a7%e6%a7%8b%e7%af%89","status":"publish","type":"post","link":"https:\/\/shinke1987.net\/?p=1123","title":{"rendered":"Vite + React\u958b\u767a\u74b0\u5883\u3092Docker\u30b3\u30f3\u30c6\u30ca\u3067\u69cb\u7bc9"},"content":{"rendered":"\n<h2 id=\"toc0\" class=\"wp-block-heading\">\u76ee\u7684<\/h2>\n\n\n\n<p>React\u306e\u516c\u5f0f\u30da\u30fc\u30b8\u3067Vite\u3092\u4f7f\u3063\u305f\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u304c\u7d39\u4ecb\u3055\u308c\u3066\u3044\u305f\u306e\u3067\u3001<br>Docker\u30b3\u30f3\u30c6\u30ca\u306b\u3066Vite\u3067React\u958b\u767a\u74b0\u5883\u3092\u4f5c\u6210\u3059\u308b\u624b\u9806\u3092\u78ba\u8a8d\u3059\u308b\u3002<\/p>\n\n\n\n<h2 id=\"toc1\" class=\"wp-block-heading\">\u4f5c\u696d\u30d5\u30a9\u30eb\u30c0\u306e\u69cb\u6210<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\u4f5c\u696d\u30d5\u30a9\u30eb\u30c0\n\u251c app\n\u2514 docker-compose.yml\n<\/pre><\/div>\n\n\n<h2 id=\"toc2\" class=\"wp-block-heading\">docker-compose.yml \u306e\u5185\u5bb9<\/h2>\n\n\n\n<p>\u4e0b\u8a18\u5185\u5bb9\u306edocker-compose.yml\u3092\u4f5c\u6210\u3059\u308b\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: yaml; title: ; notranslate\" title=\"\">\nversion: &quot;3&quot;\nservices:\n  node:\n    image: &quot;node:21&quot;\n    user: &quot;node&quot;\n    container_name: node-react\n    working_dir: \/home\/node\/app\n    volumes:\n      - .\/app:\/home\/node\/app\n    expose:\n      - &quot;3000&quot;\n    ports:\n      - &quot;3000:3000&quot;\n    tty: true\n<\/pre><\/div>\n\n\n<h2 id=\"toc3\" class=\"wp-block-heading\">Docker\u30b3\u30f3\u30c6\u30ca\u4f5c\u6210<\/h2>\n\n\n\n<p>docker-compose.yml \u304c\u5b58\u5728\u3059\u308b\u5834\u6240\u3067\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\n$ docker compose up -d\n<\/pre><\/div>\n\n\n<p>\u5b8c\u4e86\u5f8c\u3001\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3067\u30b3\u30f3\u30c6\u30ca\u306b\u5165\u308a\u3001node\u3068npm\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\n\/\/ \u4f5c\u6210\u3057\u305f\u30b3\u30f3\u30c6\u30ca\u306b\u5165\u308b\u3002\n$ docker container exec -it node-react \/bin\/bash\n\n\/\/ node\u3068npm\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u8868\u793a\u3057\u3066\u78ba\u8a8d\u3059\u308b\u3002\n$ node -v\n$ npm -v\n<\/pre><\/div>\n\n\n<h2 id=\"toc4\" class=\"wp-block-heading\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210<\/h2>\n\n\n\n<p>\u4f5c\u6210\u3057\u305f\u30b3\u30f3\u30c6\u30ca\u5185\u3067\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\n\/\/ \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\n$ npm create vite@latest \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d -- --template react-ts\n\/\/ create-vite\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u826f\u3044\u304b\u805e\u304b\u308c\u308b\u306e\u3067\u3001y\u3067\u8a31\u53ef\u3059\u308b\u3002\n\n\/\/ \u5fc5\u8981\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u7b49\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3002\n$ cd \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\n$ npm install --production=false\n\n\/\/ \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u305f\u3082\u306e\u3092\u78ba\u8a8d\u3059\u308b\u3002\n$ npm ls --production=false\n<\/pre><\/div>\n\n\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u305f\u3082\u306e\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u308b\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n+-- @types\/react-dom@18.2.25\n+-- @types\/react@18.2.79\n+-- @typescript-eslint\/eslint-plugin@7.7.0\n+-- @typescript-eslint\/parser@7.7.0\n+-- @vitejs\/plugin-react@4.2.1\n+-- eslint-plugin-react-hooks@4.6.0\n+-- eslint-plugin-react-refresh@0.4.6\n+-- eslint@8.57.0\n+-- react-dom@18.2.0\n+-- react@18.2.0\n+-- typescript@5.4.5\n`-- vite@5.2.9\n<\/pre><\/div>\n\n\n<h2 id=\"toc5\" class=\"wp-block-heading\">vite.config.ts \u306e\u7de8\u96c6<\/h2>\n\n\n\n<p>vite.config.ts\u3092\u4e0b\u8a18\u5185\u5bb9\u306e\u3088\u3046\u306b\u7de8\u96c6\u3059\u308b\u3002<br>\uff08Next.js\u3092\u3084\u308a\u305f\u304f\u306a\u3063\u305f\u5834\u5408\u306e\u305f\u3081\u306b\u30dd\u30fc\u30c8\u756a\u53f7\u306f3000\u3092\u5229\u7528\u3059\u308b\uff09<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { defineConfig } from &#039;vite&#039;\nimport react from &#039;@vitejs\/plugin-react&#039;\n\nexport default defineConfig({\n  plugins: &#x5B;react()],\n  server: {\n    host: &#039;0.0.0.0&#039;,\n    port: 3000,\n  }\n})\n<\/pre><\/div>\n\n\n<h2 id=\"toc6\" class=\"wp-block-heading\">\u958b\u767a\u7528\u30b5\u30fc\u30d0\u8d77\u52d5<\/h2>\n\n\n\n<p>\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3067\u958b\u767a\u7528\u30b5\u30fc\u30d0\u3092\u8d77\u52d5\u3059\u308b\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\n$ npm run dev\n<\/pre><\/div>\n\n\n<p>\u958b\u767a\u7528\u30b5\u30fc\u30d0\u8d77\u52d5\u5f8c\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u308b\u3002<br>\uff08Network\u306e\u9805\u76ee\u304c\u7121\u3044\u3068Docker\u30b3\u30f3\u30c6\u30ca\u4e0a\u306e\u958b\u767a\u7528\u30b5\u30fc\u30d0\u306bWeb\u30d6\u30e9\u30a6\u30b6\u3067\u30a2\u30af\u30bb\u30b9\u3067\u304d\u306a\u3044\uff09<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n  VITE v5.2.9  ready in 145 ms\n\n  \u279c  Local:   http:\/\/localhost:3000\/\n  \u279c  Network: http:\/\/172.29.0.2:3000\/\n  \u279c  press h + enter to show help\n<\/pre><\/div>\n\n\n<h2 id=\"toc7\" class=\"wp-block-heading\">Web\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u78ba\u8a8d<\/h2>\n\n\n\n<p>\u4e0b\u8a18URL\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u3001Vite+React\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308c\u3070\u826f\u3044\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n https:\/\/localhost:3000\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>\u76ee\u7684 React\u306e\u516c\u5f0f\u30da\u30fc\u30b8\u3067Vite\u3092\u4f7f\u3063\u305f\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u304c\u7d39\u4ecb\u3055\u308c\u3066\u3044\u305f\u306e\u3067\u3001Docker\u30b3\u30f3\u30c6\u30ca\u306b\u3066Vite\u3067React\u958b\u767a\u74b0\u5883\u3092\u4f5c\u6210\u3059\u308b\u624b\u9806\u3092\u78ba\u8a8d\u3059\u308b\u3002 \u4f5c\u696d\u30d5\u30a9\u30eb\u30c0\u306e\u69cb\u6210 docker-compose.yml \u306e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[98,105,106],"class_list":["post-1123","post","type-post","status-publish","format-standard","hentry","category-react","tag-docker","tag-react","tag-vite"],"_links":{"self":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1123"}],"version-history":[{"count":3,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1123\/revisions"}],"predecessor-version":[{"id":1126,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1123\/revisions\/1126"}],"wp:attachment":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}