{"id":60,"date":"2019-06-29T18:56:03","date_gmt":"2019-06-29T09:56:03","guid":{"rendered":"https:\/\/blog.hacya.com\/?p=60"},"modified":"2021-07-04T14:58:25","modified_gmt":"2021-07-04T05:58:25","slug":"reactstaticwebhosting1","status":"publish","type":"post","link":"https:\/\/blog.hacya.com\/index.php\/2019\/06\/29\/reactstaticwebhosting1\/","title":{"rendered":"React\u3092\u4f7f\u3063\u3066Static\u306aWeb Hosting\u3092\u3059\u308b\u3002(\u305d\u306e1)"},"content":{"rendered":"\n<p>\u524d\u56de\u306findex.html\u3092\u7f6e\u304f\u3060\u3051\u3068\u3044\u3046\u7c21\u5358\u306aWeb Hosting\u3067\u3057\u305f\u304c\u3001\u4eca\u56de\u306fReact\u3092\u4f7f\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br>React\u306f\u3001Facebook\u793e\u304c\u958b\u767a\u3057\u305fJavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u30fc\u3067\u3001Web Page\u306e\u66f4\u65b0\u3092Virtual DOM\u3092\u4f7f\u3063\u3066\u7ba1\u7406\u3059\u308b\u305f\u3081\u3001Web Page\u306e\u66f4\u65b0\u7ba1\u7406\u304c\u7c21\u5358\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u307e\u305a\u306f\u3001Node.js\u306eInstall\u3067\u3059\u3002<br><a href=\"https:\/\/nodejs.org\/en\/download\/\">https:\/\/nodejs.org\/en\/download\/<\/a><br>\u304b\u3089Current Latest Features\u3092Download\u3057\u3066Install\u3057\u307e\u3059\u3002<br>\u4eca\u56de\u306f\u3001Windows Installer (.msi)\u306e64-bit\u3092\u9078\u3073\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-1024x576.png\" alt=\"\" class=\"wp-image-61\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-1024x576.png 1024w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-300x169.png 300w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-768x432.png 768w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-1200x675.png 1200w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js.png 1920w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p> \u73fe\u5728(2019\u5e746\u6708)\u306eVersion\u306f\u3001V12.5.0\u3067\u3001<br>node-v12.5.0-x64.msi<br>\u3092download\u3057\u3066\u3001download\u3057\u305ffile\u3092Double-click\u3057\u3066Install\u3057\u307e\u3059\u3002 <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"483\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install1.png\" alt=\"\" class=\"wp-image-62\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install1.png 618w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install1-300x234.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"483\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install2.png\" alt=\"\" class=\"wp-image-63\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install2.png 618w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install2-300x234.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"483\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install3.png\" alt=\"\" class=\"wp-image-64\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install3.png 618w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install3-300x234.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"483\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install4.png\" alt=\"\" class=\"wp-image-65\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install4.png 618w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install4-300x234.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n\n\n\n<p>Tools for Native Modules\u3067\u306f\u3001Option\u3092\u9078\u629e\u305b\u305a\u306b\u9032\u307f\u307e\u3059\u3002\u3053\u308c\u3092\u9078\u629e\u3059\u308b\u3068\u3001Python 2\u304cInstall\u3055\u308c\u3001\u3042\u3068\u3042\u3068\u9762\u5012\u306a\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u306eTool\u304c\u5fc5\u8981\u306aModules\u306b\u51fa\u304f\u308f\u3057\u305f\u3089\u3001\u305d\u306e\u6642Install\u3059\u308b\u304b\u8003\u3048\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"483\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install5.png\" alt=\"\" class=\"wp-image-66\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install5.png 618w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install5-300x234.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"483\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install6.png\" alt=\"\" class=\"wp-image-67\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install6.png 618w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install6-300x234.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"483\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install7.png\" alt=\"\" class=\"wp-image-69\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install7.png 618w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install7-300x234.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n\n\n\n<p>Node.js\u306eInstall\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002Node.js\u304cInstall\u3055\u308c\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3059\u3002\u540c\u6642\u306bnpm\u304cInstall\u3055\u308c\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3059\u3002<br><code>node -v<\/code><br><code>npm -v<\/code><br>npm\u306f\u3001Node.js\u306ePackage\u3092\u7ba1\u7406\u3059\u308bApplication\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install8-edit-1024x535.png\" alt=\"\" class=\"wp-image-70\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install8-edit-1024x535.png 1024w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install8-edit-300x157.png 300w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install8-edit-768x401.png 768w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install8-edit-1200x627.png 1200w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install8-edit.png 1223w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p>npm\u3092Firewall\u306e\u5185\u5074\u304b\u3089\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u3001proxy\u306e\u8a2d\u5b9a\u304c\u5fc5\u8981\u306b\u306a\u308b\u5834\u5408\u304c\u591a\u3044\u3067\u3059\u3002Firewall\u306e\u8a2d\u5b9a\u306f\u3001npm config set\uff5e\u3067\u884c\u3044\u307e\u3059\u3002<br><code>npm config set proxy \"http:\/\/192.168.1.1:8080\/\"<\/code><br><code>npm config set https-proxy \"http:\/\/192.168.1.1:8080\/\"<\/code><br><code>npm config list<\/code><br>Proxy Server\u306eIP Address\u3084Port Number\u306f\u3001Windows\u306e\u8a2d\u5b9a\u3092\u53c2\u7167\u3057\u307e\u3059\u3002proxy.pac\u3092\u4f7f\u3063\u305f\u8a2d\u5b9a\u65b9\u6cd5\u306e\u5834\u5408\u306f\u3001proxy.pac\u3092Text File\u3068\u3057\u3066download\u3057\u3066Text Editor\u3067\u8a2d\u5b9a\u5185\u5bb9\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002Browser\u306bproxy.pac\u306eURL\u3092\u5165\u529b\u3059\u308c\u3070Text\u3068\u3057\u3066Download\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install9-edit-1024x535.png\" alt=\"\" class=\"wp-image-71\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install9-edit-1024x535.png 1024w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install9-edit-300x157.png 300w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install9-edit-768x401.png 768w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install9-edit-1200x627.png 1200w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install9-edit.png 1223w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p>React\u306eWeb Application\u306e\u3072\u306a\u5f62\u3092\u4f5c\u6210\u3059\u308b\u306e\u306b\u4fbf\u5229\u306aTool\u3001create-react-app\u3092\u4f7f\u3063\u3066\u3001Web Application\u3092\u4f5c\u308a\u307e\u3059\u3002<br>\u307e\u305a\u3001create-react-app\u3092npm\u3092\u4f7f\u3063\u3066Install\u3057\u307e\u3059\u3002<br>\u7d9a\u3051\u3066\u3001create-react-app\u3067\u3001export\u3068\u3044\u3046Application\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<br><code>npm install -g create-react-app<\/code><br><code>create-react-app export<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"904\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install10-edit-1-1024x904.png\" alt=\"\" class=\"wp-image-73\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install10-edit-1-1024x904.png 1024w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install10-edit-1-300x265.png 300w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install10-edit-1-768x678.png 768w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install10-edit-1-1200x1060.png 1200w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install10-edit-1.png 1223w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p>\u5b9f\u969b\u306bWeb Application\u3092\u7acb\u3061\u4e0a\u3052\u307e\u3057\u3087\u3046\u3002<br><code>cd export<\/code><br><code>npm start<\/code><br>\u3059\u308b\u3068\u3001Default\u306eBrowser\u304c\u7acb\u3061\u4e0a\u304c\u308a\u3001<br>http:\/\/localhost:3000\/<br>\u3092\u8868\u793a\u3057\u307e\u3059\u3002<br>\u304a\u52e7\u3081\u306eBrowser\u306fGoogle Chrome\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install11-edit-1024x535.png\" alt=\"\" class=\"wp-image-74\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install11-edit-1024x535.png 1024w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install11-edit-300x157.png 300w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install11-edit-768x401.png 768w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install11-edit-1200x627.png 1200w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install11-edit.png 1223w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install12-1024x535.png\" alt=\"\" class=\"wp-image-75\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install12-1024x535.png 1024w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install12-300x157.png 300w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install12-768x401.png 768w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install12-1200x627.png 1200w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install12.png 1223w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"904\" src=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install13-1024x904.png\" alt=\"\" class=\"wp-image-76\" srcset=\"https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install13-1024x904.png 1024w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install13-300x265.png 300w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install13-768x678.png 768w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install13-1200x1060.png 1200w, https:\/\/blog.hacya.com\/wp-content\/uploads\/2019\/06\/Node.js-install13.png 1223w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p>\u3053\u308c\u3067\u5b8c\u4e86\u3067\u3059\u3002\u6b21\u56de\u306f\u3001\u3053\u306eApplication\u3092AWS S3\u306bDeploy\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u56de\u306findex.html\u3092\u7f6e\u304f\u3060\u3051\u3068\u3044\u3046\u7c21\u5358\u306aWeb Hosting\u3067\u3057\u305f\u304c\u3001\u4eca\u56de\u306fReact\u3092\u4f7f\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002React\u306f\u3001Facebook\u793e\u304c\u958b\u767a\u3057\u305fJavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u30fc\u3067\u3001Web Page\u306e\u66f4\u65b0\u3092V &hellip; <a href=\"https:\/\/blog.hacya.com\/index.php\/2019\/06\/29\/reactstaticwebhosting1\/\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;React\u3092\u4f7f\u3063\u3066Static\u306aWeb Hosting\u3092\u3059\u308b\u3002(\u305d\u306e1)&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[4,8,5,6,7],"class_list":["post-60","post","type-post","status-publish","format-standard","hentry","category-aws","tag-aws","tag-create-react-app","tag-node-js","tag-npm","tag-react"],"_links":{"self":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":7,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":222,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/60\/revisions\/222"}],"wp:attachment":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/categories?post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/tags?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}