{"id":31098,"date":"2023-07-19T14:08:40","date_gmt":"2023-07-19T10:38:40","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/"},"modified":"2023-07-19T14:08:40","modified_gmt":"2023-07-19T10:38:40","slug":"how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React.js \u0648 Node.js \u0686\u0646\u062f \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u06cc \u0628\u0627 Docker Compose"},"content":{"rendered":"<div data-article-id=\"1541900\" id=\"article-body\">\n<p>Docker Compose \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0642\u062f\u0631\u062a\u0645\u0646\u062f Docker \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648 \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc Dockerized \u0686\u0646\u062f \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u06cc \u0627\u0633\u062a.  \u062f\u0627\u06a9\u0631 \u06cc\u06a9 \u067e\u0644\u062a\u0641\u0631\u0645 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648 \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u0627\u06cc\u0632\u0648\u0644\u0647 \u0628\u0647 \u0646\u0627\u0645 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0627\u0633\u062a.  \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u06cc\u06a9 \u0628\u0633\u062a\u0647 \u0627\u062c\u0631\u0627\u06cc\u06cc \u0645\u0633\u062a\u0642\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0627\u0645\u0644 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u060c \u06a9\u062f \u0645\u0646\u0628\u0639 \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0633\u062a.<\/p>\n<p>\u0628\u0627 Docker Compose\u060c \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u062f <code>docker-compose.yml<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u062a\u0645\u0627\u0645 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0627\u062d\u062f.  \u0641\u0627\u06cc\u0644 \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0645\u0627\u0646\u0646\u062f \u062d\u062c\u0645 \u0647\u0627\u060c \u0646\u0627\u0645 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u0647\u0627 \u0648 \u0646\u06af\u0627\u0634\u062a \u067e\u0648\u0631\u062a \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 Dockerfiles \u0631\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u062a\u0635\u0627\u0648\u06cc\u0631 Docker \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Node.js \u06cc\u06a9 \u0633\u0631\u0648\u0631 Express Backend \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0633\u067e\u0633 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React.js \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 front-end \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0633\u0631\u0648\u0631 backend \u0645\u062a\u0635\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645. <\/p>\n<p>\u0633\u067e\u0633 \u0627\u0632 Docker Compose \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0627\u06cc\u0646 \u062f\u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0648\u0628 \u0628\u0647 \u0622\u0646\u0647\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631 \u0631\u0648\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u06a9\u0646\u06cc\u0645!<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/#%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\" >\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_Backend_Express_Server_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Nodejs\" >\u0627\u06cc\u062c\u0627\u062f Backend Express Server \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Node.js<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/#%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%B3%D8%B1%D9%88%D8%B1_Backend_Express\" >\u0627\u062c\u0631\u0627\u06cc \u0633\u0631\u0648\u0631 Backend Express<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_frontend_Reactjs\" >\u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 frontend React.js<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/#%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_frontend_Reactjs\" >\u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 frontend React.js<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/#Dockerfile_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%B1%D9%88%D8%B1_Backend_Express_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >Dockerfile \u0631\u0627 \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u0631 Backend Express \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/#Dockerfile_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_frontend_Reactjs_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >Dockerfile \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 frontend React.js \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_docker-composeyml_%D9%81%D8%A7%DB%8C%D9%84\" >\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 docker-compose.yml \u0641\u0627\u06cc\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/#%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%AF%D9%88_%DA%A9%D8%A7%D9%86%D8%AA%DB%8C%D9%86%D8%B1_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Docker_Compose\" >\u0627\u062c\u0631\u0627\u06cc \u062f\u0648 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Docker Compose<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/how-to-deploy-a-multi-container-reactjs-and-nodejs-application-with-docker-compose-334h\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\"><\/span>\n<p>  \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0641\u0631\u0636 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0627 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0622\u0634\u0646\u0627 \u0647\u0633\u062a\u06cc\u062f:<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0628\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0628\u0631 \u0631\u0648\u06cc \u0631\u0627\u06cc\u0627\u0646\u0647 \u0634\u0645\u0627 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_Backend_Express_Server_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Nodejs\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f Backend Express Server \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Node.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0633\u0631\u0648\u0631 Express \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Node.js\u060c \u0645\u0631\u0627\u062d\u0644 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 1<\/strong>: \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u06a9\u0627\u0631\u06cc \u0628\u0627 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>docker-compose-app<\/code> \u0648 \u0628\u0627 VS Code \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f. <br \/>\u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u06a9\u0627\u0631\u06cc\u060c \u06cc\u06a9 \u067e\u0648\u0634\u0647\/\u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u0628\u0627 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>node<\/code> \u0648 <code>cd<\/code> \u0628\u0647 \u062f\u0631\u0648\u0646 <code>node<\/code> \u0641\u0647\u0631\u0633\u062a \u0631\u0627\u0647\u0646\u0645\u0627.  \u0627\u06cc\u0646 \u0641\u0647\u0631\u0633\u062a \u0634\u0627\u0645\u0644 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u060c \u06a9\u062f \u0645\u0646\u0628\u0639 \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. <\/p>\n<p><strong>\u06af\u0627\u0645 2<\/strong>: \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm init --y\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0633\u062a\u0648\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u0631\u0627 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f <code>package.json<\/code> \u0641\u0627\u06cc\u0644.  \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc \u0646\u0635\u0628 \u062a\u0645\u0627\u0645 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm i -g nodemon\nnpm i express\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0634\u0645\u0627\u060c \u0646\u0635\u0628 \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>express<\/code> \u0648 <code>nodemon<\/code>.  \u0645\u0627 \u0627\u0632 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>express<\/code> \u0628\u0633\u062a\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0633\u0631\u0648\u0631<\/p>\n<p>\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>nodemon<\/code> \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0634\u0627 \u0648 \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0628\u0627\u0637\u0646.  Nodemon \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0628\u0627\u0637\u0646 \u062a\u0634\u062e\u06cc\u0635 \u062f\u0627\u062f\u0647 \u0648 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0633\u0631\u0648\u0631 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u062c\u062f\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u060c \u0645\u0627 \u0631\u0627 \u0627\u0632 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u062c\u062f\u062f \u0633\u0631\u0648\u0631 \u0628\u0627\u0637\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 3<\/strong>: \u0628\u0639\u062f\u060c \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f <code>package.json<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 <code>npm<\/code> \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc <code>nodemon<\/code> \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\"dev\": \"nodemon -L app.js\"\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 4<\/strong>: \u062f\u0631 <code>node<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>server.js<\/code>.  \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0645\u0646\u0637\u0642 \u0627\u06cc\u062c\u0627\u062f \u0633\u0631\u0648\u0631 \u0628\u0627\u0637\u0646 \u0645\u0627 \u0631\u0627 \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u0634\u062a.<\/p>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 5<\/strong>: \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u06a9\u067e\u06cc \u0648 \u062f\u0631 \u0642\u0633\u0645\u062a \u067e\u06cc\u0633\u062a \u06a9\u0646\u06cc\u062f <code>server.js<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const express = require('express')\nconst cors = require('cors')\n\nconst app = express()\n\napp.use(cors())\n\napp.get(\"https:\/\/dev.to\/\", (req, res) =&gt; {\n  res.json([\n    {\n      \"id\":\"1\",\n      \"title\":\"Album Review: When we all Fall asleep where do we go?\"\n    },\n    {\n      \"id\":\"2\",\n      \"title\":\"Book Review: How can we escape this labyrinth of suffering?\"\n    },\n    {\n      \"id\":\"3\",\n      \"title\":\"Documentary Review: How can we escape the rat race?\"\n    }\n  ])\n})\n\napp.listen(4000, () =&gt; {\n  console.log('connected on port 4000')\n})\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627 \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f <code>get<\/code> \u0645\u0633\u06cc\u0631  \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 frontend \u0639\u0646\u0627\u0648\u06cc\u0646 \u0628\u0631\u0631\u0633\u06cc \u0631\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f. <\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%B3%D8%B1%D9%88%D8%B1_Backend_Express\"><\/span>\n<p>  \u0627\u062c\u0631\u0627\u06cc \u0633\u0631\u0648\u0631 Backend Express<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 Backend Express Server\u060c \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <code>npm<\/code> \u062f\u0633\u062a\u0648\u0631 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0634\u0645\u0627:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm run dev\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 <code>npm<\/code> \u062f\u0633\u062a\u0648\u0631 \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0633\u0631\u0648\u0631 \u0645\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f <code>http:\/\/localhost:4000\/<\/code>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<p><\/p>\n<p>\u062a\u0635\u0648\u06cc\u0631 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0627\u0637\u0646 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0627\u0633\u062a \u0648 \u0628\u0631\u0631\u0633\u06cc \u0647\u0627 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631 \u0631\u0648\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 React.js frontend \u062e\u0648\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_frontend_Reactjs\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 frontend React.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 React.js frontend\u060c \u0645\u0631\u0627\u062d\u0644 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 1<\/strong>: \u062f\u0631 <code>docker-compose-app<\/code> \u067e\u0648\u0634\u0647 \u06a9\u0627\u0631\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <code>npx<\/code> \u062f\u0633\u062a\u0648\u0631 \u0627\u06cc\u062c\u0627\u062f boilerplate \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 React.js<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npx create-react-app react\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 <code>npx<\/code> \u062f\u0633\u062a\u0648\u0631 \u0628\u0627\u0644\u0627 \u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f <code>react<\/code> \u062f\u0631 <code>docker-compose-app<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u06a9\u0627\u0631  \u0627\u06a9\u0646\u0648\u0646\u060c <code>cd<\/code> \u0628\u0647 \u062f\u0631\u0648\u0646 <code>react<\/code> \u0641\u0647\u0631\u0633\u062a \u0631\u0627\u0647\u0646\u0645\u0627.<\/p>\n<p><strong>\u06af\u0627\u0645 2<\/strong>: \u062f\u0631 \u062f\u0627\u062e\u0644 <code>react<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u060c \u0648 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f <code>src<\/code> \u0641\u0647\u0631\u0633\u062a \u0631\u0627\u0647\u0646\u0645\u0627.<\/p>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 3<\/strong>: \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0631 <code>src<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f <code>App.js<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/App.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nx\">App<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">reviews<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setReviews<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">([])<\/span>\n  <span class=\"nx\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">http:\/\/localhost:4000\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nx\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">res<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">())<\/span>\n      <span class=\"p\">.<\/span><span class=\"nx\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setReviews<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">))<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[])<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"App\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">header<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"App-header\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>all Reviews<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"si\">{<\/span><span class=\"nx\">reviews<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">reviews<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">blog<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">blog<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">blog<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">))<\/span><span class=\"si\">}<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">header<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647\u060c \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 frontend react \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>fetch<\/code> \u0639\u0646\u0627\u0648\u06cc\u0646 \u0628\u0631\u0631\u0633\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0627\u0637\u0646 <code>get<\/code> \u0645\u0633\u06cc\u0631  \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627\u0637\u0646 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0627\u0633\u062a <code>http:\/\/localhost:4000\/<\/code>.  \u06af\u0627\u0645 \u0628\u0639\u062f\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 frontend React.js \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_frontend_Reactjs\"><\/span>\n<p>  \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 frontend React.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 frontend React.js\u060c \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm start\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 <code>npm<\/code> \u062f\u0633\u062a\u0648\u0631 \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 frontend React.js \u0631\u0627 \u0631\u0648\u06cc \u0622\u0646 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f <code>http:\/\/localhost:3000\/<\/code>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1689763120_382_\u0646\u062d\u0648\u0647-\u0627\u0633\u062a\u0642\u0631\u0627\u0631-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-Reactjs-\u0648-Nodejs-\u0686\u0646\u062f-\u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u06cc-\u0628\u0627.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"426\" title=\"\"><\/p>\n<p>\u062a\u0635\u0648\u06cc\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 frontend React.js \u0631\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u0639\u0646\u0627\u0648\u06cc\u0646 \u0628\u0631\u0631\u0633\u06cc \u0627\u0632 \u0628\u0627\u0637\u0646 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.  \u0628\u06cc\u0627\u06cc\u06cc\u062f Dockerfiles \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u062f\u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.  Docker Compose \u0627\u0632 Dockerfiles \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0648 \u0627\u062c\u0631\u0627\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Dockerfile_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%B1%D9%88%D8%B1_Backend_Express_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  Dockerfile \u0631\u0627 \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u0631 Backend Express \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Dockerfile \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0633\u0627\u062e\u062a \u062a\u0635\u0648\u06cc\u0631 Docker \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0631\u0648\u0631 \u0628\u0627\u0637\u0646 \u0627\u0633\u062a.  \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0631 <code>node<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\/\u067e\u0648\u0634\u0647\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>Dockerfile<\/code>.  \u062f\u0631 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 <code>Dockerfile<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 Docker \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code><span class=\"c\"># It uses node:18-alpine as the base image for the Node.js application<\/span>\n<span class=\"k\">FROM<\/span><span class=\"s\"> node:18-alpine<\/span>\n\n<span class=\"c\"># It installs the nodemon package globally for monitoring and watching the backend Express server<\/span>\n<span class=\"k\">RUN <\/span>npm <span class=\"nb\">install<\/span> <span class=\"nt\">-g<\/span> nodemon\n\n<span class=\"c\"># Creating the working directory named `app`<\/span>\n<span class=\"k\">WORKDIR<\/span><span class=\"s\"> \/app<\/span>\n\n<span class=\"c\"># Copying all the tools and dependencies in the package.json file to the working directory `app`<\/span>\n<span class=\"k\">COPY<\/span><span class=\"s\"> package.json .<\/span>\n\n<span class=\"c\">#Installing all the tools and dependencies in the container<\/span>\n<span class=\"k\">RUN <\/span>npm <span class=\"nb\">install<\/span>\n\n<span class=\"c\">#Copying all the application source code and files to the working directory `app`<\/span>\n<span class=\"k\">COPY<\/span><span class=\"s\"> . .<\/span>\n\n<span class=\"c\">#Exposing the container to run on this port 4000<\/span>\n<span class=\"k\">EXPOSE<\/span><span class=\"s\"> 4000<\/span>\n\n<span class=\"c\">#Command to start the Docker container for the backed server application<\/span>\n<span class=\"k\">CMD<\/span><span class=\"s\"> [\"npm\", \"run\", \"dev\"]<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0633\u062a <code>Dockerfile<\/code> \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 Frontend React.js.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Dockerfile_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_frontend_Reactjs_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  Dockerfile \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 frontend React.js \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 <code>react<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\/\u067e\u0648\u0634\u0647\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>Dockerfile<\/code>.  \u062f\u0631 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 <code>Dockerfile<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 Docker \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code><span class=\"c\"># It uses node:18-alpine as the base image for the frontend React.js application<\/span>\n<span class=\"k\">FROM<\/span><span class=\"s\"> node:18-alpine<\/span>\n\n<span class=\"c\"># Creating the working directory named `app`<\/span>\n<span class=\"k\">WORKDIR<\/span><span class=\"s\"> \/app<\/span>\n\n<span class=\"c\"># Copying all the tools and dependencies in the package.json file to the working directory `app`<\/span>\n<span class=\"k\">COPY<\/span><span class=\"s\"> package.json .<\/span>\n\n<span class=\"c\">#Installing all the tools and dependencies in the container<\/span>\n<span class=\"k\">RUN <\/span>npm <span class=\"nb\">install<\/span>\n\n<span class=\"c\">#Copying all the application source code and files to the working directory `app`<\/span>\n<span class=\"k\">COPY<\/span><span class=\"s\"> . .<\/span>\n\n<span class=\"c\">#Exposing the container to run on this port 3000<\/span>\n<span class=\"k\">EXPOSE<\/span><span class=\"s\"> 3000<\/span>\n\n<span class=\"c\">#Command to start the Docker container for the frontend React.js application<\/span>\n<span class=\"k\">CMD<\/span><span class=\"s\"> [\"npm\", \"start\"]<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0647\u0631 \u062f\u0648 Dockerfiles \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645\u060c \u06af\u0627\u0645 \u0628\u0639\u062f\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0633\u062a <code>docker-compose.yml<\/code> \u0641\u0627\u06cc\u0644\u06cc \u06a9\u0647 \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_docker-composeyml_%D9%81%D8%A7%DB%8C%D9%84\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>docker-compose.yml<\/code> \u0641\u0627\u06cc\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u0627 \u062f\u0648 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Docker Compose \u0627\u062c\u0631\u0627 \u0648 \u0645\u0633\u062a\u0642\u0631 \u06a9\u0646\u06cc\u0645.  \u0638\u0631\u0648\u0641 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a a \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>service<\/code>. <\/p>\n<p>\u0627\u06cc\u0646 <code>docker-compose.yml<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0648 \u0633\u0631\u0648\u06cc\u0633 \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u0634\u062a.  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0627\u06cc\u0644 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647\u060c \u062f\u0648 \u0638\u0631\u0641 \u0631\u0627 \u0686\u0631\u062e\u0634 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0627\u062d\u062f \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u0648 \u0633\u0631\u0648\u06cc\u0633 Docker Compose\u060c \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 1<\/strong>: \u062f\u0631 <code>docker-compose-app<\/code> \u067e\u0648\u0634\u0647 \u06a9\u0627\u0631\u06cc\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>docker-compose.yml<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<p><strong>\u06af\u0627\u0645 2<\/strong>: \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0627\u0648\u0644\u06cc\u0646 \u0633\u0631\u0648\u06cc\u0633 \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>node<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code><span class=\"c\"># Version of Docker-compose<\/span>\nversion: '3.9'\nservices:\n  # Add the node-js service\n  node:\n  # Location to the node.js dockerfile\n    build: \n      context: .\/node\n        <span class=\"c\"># Name of the dockerfile<\/span>\n      dockerfile: Dockerfile\n    container_name: node-container\n    ports:\n       # Host port:Container port\n      - '4000:4000'\n    volumes:\n      # Bind-mounts configuration\n      - .\/node:\/app\n      <span class=\"c\"># Ignoring any changes made in the \"node_modules\" folder<\/span>\n      - .\/app\/node_modules\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06a9\u062f \u0628\u0627\u0644\u0627 \u0633\u0631\u0648\u06cc\u0633\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f <code>node<\/code>.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06a9\u0627\u0646 Dockerfile Node.js \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f. <\/p>\n<p>\u0646\u0627\u0645 \u0638\u0631\u0641 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f <code>node-container<\/code> \u0648 \u0646\u0642\u0634\u0647 \u0628\u0631\u062f\u0627\u0631\u06cc \u067e\u0648\u0631\u062a  \u0627\u06cc\u0646 <code>node-container<\/code> \u0631\u0648\u06cc \u067e\u0648\u0631\u062a \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>4000<\/code>.<\/p>\n<p>\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0633\u0631\u0648\u06cc\u0633 \u062d\u062c\u0645 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 \u062d\u062c\u0645\u060c \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u062d\u0644\u06cc \u0631\u0627 \u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u06a9\u0627\u0631\u06cc \u062f\u0631 \u0638\u0631\u0641 \u0646\u06af\u0627\u0634\u062a \u0645\u06cc \u06a9\u0646\u062f.  \u0647\u0631 \u062a\u063a\u06cc\u06cc\u0631\u06cc \u06a9\u0647 \u062f\u0631 \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u062d\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u0634\u0648\u062f \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062f\u0631 \u0638\u0631\u0641 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 \u0632\u0645\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u062d\u0644\u06cc\u060c \u062f\u0631 \u0632\u0645\u0627\u0646 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u06a9\u0644 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0635\u0631\u0641\u0647 \u062c\u0648\u06cc\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 3<\/strong>: \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0633\u0631\u0648\u06cc\u0633 \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <code>react<\/code> \u0628\u0631\u0627\u06cc \u0638\u0631\u0641 \u0628\u0631\u0646\u0627\u0645\u0647 React.js.<\/p>\n<p>\u0628\u0639\u062f \u0627\u0632 <code>node<\/code> \u0633\u0631\u0648\u06cc\u0633\u060c \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code> react:\n  # Location to the react.js dockerfile\n    build: \n      context: .\/react\n        <span class=\"c\"># Name of the dockerfile<\/span>\n      dockerfile: Dockerfile\n    container_name: react-container\n    ports:\n     # Host port:Container port\n      - '3000:3000'\n    stdin_open: true\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06a9\u062f \u0628\u0627\u0644\u0627 \u0633\u0631\u0648\u06cc\u0633\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f <code>react<\/code>.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06a9\u0627\u0646 React.js Dockerfile \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f. <\/p>\n<p>\u0646\u0627\u0645 \u0638\u0631\u0641 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f <code>react-container<\/code> \u0648 \u0646\u0642\u0634\u0647 \u0628\u0631\u062f\u0627\u0631\u06cc \u067e\u0648\u0631\u062a  \u0627\u06cc\u0646 <code>react-container<\/code> \u0631\u0648\u06cc \u067e\u0648\u0631\u062a \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>3000<\/code>. <\/p>\n<p>\u0627\u06af\u0631 \u0645\u0631\u0627\u062d\u0644 \u0628\u0627\u0644\u0627 \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f\u060c \u0645\u0631\u062d\u0644\u0647 \u0646\u0647\u0627\u06cc\u06cc \u0627\u0633\u062a <code>docker-compose.yml<\/code> \u0645\u0627\u0646\u0646\u062f \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code><span class=\"c\"># Version of Docker-compose<\/span>\nversion: '3.9'\nservices:\n  # Add the node-js service\n  node:\n  # Location to the node.js dockerfile\n    build: \n      context: .\/node\n        <span class=\"c\"># Name of the dockerfile<\/span>\n      dockerfile: Dockerfile\n    container_name: node-container\n    ports:\n       # Host port:Container port\n      - '4000:4000'\n    volumes:\n      # Bind-mounts configuration\n      - .\/node:\/app\n      <span class=\"c\"># Ignoring any changes made in \"node_modules\" folder<\/span>\n      - .\/app\/node_modules\n  react:\n  # Location to the react.js dockerfile\n    build: \n      context: .\/react\n        <span class=\"c\"># Name of the dockerfile<\/span>\n      dockerfile: Dockerfile\n    container_name: react-container\n    ports:\n     # Host port:Container port\n      - '3000:3000'\n    stdin_open: true\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0647\u0645\u0647 \u0633\u0631\u0648\u06cc\u0633 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc \u0633\u0627\u062e\u062a \u0648 \u0627\u062c\u0631\u0627\u06cc \u062f\u0648 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%AF%D9%88_%DA%A9%D8%A7%D9%86%D8%AA%DB%8C%D9%86%D8%B1_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Docker_Compose\"><\/span>\n<p>  \u0627\u062c\u0631\u0627\u06cc \u062f\u0648 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Docker Compose<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0648 \u0627\u062c\u0631\u0627\u06cc \u062f\u0648 Container \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Docker Compose\u060c \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code>docker-compose up --build\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u062f\u0648 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062e\u0631\u0648\u062c\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0634\u0645\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1689763120_350_\u0646\u062d\u0648\u0647-\u0627\u0633\u062a\u0642\u0631\u0627\u0631-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-Reactjs-\u0648-Nodejs-\u0686\u0646\u062f-\u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u06cc-\u0628\u0627.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"414\" title=\"\"><\/p>\n<p>\u062e\u0631\u0648\u062c\u06cc \u0647\u0631 \u062f\u0648 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f <code>node-container<\/code> \u0648 <code>react-container<\/code> \u062f\u0631 \u062d\u0627\u0644 \u062f\u0648\u06cc\u062f\u0646.  \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 <code>node-container<\/code> \u0628\u0631 <code>http:\/\/localhost:4000\/<\/code> \u0648 <code>react-container<\/code> \u0628\u0631 <code>http:\/\/localhost:3000\/<\/code>.  \u062a\u0635\u0627\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u0647\u0627\u06cc \u0645\u0633\u062a\u0642\u0631 \u0634\u062f\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0648\u0628 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ul>\n<li>\n<p><code>node-container<\/code><br \/><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1689763120_12_\u0646\u062d\u0648\u0647-\u0627\u0633\u062a\u0642\u0631\u0627\u0631-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-Reactjs-\u0648-Nodejs-\u0686\u0646\u062f-\u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u06cc-\u0628\u0627.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"299\" title=\"\"><\/p>\n<\/li>\n<li>\n<p><code>react-container<\/code><br \/><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1689763120_618_\u0646\u062d\u0648\u0647-\u0627\u0633\u062a\u0642\u0631\u0627\u0631-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-Reactjs-\u0648-Nodejs-\u0686\u0646\u062f-\u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u06cc-\u0628\u0627.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"426\" title=\"\"><\/p>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 React.js \u0648 Node.js Application \u0686\u0646\u062f \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Docker Compose \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u0647\u200c\u0627\u06cc\u062f.  \u0645\u0627 \u06cc\u06a9 \u0633\u0631\u0648\u0631 Express Backend \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Node.js \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645.  \u0633\u067e\u0633 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React.js \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 front-end \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645.  \u067e\u0633 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644\u060c Dockerfiles \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u062f\u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645.  \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645 <code>docker-compose.yml<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<p>\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645 <code>docker-compose.yml<\/code> \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0648 \u0627\u062c\u0631\u0627\u06cc \u062f\u0648 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0628\u0631\u0646\u0627\u0645\u0647.  \u0645\u0627 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u0647\u0627\u06cc Docker \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Docker Compose \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0645\u0633\u062a\u0642\u0631 \u06a9\u0631\u062f\u06cc\u0645.  \u0645\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u0631\u0648\u0631\u06af\u0631 \u0648\u0628 \u0628\u0647 \u0622\u0646\u0647\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u06cc\u0645.  \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0648\u0631\u0633 \u06a9\u062f \u06a9\u0627\u0645\u0644 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0631\u0627 \u0627\u0632 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f.  \u0627\u0639\u0632\u0627\u0645 \u0645\u0628\u0627\u0631\u06a9!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Docker Compose \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0642\u062f\u0631\u062a\u0645\u0646\u062f Docker \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648 \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc Dockerized \u0686\u0646\u062f \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u06cc \u0627\u0633\u062a. \u062f\u0627\u06a9\u0631 \u06cc\u06a9 \u067e\u0644\u062a\u0641\u0631\u0645 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648 \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u0627\u06cc\u0632\u0648\u0644\u0647 \u0628\u0647 \u0646\u0627\u0645 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0627\u0633\u062a. \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u06cc\u06a9 \u0628\u0633\u062a\u0647 \u0627\u062c\u0631\u0627\u06cc\u06cc \u0645\u0633\u062a\u0642\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0627\u0645\u0644 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u060c \u06a9\u062f \u0645\u0646\u0628\u0639 \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":31099,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-31098","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/31098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=31098"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/31098\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/31099"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=31098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=31098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=31098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}