{"id":344644,"date":"2023-01-29T15:01:50","date_gmt":"2023-01-29T15:01:50","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=344644"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=344644","title":{"rendered":"React+Django \u043a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c Hello World<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e web \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 react \u0441 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u043d\u0430 Django, \u0441 \u0411\u0414 \u043d\u0430 postgres, \u0437\u0430\u0439\u0446\u0435\u043c, nginx \u0438 \u0432\u0441\u0451 \u0437\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432 docker.<\/h4>\n

\u0414\u043b\u044f \u043a\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f? \u041f\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u043c\u0443 \u0441\u0447\u0435\u0442\u0443 \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0435\u0431\u044f, \u0447\u0442\u043e\u0431\u044b \u0445\u043e\u0442\u044c \u043a\u0430\u043a-\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u043d\u0438\u044f \u0432 \u0441\u0432\u043e\u0435\u0439 \u0447\u0435\u0440\u0435\u043f\u0443\u0448\u043a\u0435. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438, \u043a\u0430\u043a \u0438 \u044f \u0441\u0430\u043c. \u0412\u0441\u0451 \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0438\u0436\u0435, \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u0435\u0442 \u043d\u0430 \u0438\u0441\u0442\u0438\u043d\u0443 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u0438. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0442\u0430\u043a, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u044e\u0442. \u041d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0443 \u043c\u0435\u043d\u044f \u043d\u0435 \u0441\u0442\u043e\u044f\u043b\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c enterprise \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0449\u0443\u043f\u0430\u0442\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0442\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u0435\u043d\u044f \u0443\u0441\u0442\u0440\u043e\u0438\u043b.<\/p>\n

\u0414\u043e\u043b\u0436\u0435\u043d \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0434\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 100% \u043b\u0438\u0447\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430. \u042d\u0442\u043e \u043f\u0440\u043e\u0435\u043a\u0442 \u0424\u0440\u0430\u043d\u043a\u0435\u043d\u0448\u0442\u0435\u0439\u043d \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430. \u041e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439 \u044f \u043d\u0435 \u0441\u043c\u043e\u0433 \u043d\u0430\u0439\u0442\u0438, \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0430\u0447\u0430\u043b \u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u0443, \u0447\u0442\u043e\u0431\u044b \u0442\u0435, \u043a\u043e\u043c\u0443 \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u043f\u043e\u0449\u0443\u043f\u0430\u0442\u044c.<\/p>\n

\"\u041d\u0430\u0447\u043d\u0451\u043c
\u041d\u0430\u0447\u043d\u0451\u043c \u043f\u043e\u0436\u0430\u043b\u0443\u0439<\/figcaption><\/figure>\n

\u041d\u0430\u0447\u043d\u0443 \u044f \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n

\u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 WEB \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 React. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432, \u0441 \u043f\u0430\u0447\u043a\u043e\u0439 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043f\u043e\u043b\u0435\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0438\u043c\u044f, \u043f\u043e\u0447\u0442\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u0438 \u043f\u0440\u043e\u0447\u0435\u0435. \u0422\u0430\u043a \u0436\u0435 \u043a \u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a \u0436\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442. \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430, \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0438\u043b\u0438 \u0436\u0435 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n

\u0425\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0448\u0438 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u043f\u043e\u043d\u044f\u043b\u0438 \u0432 \u0411\u0414 postgress, \u0430 \u0432\u043e\u0442 \u0431\u0435\u0440\u0435\u0436\u043d\u043e \u0438\u0445 \u0442\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435\u043c\u0438 \u043b\u044e\u0431\u0438\u043c\u0430\u044f Django \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 Django rest framework.<\/p>\n

<\/figcaption><\/figure>\n

\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0432\u0435\u0431 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. React \u0442\u043e\u043f\u0430\u0435\u0442 \u043d\u0430 Django \u0447\u0435\u0440\u0435\u0437 nginx, \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0441\u0442\u0440\u043e\u0438\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438. \u041c\u044b \u0432\u043e\u043b\u044c\u043d\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e. \u0417\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u0437\u0430\u0447\u0435\u043c \u0432 \u044d\u0442\u043e\u0439 \u0441\u0445\u0435\u043c\u0435 Rabbit \u0438 \u0434\u0432\u0430 worker\u2019\u0430? \u0412\u0441\u0451 \u0434\u0435\u043b\u043e \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438\/\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0444\u043e\u0440\u043c\u0443, \u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u044f\u0442\u0441\u044f, \u043d\u0435 \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041d\u043e \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u0438 \u043c\u044b \u0440\u0435\u0448\u0438\u043c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u0438\u0442\u044c, \u0442\u043e \u0432\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u0431\u0443\u0440\u043d\u043e\u0439 \u0434\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u043c\u044f, \u0438 \u043f\u043e\u043b\u0435 photo \u043d\u0430\u0448\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u044c \u043a \u043d\u0435\u043c\u0443. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043d\u0430 rabbit \u0438 \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0442\u0443\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c. Worker \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0435\u0433\u043e, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0448\u043b\u0451\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c. \u0412\u0442\u043e\u0440\u043e\u0439 worker \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0435\u0433\u043e \u0438 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043f\u043e \u0443\u0436\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u043c\u0443 \u0432\u044b\u0448\u0435 \u043f\u0443\u0442\u0438. \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0443\u0439\u0442\u0438 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f, \u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u043b\u0438\u0431\u043e \u0441\u0440\u0430\u0437\u0443, \u043b\u0438\u0431\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. <\/p>\n

\u0412\u043e\u0442 \u0432 \u0446\u0435\u043b\u043e\u043c \u0438 \u0432\u0441\u0451.\u00a0 \u0427\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. <\/p>\n

\u0422\u0435\u043f\u0435\u0440\u044c \u043a \u0434\u0435\u043b\u0443, \u044f \u0432\u0441\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0434\u0435\u043b\u044b\u0432\u0430\u043b \u043d\u0430 windows, \u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u043b \u0443\u0436\u0435 \u043d\u0430 centos. <\/p>\n

\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n

\u042f \u043d\u0430\u0437\u0432\u0430\u043b \u0435\u0433\u043e ProjectStudent.<\/p>\n

1) Django.<\/p>\n

\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0434\u043b\u044f Django \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u043d\u0435\u0433\u043e.<\/p>\n

\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u044d\u0442\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 PowerShell (\u0438\u043b\u0438 cmd, \u043a\u043e\u043c\u0443 \u043a\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u0435\u0435. \u0412 bash \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f)<\/p>\n

\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0438 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e<\/p>\n

python3 -m venv --copies .\/env .\\env\\Scripts\\activate<\/code><\/pre>\n
\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Django, \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n
pip install Django django-admin startproject django_project python manage.py startapp students<\/code><\/pre>\n
\u0418\u0437 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043d\u0430\u043c \u0435\u0449\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0432 Django \u0441\u0440\u0430\u0437\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c djangorestframework \u0438 django-cors-headers<\/p>\n
pip install django djangorestframework django-cors-headers<\/code><\/pre>\n
\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c.<\/p>\n
\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b django\\django_project\\django_project\\settings.py<\/p>\n
\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, middleware<\/p>\n
import os from pathlib import Path from os import environ  INSTALLED_APPS = [     ...     'rest_framework',     'corsheaders',     'students' ]  MIDDLEWARE = [     ...     'corsheaders.middleware.CorsMiddleware',     'django.middleware.common.CommonMiddleware', ]<\/code><\/pre>\n
CORS_ORIGIN_ALLOW_ALL\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0434\u043e\u043b\u0436\u0435\u043d \u043b\u0438 Django \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u0440\u044b\u0442 \u0438\u043b\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043a\u0440\u044b\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u0430\u043c \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0433\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c.<\/p>\n
CORS_ORIGIN_ALLOW_ALL = True<\/code><\/pre>\n
\u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u043a\u0438<\/p>\n
STATIC_URL = '\/static\/' STATIC_ROOT = os.path.join(BASE_DIR, 'static')  MEDIA_URL = '\/media\/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media')<\/code><\/pre>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n
\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c django\\django_project\\students\\models.py <\/p>\n
\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043c\u043e\u0434\u0435\u043b\u044c<\/p>\n
from django.db import models  class Student(models.Model):     name = models.CharField(\"Name\", max_length=240)     email = models.EmailField()     document = models.CharField(\"Document\", max_length=20)     phone = models.CharField(max_length=20)     registrationDate = models.DateField(\"Registration Date\", auto_now_add=True)     photo = models.CharField(\"URL\", max_length=512)      def __str__(self):         return self.name<\/code><\/pre>\n
\u0413\u043e\u0442\u043e\u0432\u043e. \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432\u0441\u0451 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b\u044b \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0438 \u043c\u0438\u0433\u0440\u0438\u0440\u0443\u0435\u043c.<\/p>\n
Python manage.py makemigrations python manage.py migrate<\/code><\/pre>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u0444\u0438\u043a\u0441\u0442\u0443\u0440\u0430\u043c\u0438, \u0441\u0440\u0430\u0437\u0443 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u0443\u0434\u0430.<\/p>\n
python manage.py makemigrations --empty --name students students<\/code><\/pre>\n
\u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0444\u0430\u0439\u043b django\\django_project\\students\\migrations\\0002_students.py<\/p>\n
\u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043c \u0435\u0433\u043e \u043a \u0442\u0430\u043a\u043e\u043c\u0443 \u0432\u0438\u0434\u0443:<\/p>\n
from django.db import migrations  def create_data(apps, schema_editor):     Student = apps.get_model('students', 'Student')     Student(name=\"Joe Silver\", email=\"joe@email.com\", document=\"22342342\", phone=\"00000000\", photo='media\/photo\/nophoto.png').save()     Student(name=\"John Smith\", email=\"john@email.com\", document=\"11111111\", phone=\"11111111\", photo='media\/photo\/nophoto.png').save()     Student(name=\"Alex Smth\", email=\"alex@email.com\", document=\"22222222\", phone=\"22222222\", photo='media\/photo\/nophoto.png').save()     Student(name=\"Kira Night\", email=\"kira@email.com\", document=\"33333333\", phone=\"33333333\", photo='media\/photo\/nophoto.png').save()     Student(name=\"Amanda Lex\", email=\"amanda@email.com\", document=\"44444444\", phone=\"44444444\", photo='media\/photo\/nophoto.png').save()     Student(name=\"Oni Musha\", email=\"oni@email.com\", document=\"44444444\", phone=\"44444444\", photo='media\/photo\/nophoto.png').save()  class Migration(migrations.Migration):      dependencies = [         ('students', '0001_initial'),     ]      operations = [         migrations.RunPython(create_data),     ] <\/code><\/pre>\n
\u0418 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044e<\/p>\n
python manage.py migrate<\/code><\/pre>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432.<\/p>\n
\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043d\u0430\u0448\u0435\u043c\u0443 api<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u043d\u0430\u0448\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u0444\u0430\u0439\u043b django\\django_project\\students\\serializers.py<\/p>\n
from rest_framework import serializers from .models import Student  class StudentSerializer(serializers.ModelSerializer):      class Meta:         model = Student          fields = ('pk', 'name', 'email', 'document', 'phone', 'registrationDate','photo') <\/code><\/pre>\n
\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0432 uls.py, \u0430\u0434\u0440\u0435\u0441\u0430 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c django\\django_project\\django_project\\urls.py <\/p>\n
\u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e re_path, \u043d\u0430\u0448\u0435 \u0441\u0442\u0443\u0434\u0435\u043d\u0447\u0435\u0441\u043a\u043e\u0435 view \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u043a\u0438.<\/p>\n
from django.contrib import admin from django.urls import path, re_path from students import views from django.conf import settings from django.conf.urls.static import static  urlpatterns = [     path('admin\/', admin.site.urls),     re_path(r'^api\/students\/$', views.students_list),     re_path(r'^api\/students\/(\\d+)$', views.students_detail), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a view<\/p>\n
\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c django\\django_project\\students\\views.py<\/p>\n
from rest_framework.response import Response from rest_framework.decorators import api_view from rest_framework import status from .serializers import *  # Create your views here.  @api_view(['GET', 'POST']) def students_list(request):     if request.method == 'GET':         data = Student.objects.all()         serializer = StudentSerializer(data, context={'request': request}, many=True)         return Response(serializer.data)     elif request.method == 'POST':         print('post')         serializer = StudentSerializer(data=request.data)         if serializer.is_valid():             serializer.save()             return Response(status=status.HTTP_201_CREATED)         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)  @api_view(['PUT', 'DELETE']) def students_detail(request, pk):     try:         student = Student.objects.get(pk=pk)     except Student.DoesNotExist:         return Response(status=status.HTTP_404_NOT_FOUND)     if request.method == 'PUT':         serializer = StudentSerializer(student, data=request.data, context={'request': request})         if serializer.is_valid():             serializer.save()             return Response(status=status.HTTP_204_NO_CONTENT)         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)     elif request.method == 'DELETE':         student.delete()         return Response(status=status.HTTP_204_NO_CONTENT)  <\/code><\/pre>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n
\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440<\/p>\n
python manage.py runserver<\/code><\/pre>\n
\u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 http:\/\/127.0.0.1:8000\/api\/students\/<\/a><\/p>\n
<\/figcaption><\/figure>\n
\u0412\u0438\u0434\u0438\u043c \u043d\u0430\u0448\u0438\u0445 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432. \u0417\u043d\u0430\u0447\u0438\u0442 \u0432\u0441\u0451 \u043e\u043a!<\/p>\n
\u0422\u0430\u043a \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u0441 django \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a react.<\/p>\n
\u0422\u0430\u043c \u043f\u0438\u0441\u0430\u043d\u0438\u043d\u044b \u043f\u043e\u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442, \u043d\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043a\u043e\u0434. \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/p>\n
\u041a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435?<\/p>\n
App \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0434\u0432\u0443\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, Header \u0438 Home. \u0412 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c Home \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 ListStudents \u0438 ModalStudent (\u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430)<\/p>\n
<\/figcaption><\/figure>\n
\u0412\u044b\u0445\u043e\u0434\u0438\u043c \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443<\/p>\n
npx create-react-app reactapp<\/code><\/pre>\n
\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0430\u0440\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 <\/p>\n
npm i axios reactstrap bootstrap<\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u043e\u0441\u044c, \u043d\u0430\u0447\u043d\u0435\u043c \u043d\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 src \u043a\u0430\u0442\u0430\u043b\u043e\u0433 components, \u0438 \u0432 \u043f\u043e\u0434\u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438 app, appHeader, appHome, appListStudents, appModalStudent, appPhotoModal, appRemoveStudent,appStudentForm.<\/p>\n
\u041a\u0430\u043a \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0438 \u0444\u0430\u0439\u043b\u0435. <\/p>\n
\u0412 app \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0438\u043c, \u043f\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u043e js \u0444\u0430\u0439\u043b\u0443 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439.<\/p>\n
\"\u0412
\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a.<\/figcaption><\/figure>\n
\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043a \u043a\u043e\u0434\u0443 react \u044f \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e \u043d\u0435 \u0434\u0435\u043b\u0430\u043b, \u0442\u0430\u043c \u0432\u0441\u0451 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0422\u0430\u043c \u0433\u0434\u0435 \u044f \u044d\u0442\u043e \u043f\u043e\u0434\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445, \u043d\u043e \u0442.\u043a. \u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0437\u043d\u0430\u044e react \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0443 \u043c\u0435\u043d\u044f \u043d\u0435 \u043f\u0440\u043e\u043a\u0430\u0442\u0438\u043b\u043e, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0432\u0441\u0451 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441 \u043d\u0443\u043b\u044f, \u043f\u043e\u0434\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044f \u0432 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0443.<\/p>\n
\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u0443 \u0438 \u043f\u043e\u0439\u0434\u0451\u043c \u0432\u043d\u0438\u0437.<\/p>\n
App.js \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/p>\n
import '.\/App.css'; import {Fragment} from \"react\"; import Header from \"..\/appHeader\/Header\"; import Home from \"..\/appHome\/Home\";  function App() {     return (         <Fragment>             <Header\/>             <Home\/>         <\/Fragment>     ); }  export default App;<\/code><\/pre>\n
Header.js \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a<\/p>\n
const Header = () => {     return (         <div className=\"text-center\">             <img                 src=\"https:\/\/cdn.worldvectorlogo.com\/logos\/react-2.svg\"                 width=\"100\"                 className=\"img-thumbnail\"                 style={{marginTop: \"20px\"}}                 alt=\"logo\"             \/>             <hr\/>             <h1>App for project on React + Django<\/h1>         <\/div>) }  export default Header;<\/code><\/pre>\n
Home.js \u0414\u0430\u043d\u043d\u044b\u0435<\/p>\n
import {Container, Row, Col} from \"reactstrap\"; import ListStudents from \"..\/appListStudents\/ListStudents\"; import axios from \"axios\"; import {useEffect, useState} from \"react\"; import ModalStudent from \"..\/appModalStudent\/ModalStudent\"; import {API_URL} from \"..\/..\/index\";  const Home = () => {     const [students, setStudents] = useState([])      useEffect(()=>{         getStudents()     },[])      const getStudents = (data)=>{         axios.get(API_URL).then(data => setStudents(data.data))     }      const resetState = () => {         getStudents();     };      return (         <Container style={{marginTop: \"20px\"}}>             <Row>                 <Col>                     <ListStudents students={students} resetState={resetState} newStudent={false}\/>                 <\/Col>             <\/Row>             <Row>                 <Col>                     <ModalStudent                     create={true}                     resetState={resetState}                     newStudent={true}\/>                 <\/Col>             <\/Row>         <\/Container>     ) }  export default Home;<\/code><\/pre>\n
ListStudents.js \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u043e \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430\u043c\u0438<\/p>\n
import {Table} from \"reactstrap\"; import ModalStudent from \"..\/appModalStudent\/ModalStudent\"; import AppRemoveStudent from \"..\/appRemoveStudent\/appRemoveStudent\"; import ModalPhoto from \"..\/appPhotoModal\/ModalPhoto\";  const ListStudents = (props) => {     const {students} = props     return (         <Table dark>             <thead>             <tr>                 <th>Name<\/th>                 <th>Email<\/th>                 <th>Document<\/th>                 <th>Phone<\/th>                 <th>Registration<\/th>                 <th>Photo<\/th>                 <th><\/th>             <\/tr>             <\/thead>             <tbody>             {!students || students.length <= 0 ? (                 <tr>                     <td colSpan=\"6\" align=\"center\">                         <b>\u041f\u043e\u043a\u0430 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435\u0442<\/b>                     <\/td>                 <\/tr>             ) : students.map(student => (                     <tr key={student.pk}>                         <td>{student.name}<\/td>                         <td>{student.email}<\/td>                         <td>{student.document}<\/td>                         <td>{student.phone}<\/td>                         <td>{student.registrationDate}<\/td>                         <td><ModalPhoto                             student={student}                         \/><\/td>                         <td>                             <ModalStudent                                 create={false}                                 student={student}                                 resetState={props.resetState}                                 newStudent={props.newStudent}                             \/>                             &nbsp;&nbsp;                             <AppRemoveStudent                                 pk={student.pk}                                 resetState={props.resetState}                             \/>                         <\/td>                     <\/tr>                 )             )}             <\/tbody>         <\/Table>     ) }  export default ListStudents<\/code><\/pre>\n
ModalStudent.js \u043c\u043e\u0434\u0430\u043b\u043a\u0430, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0430\u044f \u0437\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430<\/p>\n
import {Fragment, useState} from \"react\"; import {Button, Modal, ModalHeader, ModalBody} from \"reactstrap\"; import StudentForm from \"..\/appStudentForm\/StudentForm\";  const ModalStudent = (props) => {     const [visible, setVisible] = useState(false)     var button = <Button onClick={() => toggle()}>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/Button>;      const toggle = () => {         setVisible(!visible)     }      if (props.create) {         button = (             <Button                 color=\"primary\"                 className=\"float-right\"                 onClick={() => toggle()}                 style={{minWidth: \"200px\"}}>                 \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430             <\/Button>         )     }     return (         <Fragment>             {button}             <Modal isOpen={visible} toggle={toggle}>                 <ModalHeader                     style={{justifyContent: \"center\"}}>{props.create ? \"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430\" : \"\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430\"}<\/ModalHeader>                 <ModalBody>                     <StudentForm                         student={props.student ? props.student : []}                         resetState={props.resetState}                         toggle={toggle}                         newStudent={props.newStudent}                     \/>                 <\/ModalBody>             <\/Modal>         <\/Fragment>     ) } export default ModalStudent; <\/code><\/pre>\n
ModalPhoto.js \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c<\/p>\n
import {Fragment, useState} from \"react\"; import {API_STATIC_MEDIA} from \"..\/..\/index\"; import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from \"reactstrap\";  const ModalPhoto = (props) => {     const [visible, setVisible] = useState(false)     const toggle = () => {         setVisible(!visible)     }     return (         <>             <img onClick={toggle} src={API_STATIC_MEDIA + props.student.photo} alt='loading' style={{height: 50}}\/>             <Modal isOpen={visible} toggle={toggle}>                 <ModalHeader  style={{color:\"white\",justifyContent: \"center\", backgroundColor:\"#212529\"}}>\u0424\u043e\u0442\u043e<\/ModalHeader>                 <ModalBody style={{display:\"flex\", justifyContent:\"center\", backgroundColor:\"#212529\"}}><img src={API_STATIC_MEDIA + props.student.photo} alt=\"loading\"\/><\/ModalBody>                 <ModalFooter style={{display:\"flex\", justifyContent:\"center\", backgroundColor:\"#212529\"}}> <Button type=\"button\" onClick={() => toggle()}>\u0417\u0430\u043a\u0440\u044b\u0442\u044c<\/Button><\/ModalFooter>             <\/Modal>         <\/>     ) }  export default ModalPhoto;<\/code><\/pre>\n
appRemovalStudent.js \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0441 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c \u043e\u0431 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438.<\/p>\n
import {Fragment, useState} from \"react\"; import {Button, Modal, ModalHeader, ModalFooter} from \"reactstrap\"; import axios from \"axios\"; import {API_URL} from \"..\/..\/index\";  const AppRemoveStudent = (props) => {     const [visible, setVisible] = useState(false)     const toggle = () => {         setVisible(!visible)     }     const deleteStudent = () => {         axios.delete(API_URL + props.pk).then(() => {             props.resetState()             toggle();         });     }     return (         <Fragment>             <Button color=\"danger\" onClick={() => toggle()}>                 \u0423\u0434\u0430\u043b\u0438\u0442\u044c             <\/Button>             <Modal isOpen={visible} toggle={toggle} style={{width: \"300px\"}}>                 <ModalHeader style={{justifyContent: \"center\"}}>\u0412\u044b \u0443\u0432\u0435\u0440\u0435\u043d\u044b?<\/ModalHeader>                 <ModalFooter style={{display: \"flex\", justifyContent: \"space-between\"}}>                     <Button                         type=\"button\"                         onClick={() => deleteStudent()}                         color=\"primary\"                     >\u0423\u0434\u0430\u043b\u0438\u0442\u044c<\/Button>                     <Button type=\"button\" onClick={() => toggle()}>\u041e\u0442\u043c\u0435\u043d\u0430<\/Button>                 <\/ModalFooter>             <\/Modal>         <\/Fragment>     ) } export default AppRemoveStudent; <\/code><\/pre>\n
StudentForm.js \u0444\u043e\u0440\u043c\u0430 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430, \u043f\u0440\u0438\u0446\u0435\u043f\u043b\u0435\u043d\u0430 \u043a \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043e\u043a\u043d\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f\/\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n
import {useEffect, useState} from \"react\"; import {Button, Form, FormGroup, Input, Label} from \"reactstrap\"; import axios from \"axios\"; import {API_URL} from \"..\/..\/index\";  const StudentForm = (props) => {     const [student, setStudent] = useState({})      const onChange = (e) => {         const newState = student         if (e.target.name === \"file\") {             newState[e.target.name] = e.target.files[0]         } else newState[e.target.name] = e.target.value         setStudent(newState)     }      useEffect(() => {         if (!props.newStudent) {             setStudent(student => props.student)         }         \/\/ eslint-disable-next-line     }, [props.student])      const defaultIfEmpty = value => {         return value === \"\" ? \"\" : value;     }      const submitDataEdit = async (e) => {         e.preventDefault();         \/\/ eslint-disable-next-line         const result = await axios.put(API_URL + student.pk, student, {headers: {'Content-Type': 'multipart\/form-data'}})             .then(() => {                 props.resetState()                 props.toggle()             })     }     const submitDataAdd = async (e) => {         e.preventDefault();         const data = {             name: student['name'],             email: student['email'],             document: student['document'],             phone: student['phone'],             photo: \"\/\",             file: student['file']         }         \/\/ eslint-disable-next-line         const result = await axios.post(API_URL, data, {headers: {'Content-Type': 'multipart\/form-data'}})             .then(() => {                 props.resetState()                 props.toggle()             })     }     return (         <Form onSubmit={props.newStudent ? submitDataAdd : submitDataEdit}>             <FormGroup>                 <Label for=\"name\">Name:<\/Label>                 <Input                     type=\"text\"                     name=\"name\"                     onChange={onChange}                     defaultValue={defaultIfEmpty(student.name)}                 \/>             <\/FormGroup>             <FormGroup>                 <Label for=\"email\">Email<\/Label>                 <Input                     type=\"email\"                     name=\"email\"                     onChange={onChange}                     defaultValue={defaultIfEmpty(student.email)}                 \/>             <\/FormGroup>             <FormGroup>                 <Label for=\"document\">Document:<\/Label>                 <Input                     type=\"text\"                     name=\"document\"                     onChange={onChange}                     defaultValue={defaultIfEmpty(student.document)}                 \/>             <\/FormGroup>             <FormGroup>                 <Label for=\"phone\">Phone:<\/Label>                 <Input                     type=\"text\"                     name=\"phone\"                     onChange={onChange}                     defaultValue={defaultIfEmpty(student.phone)}                 \/>             <\/FormGroup>             <FormGroup>                 <Label for=\"photo\">Photo:<\/Label>                 <Input                     type=\"file\"                     name=\"file\"                     onChange={onChange}                     accept='image\/*'                 \/>             <\/FormGroup>             <div style={{display: \"flex\", justifyContent: \"space-between\"}}>                 <Button>Send<\/Button> <Button onClick={props.toggle}>Cancel<\/Button>             <\/div>         <\/Form>     ) }  export default StudentForm; <\/code><\/pre>\n
\u041f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u043c \u0442\u0430\u043a \u0436\u0435 index.js<\/p>\n
import React from 'react'; import ReactDOM from 'react-dom\/client'; import '.\/index.css'; import App from '.\/components\/app\/App'; import reportWebVitals from '.\/reportWebVitals'; import 'bootstrap\/dist\/css\/bootstrap.min.css'  export const API_URL = \"http:\/\/127.0.0.1:8000\/api\/students\/\" export const API_STATIC_MEDIA = \"http:\/\/127.0.0.1:8000\/\"  const root = ReactDOM.createRoot(document.getElementById('root')); root.render(     <React.StrictMode>         <App\/>     <\/React.StrictMode> );  reportWebVitals();<\/code><\/pre>\n
\u041f\u0440\u043e\u0431\u0435\u0433\u0438\u0442\u0435\u0441\u044c \u043f\u043e \u043f\u0443\u0442\u044f\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432, \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u043b\u043e \u0441 \u0432\u0430\u0448\u0435\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0435\u0439, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0430\u0437\u0432\u0430\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u043a-\u0442\u043e \u0438\u043d\u0430\u0447\u0435.<\/p>\n
\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 npm start<\/code> \u0438\u0438\u0438…<\/p>\n
<\/figcaption><\/figure>\n
\u0422\u043e\u043f\u0430\u0435\u043c \u043d\u0430 http:\/\/localhost:3000<\/code><\/p>\n
<\/figcaption><\/figure>\n
\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c. \u041a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u043d\u0435\u0442, \u043d\u043e \u044d\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043c\u044b \u0435\u0451 \u043d\u0435 \u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443.<\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c django \u043f\u0430\u0440\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432 \u0438 \u0444\u0430\u0439\u043b nophoto.png \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438<\/p>\n
<\/figcaption><\/figure>\n
\"\u041f\u043e\u0441\u043b\u0435
\u041f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0438\u043c \u0447\u0442\u043e \u0432\u0441\u0451 \u043e\u043a!<\/figcaption><\/figure>\n
\u0412 \u0446\u0435\u043b\u043e\u043c, \u044d\u0442\u043e \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c\/\u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430, \u043e\u043d\u0430 \u0443\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 django, \u043d\u043e \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043c. <\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041d\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441 \u043d\u0438\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u0438\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c \u0447\u0442\u043e \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0431\u0440\u043e\u043a\u0435\u0440\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439. RabbitMQ \u043c\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u041d\u043e \u0442\u043e\u0433\u0434\u0430 \u0443\u0436\u0435 \u0438 \u043f\u0443\u0441\u0442\u044c \u0441\u0430\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0435\u0437\u0436\u0430\u0435\u0442. <\/p>\n
\u0414\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0443 \u043c\u0435\u043d\u044f \u0440\u0430\u0437\u0432\u0451\u0440\u043d\u0443\u0442\u0430 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u043c\u0430\u0448\u0438\u043d\u0430 \u043d\u0430 Centos 7 \u043d\u0430 VirtualBox.<\/p>\n
\u0412 \u0446\u0435\u043b\u043e\u043c \u041e\u0421 \u043d\u0435 \u0432\u0430\u0436\u043d\u0430, \u0442.\u043a. \u0434\u043e\u043a\u0435\u0440 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043b\u044e\u0431\u0443\u044e \u0443\u0434\u043e\u0431\u043d\u0443\u044e \u0434\u043b\u044f \u0432\u0430\u0441 \u041e\u0421, Fedora\/Ubuntu\/Debian \u0438 \u0434\u0430\u0436\u0435 \u043d\u0430 windows (\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u043d\u0430\u0434\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c wsl).<\/p>\n
\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e vs code, \u0432 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u043f\u043b\u043e\u044f \u043f\u043e sftp. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 pycharm \u0442\u043e \u0442\u0430\u043c \u0442\u043e\u0436\u0435 \u0432\u0441\u0451 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u0422\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435, \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 ProjectStudent \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c (\u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0437 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f env \u0443 django \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 node_modules \u0443 \u0440\u0435\u0430\u043a\u0442, \u043f\u043e\u043c\u0435\u0448\u0430\u0442\u044c \u043e\u043d\u0438 \u043d\u0435 \u043f\u043e\u043c\u0435\u0448\u0430\u044e\u0442, \u043d\u043e \u0442\u0430\u043c \u043a\u0443\u0447\u0430 \u0444\u0430\u0439\u043b\u043e\u0432, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0434\u043e\u043b\u0433\u043e, \u0430 \u0442\u043e\u043b\u043a\u0443 \u043e\u0442 \u043d\u0438\u0445 \u0442\u0430\u043c \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e, \u043c\u0435\u0440\u0442\u0432\u044b\u0439 \u0433\u0440\u0443\u0437.)<\/p>\n
\u041d\u0430\u0447\u043d\u0435\u043c \u0441 Django.<\/p>\n
\u041e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 pip freeze >requirements.txt<\/code><\/p>\n
\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 django\\django_project\\django_project.<\/code><\/p>\n
\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0430\u043c Dockerfile<\/code><\/p>\n
\u0417\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0435\u0433\u043e<\/p>\n
# \u0421\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u043e\u0431\u0440\u0430\u0437 FROM python:3.11-alpine  # \u0440\u0430\u0431\u043e\u0447\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f WORKDIR \/usr\/src\/app RUN mkdir -p $WORKDIR\/static RUN mkdir -p $WORKDIR\/media  # \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f python #\u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u043a\u044d\u0448\u0430 .pyc ENV PYTHONDONTWRITEBYTECODE 1 # \u043d\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0431\u0443\u0444\u0435\u0440 \u043f\u043e\u0442\u043e\u043a\u0438 stdout \u0438 stderr ENV PYTHONUNBUFFERED 1  # \u043e\u0431\u043d\u043e\u0432\u0438\u043c pip RUN pip install --upgrade pip  # \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u044d\u0442\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f  # \u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 requirements.txt COPY .\/requirements.txt . RUN pip install -r requirements.txt  # \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0451 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c. COPY . .<\/code><\/pre>\n
\u0421 Django \u043f\u043e\u043a\u0430 \u0432\u0441\u0451. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043a react.<\/p>\n
\u0422\u0430\u043a \u0436\u0435, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 reactapp \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c Dockerfile<\/p>\n
# \u0442\u0430\u043a \u0436\u0435 \u0431\u0435\u0440\u0451\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 node \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 alpine FROM node:18-alpine as build # \u0417\u0430\u0434\u0430\u0435\u043c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 WORKDIR \/usr\/src\/app # \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0442\u0443\u0434\u0430 \u043d\u0430\u0448\u0438 json \u0444\u0430\u0439\u043b\u044b ADD *.json .\/ # \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432 json RUN npm install  # \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438 public \u0438 src.  # \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 COPY . . \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438 node_modules, # \u0442\u043e \u0431\u0443\u0434\u0435\u0442\u0435 \u0436\u0434\u0430\u0442\u044c \u043f\u043e\u043a\u0430 \u0437\u0430\u043b\u044c\u0451\u0442\u0441\u044f \u044d\u0442\u043e\u0442 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0446\u0435\u043b\u0438\u043a\u043e\u043c.  # \u0434\u0430 \u0438 \u043f\u043e\u0442\u043e\u043c \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. ADD .\/public .\/public ADD .\/src .\/src<\/code><\/pre>\n
\u0418\u0442\u0430\u043a, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u0434\u0432\u0443\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0433\u043e\u0442\u043e\u0432\u043e. \u041d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0438\u0445 \u0440\u0443\u043a\u0430\u043c\u0438 \u043d\u0435 \u0442\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u0443\u0441\u0442\u044c \u044d\u0442\u0438\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f docker-compose. \u0422\u0430\u043a \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u043a\u0435\u0440, \u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0435\u0449\u0435 docker-compose.<\/p>\n
\u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 ProjectStudent \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0442\u0430\u043c docker-compose.yml<\/code><\/p>\n
version: '3.8' # \u041f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u043c \u0434\u0432\u0430 \u0441\u0435\u0440\u0432\u0438\u0441\u0430, django \u0418 node services:   django:     #\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0447\u0442\u043e build \u0431\u0443\u0434\u0435\u0442 \u0438\u0437 dockerfile \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f .\/django\/django_project\/     build: .\/django\/django_project\/     # \u0438\u043c\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430     container_name: djangoapp     # \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043f\u0440\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0438\u043b\u0438 \u043f\u0440\u0438 \u0430\u0432\u0430\u0440\u0438\u0439\u043d\u043e\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438     restart: always     # \u043f\u0440\u043e\u0431\u0440\u043e\u0441 \u043f\u043e\u0440\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, 8000 \u043f\u043e\u0440\u0442 \u043d\u0430 \u0445\u043e\u0441\u0442 \u043c\u0430\u0448\u0438\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0431\u0440\u043e\u0448\u0435\u043d \u0432\u043d\u0443\u0442\u0440\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 8000 \u043f\u043e\u0440\u0442     ports:       - 8000:8000     # \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430     command: >       sh -c \"python manage.py runserver 0.0.0.0:8000\"     # \u0414\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u043a\u0438 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0434\u0432\u0430 volume (\u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u043b\u0438)), \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0438\u0445 \u043d\u0438\u0436\u0435.     volumes:       - django_static_volume:\/usr\/src\/app\/static       - django_media_volume:\/usr\/src\/app\/media     # \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a \u0441\u0435\u0442\u0438 myNetwork (\u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u0434\u043e \u043a\u0443\u0447\u0438 \u0447\u0442\u043e\u0431 \u0431\u044b\u043b\u043e)     networks:       - myNetwork    node:     # \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, build \u0438\u0437 .\/reactapp\/dockerfile     build: .\/reactapp     # \u0438\u043c\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430     container_name: reactapp     # \u0440\u0435\u0441\u0442\u0430\u0440\u0442     restart: always     # \u043f\u043e\u0440\u0442\u044b     ports:       - 3000:3000     # \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435     command: npm start     # \u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c. \u043d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u043d\u043e\u0434\u0435, \u0435\u0441\u043b\u0438 \u043d\u0435\u043a\u043e\u043c\u0443 \u043e\u0442\u0434\u0430\u0442\u044c \u0435\u0439 \u0434\u0430\u043d\u043d\u044b\u0435. \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441 django, \u0430 \u0437\u0430 \u043d\u0435\u0439 node     depends_on:       - django     # \u0421\u0435\u0442\u044c \u0442\u0430 \u0436\u0435, \u0432\u0441\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043a\u0440\u0443\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u043e\u0434\u043d\u0439\u043e \u0441\u0435\u0442\u0438 \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0435\u0442\u044c \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430.     networks:       - myNetwork # \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0434\u0432\u0430 volume \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u043a\u0438 volumes:   django_static_volume:   django_media_volume:<\/code><\/pre>\n
\u041f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0433\u043e\u0442\u043e\u0432\u044b. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c docker-compose up<\/code><\/p>\n
.... djangoapp | January 23, 2023 - 08:45:29 djangoapp | Django version 4.1.5, using settings 'django_project.settings' djangoapp | Starting development server at http:\/\/0.0.0.0:8000\/ djangoapp | Quit the server with CONTROL-C. .... reactapp  | Compiled successfully! reactapp  | reactapp  | You can now view reactapp in the browser. reactapp  | reactapp  |   Local:            http:\/\/localhost:3000 reactapp  |   On Your Network:  http:\/\/192.168.224.3:3000<\/code><\/pre>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0432\u0441\u0451 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u043e\u0441\u044c.<\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c.<\/p>\n
\u0422.\u043a. \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0430 \u0445\u043e\u0441\u0442\u043e\u0432\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435, localhost:3000 \u0443\u0436\u0435 \u043d\u0435 \u043a\u0430\u0442\u0438\u0442, \u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0438 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043b\u0438 \u043f\u043e\u0440\u0442\u044b, \u0438\u0434\u0451\u043c \u043d\u0430 \u0445\u043e\u0441\u0442\u043e\u0432\u0443\u044e \u043c\u0430\u0448\u0438\u043d\u0443 \u043d\u0430 3000 \u043f\u043e\u0440\u0442. \u0412 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e http:\/\/192.168.56.101:3000\/<\/code><\/p>\n
<\/figcaption><\/figure>\n
\u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0440\u0435\u0430\u043a\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d, \u043d\u043e \u0432\u043e\u0442 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0435\u0442. \u042d\u0442\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 API \u0432\u0441\u0451 \u0435\u0449\u0435 \u0432\u0435\u0434\u0451\u0442 \u043d\u0430 127.0.0.1:8000<\/code><\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c. \u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432\u0441\u0451, \u0447\u0435\u0440\u0435\u0437 ctrl+C<\/p>\n
\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c reactapp\\src\\index.js<\/code><\/p>\n
\u0418 \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u043c \u043f\u0443\u0442\u044c \u0434\u043e api<\/p>\n
export const API_URL = \"http:\/\/192.168.56.101:8000\/api\/students\/\"<\/code><\/p>\n
\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u043c, \u0438 \u0447\u0442\u043e\u0431\u044b \u0447\u0430\u0441\u0442\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c src \u0438 public \u043a\u0430\u043a volume \u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443, \u0442\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0432\u0430\u0448\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u0442\u044c \u043d\u0430 \u0445\u043e\u0441\u0442\u043e\u0432\u0443\u044e \u043c\u0430\u0448\u0438\u043d\u0443 \u0438 \u0442.\u043a. \u044d\u0442\u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u043a\u0430\u043a volume \u0442\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435.<\/p>\n
\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 docker-compose.yml \u0432 \u0441\u0435\u0440\u0432\u0438\u0441 node \u043f\u0430\u0440\u0443 \u0441\u0442\u0440\u043e\u043a<\/p>\n
\u00a0 \u00a0 volumes: \u00a0 \u00a0 \u00a0 - .\/reactapp\/public\/:\/usr\/src\/app\/public\/ \u00a0 \u00a0 \u00a0 - .\/reactapp\/src\/:\/usr\/src\/app\/src\/<\/code><\/pre>\n
\u0422\u0430\u043a\u0443\u044e \u0436\u0435 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438 \u0441 django\u00a0<\/p>\n
\u00a0 \u00a0 volumes: \u00a0 \u00a0 \u00a0 - .\/django\/django_project:\/usr\/src\/app\/ \u00a0 \u00a0 \u00a0 - django_static_volume:\/usr\/src\/app\/static \u00a0 \u00a0 \u00a0 - django_media_volume:\/usr\/src\/app\/media<\/code><\/pre>\n
\u0412\u0441\u0435, \u0441\u043d\u043e\u0432\u0430 \u0434\u0435\u043b\u0430\u0435\u043c docker-compose up.<\/p>\n
\u0414\u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u043a\u0430 \u043b\u043e\u0433 \u0440\u0435\u0430\u043a\u0442\u0430 \u043d\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u0442 successfully! \u0418 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0435\u0449\u0451 \u0440\u0430\u0437.<\/p>\n
<\/figcaption><\/figure>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435. \u041d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. <\/p>\n
\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043e\u0442\u0445\u043e\u0434\u0438\u0442\u044c \u0434\u0430\u043b\u0435\u043a\u043e \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0440\u0430\u0437\u0443 rabbit. \u041e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u0441\u0451 \u0447\u0435\u0440\u0435\u0437 ctrl + C<\/code><\/p>\n
\u0421\u043d\u043e\u0432\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c yml \u0444\u0430\u0439\u043b \u0438 \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0438\u0441 rmq<\/p>\n
rmq:     # \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043c\u044b \u043d\u0435 \u0431\u0438\u043b\u0434\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0438\u0437 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f     image: rabbitmq:3.10-management     restart: always     container_name: rmq     networks:       - myNetwork     # \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.      environment:       - RABBITMQ_DEFAULT_USER=admin       - RABBITMQ_DEFAULT_PASS=admin     # volume \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 rmq, \u043c\u043e\u0436\u043d\u043e \u0438 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e, \u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0438 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0442\u0438\u0445\u043e\u043d\u044c\u043a\u0443 \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f     volumes:       - rabbitmq_data_volume:\/var\/lib\/rabbitmq\/     # \u043f\u0440\u043e\u0431\u0440\u043e\u0441 \u043f\u043e\u0440\u0442\u043e\u0432, 15672 \u0434\u043b\u044f \u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442\u0430, 5671-5672 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b     ports:       - 1234:15672       - 5671-5672:5671-5672     <\/code><\/pre>\n
\u0418 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 volume \u0432 \u0441\u043f\u0438\u0441\u043e\u043a volumes<\/p>\n
volumes:   django_static_volume:   django_media_volume:   rabbitmq_data_volume:<\/code><\/pre>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e.<\/p>\n
\u041e\u0442 \u0440\u0435\u0430\u043a\u0442\u0430 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0433\u043e \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0435\u043c. <\/p>\n
\u0418\u0434\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u0442\u044c django<\/p>\n
\u041d\u0430\u0434\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0430\u0440\u0443 \u043d\u043e\u0432\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0447\u0443\u0442\u044c \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u044b\u0435.<\/p>\n
\u0418\u0442\u0430\u043a, \u0432 \u0444\u0430\u0439\u043b django\\django_project\\students\\views.py<\/code><\/p>\n
\u0414\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
def save_image_to_media(serializer, request):     file_name = send_to_rabbit(request).split('separator')[1]     file_path = 'media\\\\photo\\\\' + file_name     serializer.validated_data['photo'] = file_path     if serializer.is_valid():         serializer.save()<\/code><\/pre>\n
\u041f\u0435\u0440\u0432\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 request \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e send_to_rabbit, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430, \u044d\u0442\u043e \u0438\u043c\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0411\u0414.<\/p>\n
def send_to_rabbit(data):     file = data.FILES['file']     file_name = bytes('separator' + str(uuid.uuid4()) + '.' + file.name[file.name.rfind(\".\") + 1:], 'utf-8')     img = file.read() + file_name     hostname = '192.168.56.101'     port = 5672     credentials = pika.PlainCredentials(username='admin', password='admin')     parameters = pika.ConnectionParameters(host=hostname, port=port, credentials=credentials)     connection = pika.BlockingConnection(parameters=parameters)     channel = connection.channel()     channel.queue_declare(queue='to_resize')     channel.basic_publish(exchange='',                           routing_key='to_resize',                           body=img)     connection.close()     return file_name.decode('utf-8')<\/code><\/pre>\n
\u0422\u0443\u0442 \u0443 \u043d\u0430\u0441 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
1)\u00a0\u00a0\u00a0\u00a0 \u0418\u0437 request \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435 file, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0430\u0439\u0442\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u043a \u043d\u0435\u043c\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u043f\u0430\u0440\u0430\u0442\u043e\u0440 \u043f\u0440\u0438\u0446\u0435\u043f\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0447\u0435\u0440\u0435\u0437 uuid \u0438\u043c\u044f \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430.<\/p>\n
2)\u00a0\u00a0\u00a0\u00a0 \u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0430 rmq.<\/p>\n
\u0414\u0430, \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f admin\/admin, \u043c\u043e\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0434\u043e \u0434\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c.<\/p>\n
3)\u00a0\u00a0\u00a0\u00a0 \u0418\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e, \u0434\u043b\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0411\u0414.<\/p>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0438. \u0422\u0435\u043f\u0435\u0440\u044c \u0435\u0433\u043e \u043d\u0430\u0434\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u044c.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 worker.py<\/p>\n
\u041f\u043e \u0438\u0434\u0435\u0435 \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441, \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 django. \u041d\u043e \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u043b\u043e\u0434\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435, \u043f\u0443\u0441\u0442\u044c \u0432\u0441\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u043b\u043e\u0433\u0438\u043a\u0443 \u044d\u0442\u043e \u043d\u0435 \u043d\u0430\u0440\u0443\u0448\u0438\u0442.<\/p>\n
Worker.py<\/code><\/p>\n
import pika from PIL import Image import io import time  def initial():     try:         hostname = 'rmq'         port = 5672         credentials = pika.PlainCredentials(username='admin', password='admin')         parameters = pika.ConnectionParameters(host=hostname, port=port, credentials=credentials)         connection = pika.BlockingConnection(parameters=parameters)         # \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u043d\u0430\u043b         channel = connection.channel()         # \u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043e\u0447\u0435\u0440\u0435\u0434\u0438         channel.queue_declare(queue='to_resize')         channel.queue_declare(queue='from_resize')         channel.basic_consume(queue='to_resize',                       auto_ack=True,                       on_message_callback=callback)          return True, channel     except:         return False, None  def callback(ch, method, properties, body):     try:         data = body.split(b'separator')         file_name = b'separator' + data[1]         fixed_height = 300         image = Image.open(io.BytesIO(data[0]))         height_percent = (fixed_height \/ float(image.size[1]))         width_size = int((float(image.size[0]) * float(height_percent)))         new = image.resize((width_size, fixed_height))         img_width = bytes(f'separator{new.width}', 'utf-8')         img_height = bytes(f'separator{new.height}', 'utf-8')         tobyte = new.tobytes() + img_width + img_height + file_name         return_resize_image(tobyte)     except Exception as error:         print(error)  def return_resize_image(data):     channel.basic_publish(exchange='',                           routing_key='from_resize',                           body=data)  if __name__ == '__main__':     count_try=0     conn=False     while not conn:         count_try+=1         print(f'I`m WORKER. \u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u0441\u044f \u2116{count_try}')         conn, channel=initial()           if not conn:             time.sleep(2)       print(' [*] I`m WORKER and i`m Waiting for messages. To exit press CTRL+C')     channel.start_consuming() <\/code><\/pre>\n
\u0427\u0442\u043e \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/p>\n
\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 worker \u0432 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0446\u0438\u043a\u043b\u0435 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u043a rabbit, \u043f\u0440\u0438 \u043d\u0435\u0443\u0434\u0430\u0447\u0435 \u0441\u043f\u0438\u0442 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0438 \u0441\u043d\u043e\u0432\u0430 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f. <\/p>\n
\u0412 initial() \u043f\u043e\u043c\u0438\u043c\u043e \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u0430 callback \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0447\u0442\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c.<\/p>\n
\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043c\u0430\u0441\u0441\u0438\u0432 \u0447\u0435\u0440\u0435\u0437 separator \u0447\u0430\u0441\u0442\u044c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 Image, \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 pillow. \u0414\u0430\u043b\u044c\u0448\u0435 \u043e\u043d\u043e \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0440\u0435\u0441\u0430\u0439\u0437\u0438\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0441\u043e\u0442\u0430 \u0431\u044b\u043b\u0430 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 300 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.<\/p>\n
\u0421\u043d\u043e\u0432\u0430 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0430\u0439\u0442\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u0442\u0430\u043a \u0436\u0435 \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u043f\u0430\u0440\u0430\u0442\u043e\u0440\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c. \u0414\u043b\u044f \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043d\u0438\u044f \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433. \u0420\u0430\u0437\u043c\u0435\u0440 \u043d\u0443\u0436\u0435\u043d \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 pillow \u0441\u043d\u043e\u0432\u0430 \u043c\u043e\u0433\u043b\u0430 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u0431\u0430\u0439\u0442\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. (\u0441\u043f\u043e\u0441\u043e\u0431 \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u043f\u0430\u0440\u0430\u0442\u043e\u0440\u044b \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439, \u044f \u043f\u043e\u043d\u0438\u043c\u0430\u044e, \u043d\u043e \u0447\u0435\u0442 \u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e \u0432 \u0433\u043e\u043b\u043e\u0432\u0443 \u043d\u0438\u0447\u0435\u0433\u043e \u043b\u0443\u0447\u0448\u0435. \u041d\u043e \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.)<\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u043e\u0440\u043a\u0435\u0440.<\/p>\n
\u0422\u0443\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043c\u043e\u043c\u0435\u043d\u0442. \u0422\u0430\u043a \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c. <\/p>\n
\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u044f \u0445\u043e\u0442\u0435\u043b, \u0447\u0442\u043e\u0431\u044b \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u043e\u0440\u043a\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0432 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0431\u043b\u0438\u0437\u043e\u0441\u0442\u0438 \u0441 django \u0438 \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b \u043d\u0430 \u043c\u0435\u0441\u0442\u043e, \u043d\u043e \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b \u0411\u0414 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u0438\u043c\u044f \u0438 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043f\u043e\u043b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438. \u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u0435\u0440\u0432\u0438\u0441, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d django \u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u043b\u0438 \u043d\u0435\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u044b\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u0442\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430.<\/p>\n
<\/figcaption><\/figure>\n
\u0414\u0430\u043b\u0435\u0435 \u0447\u0435\u0440\u0435\u0437 python manage.py my_command \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0441\u044f worker. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043e\u0442 \u0438\u0434\u0435\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0411\u0414 \u0438\u0437 worker \u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0441\u044f, \u0438 \u043e\u043d \u0441\u0442\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u043f\u043e \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u043c\u043d\u0435 \u043f\u0443\u0442\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e worker2 \u0440\u044f\u0434\u043e\u043c \u0441 \u043f\u0435\u0440\u0432\u044b\u043c \u0438 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432 \u043d\u0435\u0433\u043e. \u041d\u043e \u044f \u0443\u0436\u0435 \u043d\u0435 \u0441\u0442\u0430\u043b.<\/p>\n
\u0422\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u043a\u0430\u043a \u0435\u0441\u0442\u044c.<\/p>\n
my_command.py<\/code><\/p>\n
from django.core.management.base import BaseCommand from PIL import Image import pika import time  class Command(BaseCommand):     def handle(self, *args, **options):         count_try=0         conn=False         while not conn:             count_try+=1             print(f'I`m DJANGO WORKER. \u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u0441\u044f \u2116{count_try}')             conn, channel=self.initial()             if not conn:                 time.sleep(2)         print(' [*] I`m DJANGO WORKER and i`m Waiting for messages. To exit press CTRL+C')         channel.start_consuming()      def initial(self):         try:             hostname = 'rmq'             port = 5672             credentials = pika.PlainCredentials(username='admin', password='admin')             parameters = pika.ConnectionParameters(host=hostname, port=port, credentials=credentials)             connection = pika.BlockingConnection(parameters=parameters)             # \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u043d\u0430\u043b             channel = connection.channel()             channel.queue_declare(queue='to_resize')             channel.queue_declare(queue='from_resize')             try:                 channel.basic_consume(queue='from_resize',                                 auto_ack=True,                                 on_message_callback=self.callback)             except Exception as error:                 print(error)             return True, channel         except:             return False, None      @staticmethod     def callback(ch, method, properties, body):         try:             data = body.split(b'separator')             image = Image.frombytes(\"RGB\", (int(data[1]), int(data[2])), data[0])             file_name = data[3].decode('UTF-8')             image.save('media\/photo\/' + file_name)         except Exception as error:             print(error)<\/code><\/pre>\n
\u0422\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043f\u043e\u043f\u044b\u0442\u043a\u0438 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u0438 callback \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439. <\/p>\n
\u0412 callback \u0442\u0435\u043b\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u0438\u043b\u0438\u0442\u0441\u044f \u043f\u043e \u0441\u0435\u043f\u0430\u0440\u0430\u0442\u043e\u0440\u0443, \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0438\u0437 \u0431\u0430\u0439\u0442\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 Image \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n
\u0412 \u0446\u0435\u043b\u043e\u043c \u0432\u0441\u0451 \u0445\u043e\u0440\u043e\u0448\u043e, \u043d\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n
\u043d\u0430\u0434\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0438\u0445 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 requirements<\/code><\/p>\n
pip install pika uuid pillow<\/code><\/p>\n
pip freeze >requirements.txt<\/code><\/p>\n
\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0430\u043f\u0443\u0441\u043a \u043d\u0430\u0448\u0438\u0445 worker\u2019\u043e\u0432 \u0432 yml \u0444\u0430\u0439\u043b\u0435.<\/p>\n
\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 django<\/p>\n
    command: >       sh -c \"nohup python worker.py & nohup python manage.py my_command & python manage.py runserver 0.0.0.0:8000\"<\/code><\/pre>\n
\u0442\u0430\u043a \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 django \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 rmq, \u0432\u0435\u0434\u044c \u0435\u043c\u0443 \u043d\u0430\u0434\u043e \u043a\u0443\u0434\u0430-\u0442\u043e \u0441\u043b\u0430\u0442\u044c \u0438 \u043e\u0442\u043a\u0443\u0434\u0430-\u0442\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/p>\n
depends_on:       - rmq<\/code><\/pre>\n
\u0422\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f requirements \u043d\u0430\u0434\u043e \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 django<\/p>\n
\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <\/p>\n
docker-compose up -d --build<\/code><\/p>\n
—build \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0435\u0440\u0451\u0442 \u0432\u0441\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 react \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c, \u043e\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0434\u0442\u044f\u043d\u0435\u0442\u0441\u044f \u0438\u0437 \u043a\u044d\u0448\u0430, django \u0436\u0435 \u0432\u043e\u0437\u044c\u043c\u0435\u0442 \u0438\u0437 \u043a\u044d\u0448\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0441\u043b\u043e\u0438 \u0447\u0442\u043e \u0431\u044b\u043b\u0438 \u0434\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 requirements, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043d\u043e\u0432\u044b\u0435.<\/p>\n
-d \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043d\u0435 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043b\u043e\u0433\u0430\u043c\u0438 \u043a\u0430\u043a \u0440\u0430\u043d\u044c\u0448\u0435, \u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u0432\u0441\u0451 \u0432 \u0444\u043e\u043d\u0435. \u0422\u0430\u043a \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0441\u044f rmq \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043b\u043e\u0433\u043e\u0432 \u0440\u0435\u0437\u043a\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0451\u0442, \u0438 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043d\u0438\u043c\u0438 \u0443\u0436\u0435 \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e.<\/p>\n
\u041e\u0436\u0438\u0434\u0430\u0435\u043c \u043f\u043e\u043a\u0430 \u0432\u0441\u0435 \u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u044f\u0442\u0441\u044f<\/p>\n
Creating rmq ... done<\/code><\/p>\n
Creating djangoapp ... done<\/code><\/p>\n
Creating reactapp\u00a0 ... done<\/code><\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u0447\u0442\u043e \u043d\u0430\u043c \u0441\u043a\u0430\u0437\u0430\u043b\u0430 django \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435:<\/p>\n
docker-compose logs | grep djangoapp<\/code><\/p>\n
<\/figcaption><\/figure>\n
\u041c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043e\u0431\u0430 \u0432\u043e\u0440\u043a\u0435\u0440\u0430 \u043e\u0442\u0440\u0430\u043f\u043e\u0440\u0442\u043e\u0432\u0430\u043b\u0438 \u043d\u0430\u043c \u0447\u0442\u043e \u043e\u043d\u0438 \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438\u0441\u044c \u043e\u043d\u0438 \u043d\u0435 \u0441\u0440\u0430\u0437\u0443, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u0432\u0441\u0451 \u043f\u0440\u043e\u0448\u043b\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e.<\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0433\u043e \u043d\u0438 \u0431\u0443\u0434\u044c \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u043c\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n
<\/figcaption><\/figure>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430 \u0438 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043f\u0430\u0440\u043e\u0447\u043a\u0443. \u0421\u0445\u0435\u043c\u0430 \u0441 \u043a\u0440\u043e\u043b\u0438\u043a\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n
\u0418\u0437 \u0432\u0441\u0435\u0439 \u0441\u0445\u0435\u043c\u044b \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043b\u0438\u0448\u044c \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u0442\u044c \u0441 SQLite \u043d\u0430 postgress, \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c nginx \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u0435\u043b \u043d\u0430\u0440\u0443\u0436\u0443, \u0430 \u0431\u044b\u043b \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0435\u0433\u043e \u0441\u0435\u0442\u0438.<\/p>\n
\u00a0\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0411\u0414.<\/p>\n
\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 docker-compose down, \u043e\u0442\u043a\u0440\u043e\u0435\u043c yml \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0438\u0441.<\/p>\n
  postgres:     # \u0422\u0430\u043a \u0436\u0435 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0441 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430     image: postgres:15-alpine     container_name: postgresdb     # \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u043b\u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c volume     volumes:       - postgres_volume:\/var\/lib\/postgresql\/data\/     # \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f. \u0438\u0445 \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 django.     environment:       - POSTGRES_USER=admin       - POSTGRES_PASSWORD=strong_password       - POSTGRES_DB=django_db     # \u0421\u0435\u0442\u044c     networks:       - myNetwork<\/code><\/pre>\n
Volume \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0434\u0435 \u043d\u0430\u0434\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c<\/p>\n
volumes:   postgres_volume:   django_static_volume:   django_media_volume:   rabbitmq_data_volume:<\/code><\/pre>\n
\u0413\u043e\u0442\u043e\u0432\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0434\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c django.<\/p>\n
\u041c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0411\u0414 \u043b\u043e\u0433\u0438\u043d \u0438 \u043f\u0430\u0440\u043e\u043b\u044c. \u041c\u043e\u0436\u043d\u043e \u0438\u0445 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u044f\u0432\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445, \u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0439 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u0444\u0430\u0439\u043b\u0435 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 ProjectStudent<\/code> \u0444\u0430\u0439\u043b .env<\/code><\/p>\n
\u0421\u0440\u0430\u0437\u0443 \u0432 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0431\u044b \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u0438 \u0441\u0432\u0435\u0442\u0438\u0442\u044c \u0432 \u043a\u043e\u0434\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, SECRET_KEY<\/p>\n
\u0417\u0430\u043a\u0438\u043d\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u0412 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0411\u0414<\/p>\n
SECRET_KEY=django-insecure-cfr4pr9x3dbm9vnmvclxn&^a^ml-cl*=c#scbsxn_+m*5mt%z1 DEBUG=1 ALLOWED_HOSTS=*  POSTGRES_ENGINE=django.db.backends.postgresql POSTGRES_DB=django_db POSTGRES_USER=admin POSTGRES_PASSWORD=strong_password POSTGRES_HOST=postgres POSTGRES_PORT=5432 DATABASE=postgres<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c settings.py<\/code><\/p>\n
\u0412\u043d\u043e\u0441\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/p>\n
SECRET_KEY = environ.get('SECRET_KEY') DEBUG = int(environ.get('DEBUG', default=0)) ALLOWED_HOSTS = environ.get('ALLOWED_HOSTS').split(' ')  ...  DATABASES = {     'default': {         'ENGINE': environ.get('POSTGRES_ENGINE', 'django.db.backends.sqlite3'),         'NAME': environ.get('POSTGRES_DB', BASE_DIR \/ 'db.sqlite3'),         'USER': environ.get('POSTGRES_USER', 'user'),         'PASSWORD': environ.get('POSTGRES_PASSWORD', 'password'),         'HOST': environ.get('POSTGRES_HOST', 'localhost'),         'PORT': environ.get('POSTGRES_PORT', '5432'),     } }<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u0432 yml \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0448 \u0444\u0430\u0439\u043b \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 postgress \u0441\u0435\u0440\u0432\u0438\u0441\u0443 django.<\/p>\n
    depends_on:       - postgres       - rmq     env_file:       - .\/.env<\/code><\/pre>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u041d\u043e \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u043e \u041d\u041e. \u0423 \u043d\u0430\u0441 \u0432 \u0434\u043e\u043a\u0435\u0440 \u0444\u0430\u0439\u043b\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0447\u0442\u043e \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0430\u0434\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044e. \u041d\u043e \u043d\u044e\u0430\u043d\u0441 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u043c\u0438\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0432 SQLite \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043b\u0435\u0436\u0430\u043b\u0430 \u0440\u044f\u0434\u043e\u043c, \u0430 \u043d\u0430 postgress, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0445\u043e\u0442\u044c \u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n
\u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0440\u044f\u0434\u043e\u043c \u0441 dockerfile \u0441\u043a\u0440\u0438\u043f\u0442 entrypoint.sh \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 \u0447\u0442\u043e \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435.<\/p>\n
entrypoint.sh<\/code><\/p>\n
#!\/bin\/sh if [ \"$DATABASE\" = \"postgres\" ] then     # \u0435\u0441\u043b\u0438 \u0431\u0430\u0437\u0430 \u0435\u0449\u0435 \u043d\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430     echo \"\u0420\u0430\u043d\u043e...\"     # \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0445\u043e\u0441\u0442\u0430 \u0438 \u043f\u043e\u0440\u0442\u0430     while ! nc -z $POSTGRES_HOST $POSTGRES_PORT; do       sleep 0.1     done     echo \"\u041f\u043e\u0440\u0430!\" fi # \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 python manage.py migrate exec \"$@\"<\/code><\/pre>\n
\u0442\u0430\u043a \u0436\u0435 \u0443\u0436\u0435 \u0432 \u0445\u043e\u0441\u0442\u043e\u0432\u043e\u0439 \u041e\u0421, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0441\u043a\u0440\u0438\u043f\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u043c. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0433\u0434\u0435 \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 chmod +x .\/ entrypoint.sh<\/code><\/p>\n
\u041f\u043b\u044e\u0441\u043e\u043c \u043a\u043e \u0432\u0441\u0435\u043c\u0443 \u0441 postgress \u043d\u0430\u0434\u043e \u043a\u0430\u043a \u0442\u043e \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u0430\u043a \u0432 \u0441\u0430\u043c\u0443 \u041e\u0421 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0442\u0430\u043a \u0438 \u0432 pip.<\/p>\n
\u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c dockerfile  \u0434\u0436\u0430\u043d\u0433\u0438 \u0438 \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c pip<\/p>\n
RUN apk update \\     && apk add postgresql-dev gcc python3-dev musl-dev      # \u043e\u0431\u043d\u043e\u0432\u0438\u043c pip RUN pip install --upgrade pip<\/code><\/pre>\n
\u0418 \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043d\u0446\u0435 \u0433\u0434\u0435 \u0431\u044b\u043b\u0430 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043c<\/p>\n
# \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u0443\u044e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044e. ENTRYPOINT [\"\/usr\/src\/app\/entrypoint.sh\" ]<\/code><\/pre>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u043e\u043f\u0430\u0435\u043c \u0441\u043d\u043e\u0432\u0430 \u043a django \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c pip install psycopg2-binary<\/code><\/p>\n
\u0418 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 pip freeze > app\/requirements.txt<\/code><\/p>\n
\u0421\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0435\u0440\u0451\u043c: docker-compose up -d \u2013build<\/code><\/p>\n
\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043b\u043e\u0433 django docker-compose logs | grep djangoapp<\/code><\/p>\n
<\/figcaption><\/figure>\n
\u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d, \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u043b, \u043d\u0430\u0448\u0438 \u0432\u043e\u0440\u043a\u0435\u0440\u044b \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u0440\u0438\u0446\u0435\u043f\u0438\u043b\u0438\u0441\u044c. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0440\u0435\u0430\u043a\u0442 \u0438 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0414\u0430, \u043f\u0440\u043e\u0448\u043b\u044b\u0435 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0433\u0438\u043d\u0443\u043b\u0438, \u043d\u043e \u0432\u0437\u0430\u043c\u0435\u043d \u0443 \u043d\u0430\u0441 \u043d\u043e\u0432\u044b\u0435 \u0441\u0432\u0435\u0436\u0438\u0435 \u0438 \u043a\u0440\u0443\u0442\u044f\u0442\u0441\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0411\u0414. \u0422\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d volume \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0443 postgress \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u0435\u043d\u0443\u0442\u0441\u044f \u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435. \u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043d\u0438 \u043d\u0430 \u0447\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0435 \u043f\u043e\u0432\u043b\u0438\u044f\u0435\u0442, \u0442.\u043a. \u0432\u0441\u0451 \u0443\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435. \u041d\u0443 \u0430 \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u0411\u0414 \u0438\u043b\u0438 volume \u0438 \u0440\u0435\u0448\u0438\u0442\u0435 \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u0447\u0438\u0441\u0442\u043e\u0433\u043e \u043b\u0438\u0441\u0442\u0430, \u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0441\u043d\u043e\u0432\u0430 \u0432\u043d\u0435\u0441\u0451\u0442 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u043d\u0430\u0431\u043e\u0440.<\/p>\n
\u041d\u0443 \u0447\u0442\u043e, \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e nginx. \u0412 \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u0435 \u044f, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043f\u043e\u043a\u0430 \u043f\u043b\u0430\u0432\u0430\u044e, \u043d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c.<\/p>\n
\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0442\u0440\u0435\u0442\u0438\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433, \u0441 \u0438\u043c\u0435\u043d\u0435\u043c nginx<\/code><\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c dockerfile<\/code><\/p>\n
# \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0438\u0437 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u0440\u0430\u0437\u0430 nginx:1.23-alpine FROM nginx:1.23-alpine # \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 RUN rm \/etc\/nginx\/conf.d\/default.conf # \u041f\u043e\u0434\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448 COPY .\/nginx.conf \/etc\/nginx\/conf.d\/<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448 \u043a\u043e\u043d\u0444\u0438\u0433<\/p>\n
nginx.conf<\/code><\/p>\n
upstream django_app {     # \u0421\u043f\u0438\u0441\u043e\u043a \u0431\u044d\u043a\u044d\u043d\u0434 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f     server django:8000; } server {     listen 80;     # \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f     location \/ {         # \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430         # \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u043f\u043e\u0439\u0434\u0443\u0442 \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u0437 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432         # \u0432 upstream django_proj         proxy_pass http:\/\/django_app;         # \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;         proxy_set_header Host $host;         # \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435         proxy_redirect off;     }     # \u0421\u0442\u0430\u0442\u0438\u043a\u0430 \u0438 \u043c\u0435\u0434\u0438\u0430     location \/static\/ {         alias \/home\/src\/app\/static\/;     }     location \/media\/ {         alias \/home\/src\/app\/media\/;    } }<\/code><\/pre>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u0435\u043d\u044c\u043a\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0438\u0441 \u0432 yml<\/p>\n
nginx:     build: .\/nginx     container_name: nginx     networks:       - myNetwork     ports:       - 1337:80     depends_on:       - django     volumes:       - django_static_volume:\/home\/src\/app\/static       - django_media_volume:\/home\/src\/app\/media <\/code><\/pre>\n
\u0410 \u0442\u0430\u043a \u0436\u0435 \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441 django \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c ports: -8000:8000<\/code> \u043d\u0430<\/p>\n
    expose:       - 8000<\/code><\/pre>\n
\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 docker-compose up -d \u2013build<\/code><\/p>\n
\u0418 \u0436\u0434\u0435\u043c \u043f\u043e\u043a\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c.<\/p>\n
<\/figcaption><\/figure>\n
\u0412\u0441\u0451 \u043d\u043e\u0440\u043c, \u043d\u043e \u0433\u0434\u0435 \u0434\u0430\u043d\u043d\u044b\u0435? \u0412\u0441\u0451 \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 react \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442\u0441\u044b\u043b\u0430\u0435\u0442 \u043d\u0430 \u0430\u0434\u0440\u0435\u0441 \u0431\u044d\u043a\u044d\u043d\u0434\u0430 \u043e\u0442 \u0438\u043c\u0435\u043d\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 \u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0418 \u0440\u0430\u043d\u044c\u0448\u0435 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u044d\u043a\u044d\u043d\u0434 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043b \u0441\u0432\u043e\u0439 \u043f\u043e\u0440\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0430\u0440\u0443\u0436\u0443 \u0438 \u0445\u043e\u0441\u0442 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043b \u0441\u0432\u043e\u0439 8000 \u043f\u043e\u0440\u0442 \u043d\u0430 \u043f\u043e\u0440\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u044d\u0442\u043e \u0443\u0431\u0440\u0430\u043b\u0438 \u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 expose: -8000 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0437\u0432\u0435\u0449\u0430\u0435\u0442 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0438\u0445 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f 8000 \u043f\u043e\u0440\u0442, \u043d\u043e \u0438\u0437\u0432\u043d\u0435 \u043d\u0430 \u043d\u0435\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u043f\u0430\u0441\u0442\u044c. \u041d\u043e \u044d\u0442\u0438\u043c \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0432\u043e\u043a\u0440\u0443\u0433, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 nginx.<\/p>\n
\u0421\u043c\u0435\u043d\u0438\u043c \u0430\u0434\u0440\u0435\u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 API \u043d\u0430 \u0440\u0435\u0430\u043a\u0442\u0435, \u0437\u0430\u0445\u043e\u0434\u0438\u043c \u0432 index.js<\/code> \u0438 \u043f\u0440\u0430\u0432\u0438\u043c <\/p>\n
export const API_URL = \"http:\/\/192.168.56.101:1337\/api\/students\/\" export const API_STATIC_MEDIA = \"http:\/\/192.168.56.101:1337\/\"<\/code><\/pre>\n
\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c.<\/p>\n
<\/figcaption><\/figure>\n
\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442! \u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b\u2026<\/p>\n
<\/figcaption><\/figure>\n
\u041a\u043e\u0435-\u0447\u0442\u043e \u044f \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u0437\u0430\u0431\u044b\u043b.<\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0439\u0434\u0435\u043c \u0432 \u0430\u0434\u043c\u0438\u043d\u043a\u0443 django<\/p>\n
<\/figcaption><\/figure>\n
\u041d\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u043d\u0435\u0451, \u043f\u0440\u0430\u0432\u0434\u0430?<\/p>\n
\u0414\u0430, \u044f \u0437\u0430\u0431\u044b\u043b \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u043a\u0443. <\/p>\n
\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432\u0441\u0451 docker-compose down<\/code>,<\/p>\n
\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 django_project<\/code>, \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <\/p>\n
python manage.py collectstatic<\/code><\/p>\n
\u0421\u0442\u0430\u0442\u0438\u043a\u0438 \u0442\u0430\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438 \u043e\u043d\u0430, \u043a\u0430\u043a \u043d\u0438 \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0430 \u0438 \u0440\u0435\u0434\u043a\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0443\u0436\u0435 \u0432\u043d\u0435\u0441\u0435\u043d\u044b.<\/p>\n
\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0442\u043d\u043e <\/p>\n
docker-compose up -d \u2013build<\/code><\/p>\n
\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0430\u0434\u043c\u0438\u043d\u043a\u0443.<\/p>\n
<\/figcaption><\/figure>\n
\u0414\u0430, \u0432\u0441\u0451 \u041e\u041a.<\/p>\n
\u041d\u0443 \u0432\u043e\u0442 \u0432 \u0446\u0435\u043b\u043e\u043c \u0438 \u0432\u0441\u0451. \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 Hello World \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0438 \u0432 \u0446\u0435\u043b\u043e\u043c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c.<\/p>\n
\u0414\u0430, \u0442\u0443\u0442 \u043c\u043d\u043e\u0433\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0435 rmq \u0432\u043e\u0440\u043a\u0435\u0440\u044b \u043e\u0442\u0432\u0430\u043b\u044f\u0442\u0441\u044f \u0438 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u041d\u0430\u0434\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043e \u0438\u0437\u0443\u0447\u0430\u0442\u044c nginx. \u0414\u0430 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e.<\/p>\n
\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442:<\/p>\n
https:\/\/github.com\/eldalex\/ProjectStudent<\/a><\/p>\n
\u0422\u0440\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043d\u044f\u0442\u044c:<\/p>\n
1) git clone https:\/\/github.com\/eldalex\/ProjectStudent<\/code><\/p>\n
\u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 ProjectStudent<\/code><\/p>\n
2) chmod +x django\/django_project\/entrypoint.sh<\/code><\/p>\n
3) docker-compose up -d<\/code><\/p>\n
\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043a\u0440\u0438\u0442\u0438\u043a\u0430 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f) <\/p>\n
\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
  <\/div>\n
  
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/713490\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e web \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 react \u0441 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u043d\u0430 Django, \u0441 \u0411\u0414 \u043d\u0430 postgres, \u0437\u0430\u0439\u0446\u0435\u043c, nginx \u0438 \u0432\u0441\u0451 \u0437\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432 docker.<\/h4>\n
\u0414\u043b\u044f \u043a\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f?  \u041f\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u043c\u0443 \u0441\u0447\u0435\u0442\u0443 \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0435\u0431\u044f, \u0447\u0442\u043e\u0431\u044b \u0445\u043e\u0442\u044c \u043a\u0430\u043a-\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u043d\u0438\u044f \u0432 \u0441\u0432\u043e\u0435\u0439 \u0447\u0435\u0440\u0435\u043f\u0443\u0448\u043a\u0435. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438, \u043a\u0430\u043a \u0438 \u044f \u0441\u0430\u043c. \u0412\u0441\u0451 \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0438\u0436\u0435, \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u0435\u0442 \u043d\u0430 \u0438\u0441\u0442\u0438\u043d\u0443 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u0438. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0442\u0430\u043a, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u044e\u0442. \u041d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0443 \u043c\u0435\u043d\u044f \u043d\u0435 \u0441\u0442\u043e\u044f\u043b\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c enterprise \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0449\u0443\u043f\u0430\u0442\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0442\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u0435\u043d\u044f \u0443\u0441\u0442\u0440\u043e\u0438\u043b.<\/p>\n
\u0414\u043e\u043b\u0436\u0435\u043d \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0434\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 100% \u043b\u0438\u0447\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430. \u042d\u0442\u043e \u043f\u0440\u043e\u0435\u043a\u0442 \u0424\u0440\u0430\u043d\u043a\u0435\u043d\u0448\u0442\u0435\u0439\u043d \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430. \u041e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439 \u044f \u043d\u0435 \u0441\u043c\u043e\u0433 \u043d\u0430\u0439\u0442\u0438, \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0430\u0447\u0430\u043b \u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u0443, \u0447\u0442\u043e\u0431\u044b \u0442\u0435, \u043a\u043e\u043c\u0443 \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u043f\u043e\u0449\u0443\u043f\u0430\u0442\u044c.<\/p>\n
\u041d\u0430\u0447\u043d\u0451\u043c \u043f\u043e\u0436\u0430\u043b\u0443\u0439<\/figcaption><\/figure>\n
\u041d\u0430\u0447\u043d\u0443 \u044f \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n
\u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 WEB \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 React. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432, \u0441 \u043f\u0430\u0447\u043a\u043e\u0439 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043f\u043e\u043b\u0435\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0438\u043c\u044f, \u043f\u043e\u0447\u0442\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u0438 \u043f\u0440\u043e\u0447\u0435\u0435. \u0422\u0430\u043a \u0436\u0435 \u043a \u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a \u0436\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442. \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430, \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0438\u043b\u0438 \u0436\u0435 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n
\u0425\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0448\u0438 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u043f\u043e\u043d\u044f\u043b\u0438 \u0432 \u0411\u0414 postgress, \u0430 \u0432\u043e\u0442 \u0431\u0435\u0440\u0435\u0436\u043d\u043e \u0438\u0445 \u0442\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435\u043c\u0438 \u043b\u044e\u0431\u0438\u043c\u0430\u044f Django \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 Django rest framework.<\/p>\n
<\/figcaption><\/figure>\n
\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0432\u0435\u0431 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. React \u0442\u043e\u043f\u0430\u0435\u0442 \u043d\u0430 Django \u0447\u0435\u0440\u0435\u0437 nginx, \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0441\u0442\u0440\u043e\u0438\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438. \u041c\u044b \u0432\u043e\u043b\u044c\u043d\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e. \u0417\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u0437\u0430\u0447\u0435\u043c \u0432 \u044d\u0442\u043e\u0439 \u0441\u0445\u0435\u043c\u0435 Rabbit \u0438 \u0434\u0432\u0430 worker\u2019\u0430? \u0412\u0441\u0451 \u0434\u0435\u043b\u043e \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438\/\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0444\u043e\u0440\u043c\u0443, \u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u044f\u0442\u0441\u044f, \u043d\u0435 \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041d\u043e \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u0438 \u043c\u044b \u0440\u0435\u0448\u0438\u043c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u0438\u0442\u044c, \u0442\u043e \u0432\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u0431\u0443\u0440\u043d\u043e\u0439 \u0434\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u043c\u044f, \u0438 \u043f\u043e\u043b\u0435 photo \u043d\u0430\u0448\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u044c \u043a \u043d\u0435\u043c\u0443. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043d\u0430 rabbit \u0438 \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0442\u0443\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c. Worker \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0435\u0433\u043e, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0448\u043b\u0451\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c. \u0412\u0442\u043e\u0440\u043e\u0439 worker \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0435\u0433\u043e \u0438 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043f\u043e \u0443\u0436\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u043c\u0443 \u0432\u044b\u0448\u0435 \u043f\u0443\u0442\u0438. \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0443\u0439\u0442\u0438 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f, \u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u043b\u0438\u0431\u043e \u0441\u0440\u0430\u0437\u0443, \u043b\u0438\u0431\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.   <\/p>\n
\u0412\u043e\u0442 \u0432 \u0446\u0435\u043b\u043e\u043c \u0438 \u0432\u0441\u0451.\u00a0 \u0427\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. <\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043a \u0434\u0435\u043b\u0443, \u044f \u0432\u0441\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0434\u0435\u043b\u044b\u0432\u0430\u043b \u043d\u0430 windows, \u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u043b \u0443\u0436\u0435 \u043d\u0430 centos. <\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n
\u042f \u043d\u0430\u0437\u0432\u0430\u043b \u0435\u0433\u043e ProjectStudent.<\/p>\n
1) Django.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0434\u043b\u044f Django \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u043d\u0435\u0433\u043e.<\/p>\n
\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u044d\u0442\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 PowerShell (\u0438\u043b\u0438 cmd, \u043a\u043e\u043c\u0443 \u043a\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u0435\u0435. \u0412 bash \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f)<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0438 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e<\/p>\n
python3 -m venv --copies .\/env .\\env\\Scripts\\activate<\/code><\/pre>\n
\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Django, \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n
pip install Django django-admin startproject django_project python manage.py startapp students<\/code><\/pre>\n
\u0418\u0437 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043d\u0430\u043c \u0435\u0449\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0432 Django \u0441\u0440\u0430\u0437\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c djangorestframework \u0438 django-cors-headers<\/p>\n
pip install django djangorestframework django-cors-headers<\/code><\/pre>\n
\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c.<\/p>\n
\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b django\\django_project\\django_project\\settings.py<\/p>\n
\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, middleware<\/p>\n
import os from pathlib import Path from os import environ  INSTALLED_APPS = [     ...     'rest_framework',     'corsheaders',     'students' ]  MIDDLEWARE = [     ...     'corsheaders.middleware.CorsMiddleware',     'django.middleware.common.CommonMiddleware', ]<\/code><\/pre>\n
CORS_ORIGIN_ALLOW_ALL\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0434\u043e\u043b\u0436\u0435\u043d \u043b\u0438 Django \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u0440\u044b\u0442 \u0438\u043b\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043a\u0440\u044b\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u0430\u043c \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0433\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c.<\/p>\n
CORS_ORIGIN_ALLOW_ALL = True<\/code><\/pre>\n
\u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u043a\u0438<\/p>\n
STATIC_URL = '\/static\/' STATIC_ROOT = os.path.join(BASE_DIR, 'static')  MEDIA_URL = '\/media\/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media')<\/code><\/pre>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n
\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c django\\django_project\\students\\models.py <\/p>\n
\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043c\u043e\u0434\u0435\u043b\u044c<\/p>\n
from django.db import models  class Student(models.Model):     name = models.CharField(\"Name\", max_length=240)     email = models.EmailField()     document = models.CharField(\"Document\", max_length=20)     phone = models.CharField(max_length=20)     registrationDate = models.DateField(\"Registration Date\", auto_now_add=True)     photo = models.CharField(\"URL\", max_length=512)      def __str__(self):         return self.name<\/code><\/pre>\n
\u0413\u043e\u0442\u043e\u0432\u043e. \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432\u0441\u0451 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b\u044b \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0438 \u043c\u0438\u0433\u0440\u0438\u0440\u0443\u0435\u043c.<\/p>\n
Python manage.py makemigrations python manage.py migrate<\/code><\/pre>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u0444\u0438\u043a\u0441\u0442\u0443\u0440\u0430\u043c\u0438, \u0441\u0440\u0430\u0437\u0443 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u0443\u0434\u0430.<\/p>\n
python manage.py makemigrations --empty --name students students<\/code><\/pre>\n
\u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0444\u0430\u0439\u043b django\\django_project\\students\\migrations\\0002_students.py<\/p>\n
\u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043c \u0435\u0433\u043e \u043a \u0442\u0430\u043a\u043e\u043c\u0443 \u0432\u0438\u0434\u0443:<\/p>\n
from django.db import migrations  def create_data(apps, schema_editor):     Student = apps.get_model('students', 'Student')     Student(name=\"Joe Silver\", email=\"joe@email.com\", document=\"22342342\", phone=\"00000000\", photo='media\/photo\/nophoto.png').save()     Student(name=\"John Smith\", email=\"john@email.com\", document=\"11111111\", phone=\"11111111\", photo='media\/photo\/nophoto.png').save()     Student(name=\"Alex Smth\", email=\"alex@email.com\", document=\"22222222\", phone=\"22222222\", photo='media\/photo\/nophoto.png').save()     Student(name=\"Kira Night\", email=\"kira@email.com\", document=\"33333333\", phone=\"33333333\", photo='media\/photo\/nophoto.png').save()     Student(name=\"Amanda Lex\", email=\"amanda@email.com\", document=\"44444444\", phone=\"44444444\", photo='media\/photo\/nophoto.png').save()     Student(name=\"Oni Musha\", email=\"oni@email.com\", document=\"44444444\", phone=\"44444444\", photo='media\/photo\/nophoto.png').save()  class Migration(migrations.Migration):      dependencies = [         ('students', '0001_initial'),     ]      operations = [         migrations.RunPython(create_data),     ] <\/code><\/pre>\n
\u0418 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044e<\/p>\n
python manage.py migrate<\/code><\/pre>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432.<\/p>\n
\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043d\u0430\u0448\u0435\u043c\u0443 api<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u043d\u0430\u0448\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u0444\u0430\u0439\u043b django\\django_project\\students\\serializers.py<\/p>\n
from rest_framework import serializers from .models import Student  class StudentSerializer(serializers.ModelSerializer):      class Meta:         model = Student          fields = ('pk', 'name', 'email', 'document', 'phone', 'registrationDate','photo') <\/code><\/pre>\n
\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0432 uls.py, \u0430\u0434\u0440\u0435\u0441\u0430 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c django\\django_project\\django_project\\urls.py <\/p>\n
\u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e re_path, \u043d\u0430\u0448\u0435 \u0441\u0442\u0443\u0434\u0435\u043d\u0447\u0435\u0441\u043a\u043e\u0435 view \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u043a\u0438.<\/p>\n
from django.contrib import admin from django.urls import path, re_path from students import views from django.conf import settings from django.conf.urls.static import static  urlpatterns = [     path('admin\/', admin.site.urls),     re_path(r'^api\/students\/$', views.students_list),     re_path(r'^api\/students\/(\\d+)$', views.students_detail), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a view<\/p>\n
\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c django\\django_project\\students\\views.py<\/p>\n
from rest_framework.response import Response from rest_framework.decorators import api_view from rest_framework import status from .serializers import *  # Create your views here.  @api_view(['GET', 'POST']) def students_list(request):     if request.method == 'GET':         data = Student.objects.all()         serializer = StudentSerializer(data, context={'request': request}, many=True)         return Response(serializer.data)     elif request.method == 'POST':         print('post')         serializer = StudentSerializer(data=request.data)         if serializer.is_valid():             serializer.save()             return Response(status=status.HTTP_201_CREATED)         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)  @api_view(['PUT', 'DELETE']) def students_detail(request, pk):     try:         student = Student.objects.get(pk=pk)     except Student.DoesNotExist:         return Response(status=status.HTTP_404_NOT_FOUND)     if request.method == 'PUT':         serializer = StudentSerializer(student, data=request.data, context={'request': request})         if serializer.is_valid():             serializer.save()             return Response(status=status.HTTP_204_NO_CONTENT)         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)     elif request.method == 'DELETE':         student.delete()         return Response(status=status.HTTP_204_NO_CONTENT)  <\/code><\/pre>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n
\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440<\/p>\n
python manage.py runserver<\/code><\/pre>\n
\u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 http:\/\/127.0.0.1:8000\/api\/students\/<\/a><\/p>\n
<\/figcaption><\/figure>\n
\u0412\u0438\u0434\u0438\u043c \u043d\u0430\u0448\u0438\u0445 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432. \u0417\u043d\u0430\u0447\u0438\u0442 \u0432\u0441\u0451 \u043e\u043a!<\/p>\n
\u0422\u0430\u043a \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u0441 django \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a react.<\/p>\n
\u0422\u0430\u043c \u043f\u0438\u0441\u0430\u043d\u0438\u043d\u044b \u043f\u043e\u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442, \u043d\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043a\u043e\u0434. \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/p>\n
\u041a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435?<\/p>\n
App \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0434\u0432\u0443\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, Header \u0438 Home. \u0412 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c Home \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 ListStudents \u0438 ModalStudent (\u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430)<\/p>\n
<\/figcaption><\/figure>\n
\u0412\u044b\u0445\u043e\u0434\u0438\u043c \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443<\/p>\n
npx create-react-app reactapp<\/code><\/pre>\n
\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0430\u0440\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 <\/p>\n
npm i axios reactstrap bootstrap<\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u043e\u0441\u044c, \u043d\u0430\u0447\u043d\u0435\u043c \u043d\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 src \u043a\u0430\u0442\u0430\u043b\u043e\u0433 components, \u0438 \u0432 \u043f\u043e\u0434\u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438 app, appHeader, appHome, appListStudents, appModalStudent, appPhotoModal, appRemoveStudent,appStudentForm.<\/p>\n
\u041a\u0430\u043a \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0438 \u0444\u0430\u0439\u043b\u0435. <\/p>\n
\u0412 app \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0438\u043c, \u043f\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u043e js \u0444\u0430\u0439\u043b\u0443 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439.<\/p>\n
\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a.<\/figcaption><\/figure>\n
\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043a \u043a\u043e\u0434\u0443 react \u044f \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e \u043d\u0435 \u0434\u0435\u043b\u0430\u043b, \u0442\u0430\u043c \u0432\u0441\u0451 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0422\u0430\u043c \u0433\u0434\u0435 \u044f \u044d\u0442\u043e \u043f\u043e\u0434\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445, \u043d\u043e<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-344644","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/344644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=344644"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/344644\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=344644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=344644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=344644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}