{"id":316467,"date":"2021-01-16T21:00:28","date_gmt":"2021-01-16T21:00:28","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=316467"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=316467","title":{"rendered":"\u041f\u0438\u0448\u0435\u043c \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440 \u043d\u0430 Vue \u0432 \u043e\u0431\u043b\u0430\u043a\u0435 Amazon"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u043b\u0430\u0447\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 Amazon \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f&nbsp;\u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430 <code>Chatty<\/code>\u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0447\u0430\u0442-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u043d\u0430\u0442\u043e\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Vue \u0438&nbsp;<a href=\"https:\/\/aws-amplify.github.io\/\" rel=\"noopener noreferrer nofollow\">AWS Amplify<\/a>. \u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/264\/c6a\/353\/264c6a353daecfe38b048c7cb6b8ef7e.png\" width=\"1312\" height=\"1054\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c:<\/p>\n<ul>\n<li>\n<p>\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>GraphQL API \u0441 AWS AppSync<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Amplify DataStore<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0441\u043e\u043b\u044c Amplify<\/p>\n<\/li>\n<li>\n<p>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043d\u0435\u0438\u0441\u043f\u0440\u0430\u0432\u043d\u043e\u0441\u0442\u0435\u0439<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0443\u0442: <a href=\"https:\/\/master.d58xs5f4j0v44.amplifyapp.com\/\" rel=\"noopener noreferrer nofollow\">https:\/\/master.d58xs5f4j0v44.amplifyapp.com\/<\/a><\/p>\n<\/blockquote>\n<p>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f: <\/p>\n<ul>\n<li>\n<p>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0437\u0430 $1 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445 Amazon AWS \u0443\u0436\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0430<\/p>\n<\/li>\n<li>\n<p>\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 Visual Studio Code \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d, \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d npm:<\/p>\n<ul>\n<li>\n<p>Node:&nbsp;<code>14.7.0<\/code>. Visit&nbsp;<a href=\"https:\/\/nodejs.org\/en\/download\/current\/\" rel=\"noopener noreferrer nofollow\">Node<\/a><\/p>\n<\/li>\n<li>\n<p>npm:&nbsp;<code>6.14.7<\/code>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><code class=\"nginx\">npm install -g npm<\/code><\/pre>\n<h3>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b &#8212; \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c, \u043d\u0430\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Vue \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f:<\/p>\n<pre><code class=\"nginx\">npm install -g @vue\/cli vue create amplify-datastore<\/code><\/pre>\n<ul>\n<li>\n<p>?&nbsp;<strong>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435<\/strong>&nbsp;\u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443: \u043f\u043e&nbsp;<strong>\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e [Vue 2] (babel, eslint)<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043d\u043e\u0432\u044b\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043e\u043d\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e.<\/p>\n<pre><code class=\"nginx\">cd amplify-datastore  npm run serve<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Vue.js \u043e\u0442\u043a\u0440\u044b\u043b\u043e\u0441\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u043a\u043e\u0434<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c3a\/953\/7a4\/c3a9537a4b1bcaf13841255e3f22aafc.png\" width=\"1280\" height=\"984\"><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 C:\\Users\\Admin\\amplify-datastore&gt; \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 Visual Studio Code:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0d3\/9ae\/163\/0d39ae163e39979d131cb5a372603d20.png\" alt=\"\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a LF\" title=\"\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a LF\" width=\"1280\" height=\"984\"><figcaption>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a LF<\/figcaption><\/figure>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Vue, \u0438 \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e. <\/p>\n<p>\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e CTRL+C \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c. <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c API AWS Amplify \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 AWS Amplify Vue:<\/p>\n<pre><code class=\"nginx\">npm install --save aws-amplify @aws-amplify\/ui-vue moment<\/code><\/pre>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 AWS Amplify<\/h4>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 AWS Amplify:<\/p>\n<pre><code class=\"nginx\">npm install -g @aws-amplify\/cli<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c CLI \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u0443\u0447\u0435\u0442\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438:<\/p>\n<pre><code class=\"nginx\">amplify configure<\/code><\/pre>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0438\u0434\u0435\u043e-\u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0443 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0449\u0435\u043b\u043a\u043d\u0438\u0442\u0435&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=fWbM5DLh25U\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>&nbsp;.<\/p>\n<\/blockquote>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c&nbsp;<code>amplify configure<\/code>\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443.&nbsp;\u041f\u043e\u0441\u043b\u0435 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c AWS \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0439\u0442\u0435:<\/p>\n<ul>\n<li>\n<p>\u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043e\u043d AWS:&nbsp;<strong>eu-central-1 (\u0424\u0440\u0430\u043d\u043a\u0444\u0443\u0440\u0442)<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f IAM:&nbsp;<strong>ampify-datastore<\/strong><\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 AWS \u043d\u0430\u0436\u043c\u0438\u0442\u0435&nbsp;<strong>\u0414\u0430\u043b\u0435\u0435: \u0420\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/strong>&nbsp;,&nbsp;<strong>\u0414\u0430\u043b\u0435\u0435: \u0422\u0435\u0433\u0438<\/strong>&nbsp;,&nbsp;<strong>\u0414\u0430\u043b\u0435\u0435: \u041e\u0431\u0437\u043e\u0440<\/strong>&nbsp;\u0438&nbsp;<strong>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f,<\/strong>&nbsp;\u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f IAM.&nbsp;\u0417\u0430\u0442\u0435\u043c \u0432\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 Enter.<\/p>\n<\/blockquote>\n<ul>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u043b\u044e\u0447 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0432\u043d\u043e\u0432\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n<p>accessKeyId:&nbsp;<strong>(&lt;YOUR<em>ACCESS<\/em>KEY<em>ID&gt;)<\/em><\/strong><em>secretAccessKey:&nbsp;<\/em><strong><em>(&lt;YOUR<\/em>SECRET<em>ACCESS<\/em>KEY&gt;)<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0418\u043c\u044f \u043f\u0440\u043e\u0444\u0438\u043b\u044f: \u043f\u043e&nbsp;<strong>\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/strong><\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f IAM, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443&nbsp;https:\/\/console.aws.amazon.com\/iam\/home?region=eu-central-1#\/users&nbsp;.&nbsp;\u0422\u0430\u043a\u0436\u0435 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0430\u0448 \u0440\u0435\u0433\u0438\u043e\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u044b\u0431\u043e\u0440\u0443.<\/p>\n<\/blockquote>\n<h4>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h4>\n<pre><code class=\"nginx\">amplify init<\/code><\/pre>\n<ul>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:&nbsp;<strong>ampifydatastore<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043c\u044f \u0434\u043b\u044f \u0441\u0440\u0435\u0434\u044b:&nbsp;<strong>dev<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:&nbsp;<strong>Visual Studio Code<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0438\u043f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435&nbsp;<strong>javascript<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a\u0443\u044e \u0441\u0440\u0435\u0434\u0443 JavaScript \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435&nbsp;<strong>vue<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041f\u0443\u0442\u044c \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443:&nbsp;<strong>src<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041f\u0443\u0442\u044c \u043a&nbsp;<strong>\u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443<\/strong>&nbsp;\u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044f:&nbsp;<strong>dist<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u0431\u043e\u0440\u043a\u0438:&nbsp;<strong>npm run-script build<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430:&nbsp;<strong>npm run-script serve<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044c AWS? <strong>\u0434\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <strong>\u043f\u043e<\/strong> <strong>\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 AWS Amplify \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0438 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443:&nbsp;<strong>ampify<\/strong>&nbsp;.&nbsp;\u0424\u0430\u0439\u043b\u044b \u0432 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<pre><code class=\"nginx\">&lt;amplify-app&gt;     |_ amplify       |_ .config       |_ #current-cloud-backend       |_ backend       team-provider-info.json<\/code><\/pre>\n<h2>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0432 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 Amplify, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"nginx\">amplify add auth<\/code><\/pre>\n<blockquote>\n<p>\u041f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435<\/p>\n<\/blockquote>\n<ul>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u043f\u043e&nbsp;<strong>\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/strong>&nbsp;?:&nbsp;<strong>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u043b\u0438 \u0432\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0443\u043b\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Cognito ?:&nbsp;<strong>\u0418\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b?&nbsp;<strong>\u0414\u0430, \u044f \u0445\u043e\u0447\u0443 \u0432\u043d\u0435\u0441\u0442\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0434\u043b\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438?&nbsp;(\u041d\u0430\u0436\u043c\u0438\u0442\u0435 &lt;\u043f\u0440\u043e\u0431\u0435\u043b&gt;, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0440\u0430\u0442\u044c, &lt;a&gt;, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0441\u0435, &lt;i&gt;, \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435):&nbsp;<strong>\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439?&nbsp;(\u041d\u0430\u0436\u043c\u0438\u0442\u0435 &lt;\u043f\u0440\u043e\u0431\u0435\u043b&gt;, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0440\u0430\u0442\u044c, &lt;a&gt;, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0441\u0435, &lt;i&gt;, \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435):&nbsp;<strong>\u041d\u0435\u0442<\/strong><\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0436\u043c\u0438\u0442\u0435&nbsp;<code>Enter<\/code>\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u043e\u043f\u0446\u0438\u044e.<\/p>\n<\/blockquote>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 push, \u0438 \u043e\u0431\u043b\u0430\u0447\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0432 \u043d\u0430\u0448\u0435\u0439 \u0443\u0447\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 AWS.<\/p>\n<pre><code>amplify push   Current Environment: dev | Category | Resource name      | Operation | Provider plugin   | | -------- | ------------------ | --------- | ----------------- | | Auth     | amplifyappuuid     | Create    | awscloudformation | ? Are you sure you want to continue? Yes<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439&nbsp;<strong>\u043f\u0443\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Cognito,<\/strong>&nbsp;\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c:<\/p>\n<pre><code>amplify status<\/code><\/pre>\n<blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a&nbsp;<strong>\u043a\u043e\u043d\u0441\u043e\u043b\u0438 AWS Cognito<\/strong>&nbsp;\u0432 \u043b\u044e\u0431\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443&nbsp;<a href=\"https:\/\/console.aws.amazon.com\/cognito\/\" rel=\"noopener noreferrer nofollow\">https:\/\/console.aws.amazon.com\/cognito\/<\/a>&nbsp;.<\/p>\n<\/blockquote>\n<h2>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Vue<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u044b, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c!<\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Vue, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0441\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u043e \u043e \u043d\u0430\u0448\u0435\u043c \u043d\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 AWS Amplify.&nbsp;\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u043e\u0431\u0440\u0430\u0442\u0438\u0432\u0448\u0438\u0441\u044c \u043a \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443&nbsp;<code>aws-exports.js<\/code>\u0444\u0430\u0439\u043b\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 <code>src<\/code>\u043f\u0430\u043f\u043a\u0435.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435&nbsp;<strong>main.js<\/strong>&nbsp;\u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">import Vue from 'vue' import App from '.\/App.vue'  import Amplify from 'aws-amplify'; import '@aws-amplify\/ui-vue'; import aws_exports from '.\/aws-exports';  Amplify.configure(aws_exports);  Vue.config.productionTip = false  new Vue({   render: h =&gt; h(App), }).$mount('#app')<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 AWS.<\/p>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/h4>\n<p>AWS Amplify \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.&nbsp;\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043f\u0440\u043e\u0435\u043a\u0442<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Authenticator, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0435\u0433\u043e \u0432&nbsp;<strong>src \/ App.vue<\/strong>&nbsp;:<\/p>\n<pre><code class=\"java\">&lt;template&gt;   &lt;div id=\"app\"&gt;     &lt;amplify-authenticator&gt;       &lt;div&gt;         &lt;h1&gt;Hey, {{user.username}}!&lt;\/h1&gt;         &lt;amplify-sign-out&gt;&lt;\/amplify-sign-out&gt;       &lt;\/div&gt;     &lt;\/amplify-authenticator&gt;   &lt;\/div&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u0442\u043e\u043a \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0448\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.&nbsp;\u042d\u0442\u043e\u0442 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0432\u043e\u0439\u0442\u0438 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/p>\n<blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0441\u0435\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0432\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u043d\u0430&nbsp;\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f&nbsp;<strong>Cognito \u043f\u043e<\/strong>&nbsp;\u0430\u0434\u0440\u0435\u0441\u0443&nbsp;<a href=\"https:\/\/console.aws.amazon.com\/cognito\/\" rel=\"noopener noreferrer nofollow\">https:\/\/console.aws.amazon.com\/cognito\/<\/a>&nbsp;.&nbsp;<\/p>\n<\/blockquote>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/p>\n<pre><code>amplify console auth<\/code><\/pre>\n<h4>\u0414\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/h4>\n<p>\u041f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e,&nbsp;<code>onAuthUIStateChange<\/code>\u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d \u0432\u043e\u0448\u0435\u043b \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">&lt;script&gt; import { AuthState, onAuthUIStateChange } from '@aws-amplify\/ui-components'  export default {   name: 'app',   data() {     return {       user: { },     }   },   created() {     \/\/ authentication state managament     onAuthUIStateChange((state, user) =&gt; {       \/\/ set current user and load data after login       if (state === AuthState.SignedIn) {         this.user = user;       }     })   } } &lt;\/script&gt;<\/code><\/pre>\n<h3>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 GraphQL API<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c GraphQL API, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>amplify add api<\/code><\/pre>\n<p>\u041e\u0442\u0432\u0435\u0442\u044c\u0442\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043e\u0434\u043d\u0443 \u0438\u0437 \u043d\u0438\u0436\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0441\u043b\u0443\u0436\u0431&nbsp;<strong>GraphQL<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u0438\u043c\u044f API:&nbsp;<strong>ChattyAPI<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0438\u043f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f&nbsp;<strong>\u043a\u043b\u044e\u0447\u0430<\/strong>&nbsp;API&nbsp;<strong>API<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0430 API:&nbsp;<strong>(\u043f\u0443\u0441\u0442\u043e)<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0427\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043d\u0435\u0439 \u0438\u0441\u0442\u0435\u0447\u0435\u0442 \u0441\u0440\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043b\u044e\u0447\u0430 API (1-365):&nbsp;<strong>7<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f GraphQL API?&nbsp;<strong>\u0414\u0430, \u044f \u0445\u043e\u0447\u0443 \u0432\u043d\u0435\u0441\u0442\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438?&nbsp;<strong>N<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432?&nbsp;<strong>Y<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e&nbsp;<strong>Auto Merge<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438? <strong>N<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0423 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0430\u043d\u043d\u043e\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 GraphQL? <strong>N<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0445\u0435\u043c\u044b? <strong>Y<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0427\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442: <strong>\u043e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00abTodo\u00bb \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c, \u0438\u043c\u0435\u043d\u0435\u043c, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c)<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0445\u0435\u043c\u0443 \u0441\u0435\u0439\u0447\u0430\u0441? <strong>Y<\/strong><\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0436\u043c\u0438\u0442\u0435&nbsp;<code>Enter<\/code>.<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u041f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0441\u0445\u0435\u043c\u0443 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e:<\/p>\n<\/blockquote>\n<pre><code>type Chatty @model {   id: ID!   user: String!   message: String!   createdAt: AWSDateTime }<\/code><\/pre>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0434\u0430\u0442\u043e\u0439 \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<\/p>\n<blockquote>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 \u0441\u0445\u0435\u043c\u044b!<\/p>\n<\/blockquote>\n<p>\u0417\u0430\u0442\u0435\u043c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0432 \u043d\u0430\u0448\u0443 \u0443\u0447\u0435\u0442\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n<pre><code>amplify push<\/code><\/pre>\n<ul>\n<li>\n<p>\u0412\u044b \u0443\u0432\u0435\u0440\u0435\u043d\u044b \u0447\u0442\u043e \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c?&nbsp;<strong>\u0434\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0434\u043b\u044f \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e GraphQL API?&nbsp;<strong>\u0414\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u044f\u0437\u044b\u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430&nbsp;<strong>javascript<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u0438\u043c\u0435\u043d\u0438 \u0444\u0430\u0439\u043b\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043c\u0443\u0442\u0430\u0446\u0438\u0439 \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a&nbsp;<strong>graphql src \/ graphql \/ ** \/ *. Js<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \/ \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 GraphQL &#8212; \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438?&nbsp;<strong>\u0414\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0433\u043b\u0443\u0431\u0438\u043d\u0443 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 [\u0443\u0432\u0435\u043b\u0438\u0447\u044c\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 \u0441\u0445\u0435\u043c\u0430 \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u0430]&nbsp;<strong>2<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430&nbsp;<strong>\u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 GraphQL<\/strong>&nbsp;\u0438&nbsp;<strong>\u041a\u041b\u042e\u0427 API<\/strong>&nbsp;.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0448\u0430\u0433\u0435 \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u043e\u0432\u044b\u0439 API AWS AppSync.&nbsp;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0438\u0436\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f AWS AppSync.&nbsp;\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0430\u0448 \u0440\u0435\u0433\u0438\u043e\u043d \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439.<\/p>\n<pre><code>amplify console api<\/code><\/pre>\n<ul>\n<li>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043e\u0434\u043d\u0443 \u0438\u0437 \u043d\u0438\u0436\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0441\u043b\u0443\u0436\u0431&nbsp;<strong>GraphQL<\/strong><\/p>\n<\/li>\n<\/ul>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Amplify DataStore<\/h3>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Amplify DataStore<\/h4>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code>npm install --save @aws-amplify\/core @aws-amplify\/datastore<\/code><\/pre>\n<h4>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445<\/h4>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043d\u0430\u0448\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e&nbsp;<strong>ChattyAPI.<\/strong><\/p>\n<pre><code>amplify codegen models<\/code><\/pre>\n<blockquote>\n<p>\u0412\u0430\u0436\u043d\u043e: \u041d\u0415 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u043d\u043e\u0441\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0432\u043e\u044e \u0441\u0445\u0435\u043c\u0443.<\/p>\n<\/blockquote>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 AWS Amplify \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u0432 \u0441\u0432\u043e\u0435\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0435:&nbsp;<strong>models<\/strong>&nbsp;.&nbsp;\u0424\u0430\u0439\u043b\u044b \u0432 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0441\u0445\u0435\u043c\u0443 \u0432\u0430\u0448\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<pre><code>&lt;amplify-app&gt;     |_ src       |_ models<\/code><\/pre>\n<blockquote>\n<p>\u0421\u0430\u043c\u044b\u0435 \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043b\u0438\u0432\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <a href=\"https:\/\/github.com\/lazy-fox-code\/amplify-datastore\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/lazy-fox-code\/amplify-datastore<\/a> \u0438 \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c \u043a\u0443\u0434\u0430 \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 App.vue \u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b.<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 App.vue \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0448\u0430\u0431\u043b\u043e\u043d &lt;template&gt; \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0431\u043b\u043e\u043a\u0438 &lt;div&nbsp;id=&#187;app&#187;&gt; \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438, \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438, \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u043f\u0440\u043e\u0447\u0438\u043c\u0438 \u0434\u0435\u0442\u0430\u043b\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0417\u0430\u0442\u0435\u043c \u0438\u0434\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b &lt;script&gt; \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0417\u0430\u0442\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u0441\u0442\u0438\u043b\u0438 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/blockquote>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 GraphQL API \u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u044b, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u043d\u0438\u043c\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c!<\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c, \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c.<\/p>\n<pre><code class=\"javascript\">import { DataStore } from \"@aws-amplify\/datastore\"; import { Chatty } from \".\/models\";  await DataStore.save(new Chatty({   user: \"amplify-user\",   message: \"Hi everyone!\",   createdAt: new Date().toISOString() }))<\/code><\/pre>\n<p>\u042d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0437\u0430\u043f\u0438\u0441\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0432 \u0432\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0435\u0435 \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e API GraphQL.<\/p>\n<h4>\u0417\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445<\/h4>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Amplify DataStore.&nbsp;\u0427\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043d\u0430\u0448\u0443 \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043f\u0440\u0435\u0434\u0438\u043a\u0430\u0442, \u0447\u0442\u043e\u0431\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0432\u0441\u0435 \u0437\u0430\u043f\u0438\u0441\u0438.<\/p>\n<pre><code class=\"javascript\">import { DataStore, Predicates } from \"@aws-amplify\/datastore\"; import { Chatty } from \".\/models\";  const messages = await DataStore.query(Chatty, Predicates.ALL);<\/code><\/pre>\n<p>\u042d\u0442\u043e \u0432\u0435\u0440\u043d\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.<\/p>\n<p>\u041f\u0440\u0435\u0434\u0438\u043a\u0430\u0442\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u043a\u0438, \u0447\u0438\u0441\u043b\u0430 \u0438 \u0441\u043f\u0438\u0441\u043a\u0438.<\/p>\n<blockquote>\n<p>\u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u0432\u0441\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0432&nbsp;<a href=\"https:\/\/aws-amplify.github.io\/docs\/js\/datastore#query-with-predicates\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;\u0417\u0430\u043f\u0440\u043e\u0441 \u0441 \u043f\u0440\u0435\u0434\u0438\u043a\u0430\u0442\u0430\u043c\u0438&#187;<\/a><\/p>\n<\/blockquote>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 UI<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0447\u0430\u0442\u0430.<\/p>\n<pre><code class=\"javascript\">&lt;template&gt;   &lt;div v-for=\"message of sorted\" :key=\"message.id\"&gt;     &lt;div&gt;{{ message.user }} - {{ moment(message.createdAt).format('YYYY-MM-DD HH:mm:ss')}})&lt;\/div&gt;     &lt;div&gt;{{ message.message }}&lt;\/div&gt;   &lt;\/div&gt; &lt;\/template&gt; &lt;script&gt; import { Auth } from \"aws-amplify\"; import { DataStore, Predicates } from \"@aws-amplify\/datastore\"; import { Chatty } from \".\/models\"; import moment from \"moment\";  export default {   name: 'app',   data() {     return {       user: {},       messages: [],     }   },   computed: {     sorted() {       return [...this.messages].sort((a, b) =&gt; -a.createdAt.localeCompare(b.createdAt));     }   },   created() {     this.currentUser();   },   methods: {     moment: () =&gt; moment(),     currentUser() {       Auth.currentAuthenticatedUser().then(user =&gt; {         this.user = user;         this.loadMessages();       });     },     loadMessages() {       DataStore.query(Chatty, Predicates.ALL).then(messages =&gt; {         this.messages = messages;       });     },   } } &lt;\/script&gt;<\/code><\/pre>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">&lt;template&gt;   &lt;form v-on:submit.prevent&gt;     &lt;input v-model=\"form.message\" placeholder=\"Enter your message...\" \/&gt;     &lt;button @click=\"sendMessage\"&gt;Send&lt;\/button&gt;   &lt;\/form&gt; &lt;\/template&gt; &lt;script&gt; export default {   data() {     return {       form: {},     };   },    methods: {     sendMessage() {       const { message } = this.form       if (!message) return;       DataStore.save(new Chatty({         user: this.user.username,         message: message,         createdAt: new Date().toISOString()       })).then(() =&gt; {         this.form = { message: '' };         this.loadMessages();       }).catch(e =&gt; {         console.log('error creating message...', e);       });     },   } } &lt;\/script&gt;<\/code><\/pre>\n<h3>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439<\/h3>\n<p>\u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Amplify DataStore \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0438\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439.<\/p>\n<p>\u0421\u043c. \u041d\u0438\u0436\u0435, \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c delete \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u0440\u0435\u0434\u0438\u043a\u0430\u0442\u043e\u043c \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439.<\/p>\n<pre><code class=\"javascript\">DataStore.delete(Chatty, Predicates.ALL).then(() =&gt; {   console.log('messages deleted!'); });<\/code><\/pre>\n<h4>\u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 GraphQL<\/h4>\n<p>\u0417\u0430\u0442\u0435\u043c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043d\u0430\u0448\u0435\u043c API.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d, \u043c\u044b \u043e\u0442\u043a\u0430\u0436\u0435\u043c\u0441\u044f \u043e\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0443\u0442\u0435\u0447\u043a\u0438 \u043f\u0430\u043c\u044f\u0442\u0438.<\/p>\n<pre><code class=\"javascript\">&lt;script&gt; export default {   data() {     return {       subscription: undefined;     };   },   created() {     \/\/Subscribe to changes     this.subscription = DataStore.observe(Chatty).subscribe(msg =&gt; {       console.log(msg.model, msg.opType, msg.element);       this.loadMessages();     });   },    destroyed() {     if (!this.subscription) return;     this.subscription.unsubscribe();   }, } &lt;\/script&gt;<\/code><\/pre>\n<h3>\u0420\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0441\u043e\u043b\u044c Amplify<\/h3>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044e \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430 Amplify CLI, \u043d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 CI\/CD?&nbsp;\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/aws.amazon.com\/amplify\/console\/\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043d\u0441\u043e\u043b\u044c Amplify<\/a>&nbsp;\u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e&nbsp;<a href=\"https:\/\/github.com\/new\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 GitHub<\/a>&nbsp;\u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.&nbsp;\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0440\u0435\u043f\u043e, \u043c\u044b \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c URL-\u0430\u0434\u0440\u0435\u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0431\u0443\u0444\u0435\u0440 \u043e\u0431\u043c\u0435\u043d\u0430 \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c git \u0432 \u043d\u0430\u0448\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435:<\/p>\n<pre><code>git init  git remote add origin git@github.com:username\/project-name.git  git add .  git commit -m 'initial commit'  git push origin master<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043f\u043e\u0441\u0435\u0442\u0438\u043c \u043a\u043e\u043d\u0441\u043e\u043b\u044c Amplify \u0432 \u043d\u0430\u0448\u0435\u0439 \u0443\u0447\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 AWS \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443&nbsp;<a href=\"https:\/\/eu-central-1.console.aws.amazon.com\/amplify\/home\" rel=\"noopener noreferrer nofollow\">https:\/\/eu-central-1.console.aws.amazon.com\/amplify\/home<\/a>&nbsp;.<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043d\u0430\u0436\u043c\u0435\u043c \u00ab&nbsp;<strong>\u041d\u0430\u0447\u0430\u0442\u044c\u00bb,<\/strong>&nbsp;\u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435.&nbsp;\u0417\u0430\u0442\u0435\u043c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0443\u0439\u0442\u0435 Github \u043a\u0430\u043a \u0441\u043b\u0443\u0436\u0431\u0443 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f.<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0438 \u0432\u0435\u0442\u043a\u0443 \u0434\u043b\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0430\u0436\u043c\u0435\u043c&nbsp;<strong>Next<\/strong>&nbsp;.<\/p>\n<p>\u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u0440\u043e\u043b\u044c \u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u044d\u0442\u043e\u0439 \u0440\u043e\u043b\u044c\u044e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0441\u043e\u043b\u0438 Amplify \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u044d\u0442\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435&nbsp;<strong>\u0414\u0430\u043b\u0435\u0435<\/strong>&nbsp;.<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0436\u0430\u0442\u044c \u00ab&nbsp;<strong>\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438<\/strong>&nbsp;\u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c\u00bb, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435!<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432 Master, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<h3>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u043b\u044e\u0431\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0438\u043b\u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0435\u043c\u0438\u043d\u0430\u0440\u0430 \u0432\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0441\u043b\u0443\u0436\u0431\u0443 \u0438\u0437 \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0441\u0432\u043e\u0435\u0439 \u0443\u0447\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432&nbsp;<code>amplify remove<\/code>\u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>amplify remove auth  amplify push<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a\u0438\u0435 \u0441\u043b\u0443\u0436\u0431\u044b \u0432\u044b \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u043a\u043b\u044e\u0447\u0438\u043b\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c&nbsp;<code>amplify status<\/code>\u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>amplify status<\/code><\/pre>\n<p><code>amplify status<\/code>&nbsp;\u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u0432\u0430\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<h3>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<h4>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0443\u0447\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 AWS<\/h4>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0439\u0442\u0438 \u044d\u0442\u043e\u0442 \u0443\u0440\u043e\u043a, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0443\u0447\u0435\u0442\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c Amazon Web Services.<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c&nbsp;<a href=\"https:\/\/aws.amazon.com\/premiumsupport\/knowledge-center\/create-and-activate-aws-account\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a><\/p>\n<h4>\u0423\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043d\u0435\u043f\u043e\u043b\u0430\u0434\u043e\u043a<\/h4>\n<blockquote>\n<p>\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435: \u0434\u043b\u044f \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043a\u043b\u044e\u0447\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 AWS \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0438\u0441<\/p>\n<\/blockquote>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435: \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0430 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043f\u043b\u0430\u043d.&nbsp;<a href=\"https:\/\/portal.aws.amazon.com\/billing\/signup?type=resubscribe#\/resubscribed\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0441\u044f<\/a><\/p>\n<blockquote>\n<p>\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435: TypeError: fsevents \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u043e\u043c<\/p>\n<\/blockquote>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435:&nbsp;<code>npm audit fix --force<\/code><\/p>\n<blockquote>\n<p>\u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435: \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441 \u043e\u0431\u043b\u0430\u043a\u043e\u043c \u0438 \/ \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442<\/p>\n<\/blockquote>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435:<\/p>\n<pre><code>amplify update api amplify push<\/code><\/pre>\n<p>\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u044b \u043e\u0442\u0432\u0435\u0442\u0438\u043b\u0438 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043a\u0430\u043a<\/p>\n<ul>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432?&nbsp;<strong>Y<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e&nbsp;<strong>Auto Merge<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438?&nbsp;<strong>N<\/strong><\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u043e\u0441\u043b\u0435\u0441\u043b\u043e\u0432\u0438\u0435<\/h2>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0441\u0442 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043b\u0435\u0433\u0447\u0435 \u043f\u0440\u043e\u0439\u0442\u0438 \u043a\u0432\u0435\u0441\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Vue \u0432 \u043e\u0431\u043b\u0430\u043a\u0435 AWS. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e76\/4ee\/7d5\/e764ee7d5632ab5f74a73178068a2ab3.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0432\u0443\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0432\u0443\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439\" width=\"1049\" height=\"739\"><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0432\u0443\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/figcaption><\/figure>\n<h2>\u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/h2>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0435\u0442 \u0440\u044f\u0434 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0440\u0435\u0434\u0435 Amplify. \u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/664\/327\/db7\/664327db70f771fe330b6824da9f09ae.png\" alt=\"5 \u0448\u0430\u0433\u043e\u0432 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\" title=\"5 \u0448\u0430\u0433\u043e\u0432 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\" width=\"1280\" height=\"984\"><figcaption>5 \u0448\u0430\u0433\u043e\u0432 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/figcaption><\/figure>\n<p>\u0422\u0430\u043a \u0436\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0435 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e \u043c\u0435\u0440\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u043e\u043a\u0430 \u043c\u044b \u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u0443\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 API \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e: <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/eb6\/908\/4e0\/eb69084e0b1825a5c25ab0d0a597b28d.png\" width=\"1280\" height=\"984\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u0446\u0435\u043b\u0438. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u043c\u0435\u0442\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439: \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u043e \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0443, \u043f\u0438\u0441\u044c\u043c\u043e \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u0441 \u043f\u0435\u0440\u0435\u0430\u0434\u0440\u0435\u0441\u0430\u0446\u0438\u0435\u0439, \u043a\u0430\u043f\u0447\u0443 \u043f\u0440\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0437\u0430\u0449\u0438\u0442\u044b \u043e\u0442 \u0440\u043e\u0431\u043e\u0442\u043e\u0432, \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0441\u0432\u043e\u0435\u0433\u043e \u0434\u043e\u043c\u0435\u043d\u0430 (\u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432 \u043a\u0438\u0440\u0438\u043b\u043b\u0438\u0446\u0435, \u043a\u0441\u0442\u0430\u0442\u0438 \u0447\u0435\u0433\u043e \u043d\u0435\u0442 \u0432 Azure). \u0410 \u0442\u0430\u043a \u0436\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043f\u043b\u044e\u0448\u0435\u043a. <\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/537654\/\"> https:\/\/habr.com\/ru\/post\/537654\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u043b\u0430\u0447\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 Amazon \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f&nbsp;\u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430 <code>Chatty<\/code>\u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0447\u0430\u0442-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u043d\u0430\u0442\u043e\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Vue \u0438&nbsp;<a href=\"https:\/\/aws-amplify.github.io\/\" rel=\"noopener noreferrer nofollow\">AWS Amplify<\/a>. \u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c:<\/p>\n<ul>\n<li>\n<p>\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>GraphQL API \u0441 AWS AppSync<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Amplify DataStore<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0441\u043e\u043b\u044c Amplify<\/p>\n<\/li>\n<li>\n<p>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043d\u0435\u0438\u0441\u043f\u0440\u0430\u0432\u043d\u043e\u0441\u0442\u0435\u0439<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0443\u0442: <a href=\"https:\/\/master.d58xs5f4j0v44.amplifyapp.com\/\" rel=\"noopener noreferrer nofollow\">https:\/\/master.d58xs5f4j0v44.amplifyapp.com\/<\/a><\/p>\n<\/blockquote>\n<p>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f: <\/p>\n<ul>\n<li>\n<p>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0437\u0430 $1 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445 Amazon AWS \u0443\u0436\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0430<\/p>\n<\/li>\n<li>\n<p>\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 Visual Studio Code \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d, \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d npm:<\/p>\n<ul>\n<li>\n<p>Node:&nbsp;<code>14.7.0<\/code>. Visit&nbsp;<a href=\"https:\/\/nodejs.org\/en\/download\/current\/\" rel=\"noopener noreferrer nofollow\">Node<\/a><\/p>\n<\/li>\n<li>\n<p>npm:&nbsp;<code>6.14.7<\/code>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><code class=\"nginx\">npm install -g npm<\/code><\/pre>\n<h3>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b &#8212; \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c, \u043d\u0430\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Vue \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f:<\/p>\n<pre><code class=\"nginx\">npm install -g @vue\/cli vue create amplify-datastore<\/code><\/pre>\n<ul>\n<li>\n<p>?&nbsp;<strong>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435<\/strong>&nbsp;\u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443: \u043f\u043e&nbsp;<strong>\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e [Vue 2] (babel, eslint)<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043d\u043e\u0432\u044b\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043e\u043d\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e.<\/p>\n<pre><code class=\"nginx\">cd amplify-datastore  npm run serve<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Vue.js \u043e\u0442\u043a\u0440\u044b\u043b\u043e\u0441\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u043a\u043e\u0434<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 C:\\Users\\Admin\\amplify-datastore&gt; \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 Visual Studio Code:<\/p>\n<figure class=\"full-width\"><figcaption>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a LF<\/figcaption><\/figure>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Vue, \u0438 \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e. <\/p>\n<p>\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e CTRL+C \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c. <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c API AWS Amplify \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 AWS Amplify Vue:<\/p>\n<pre><code class=\"nginx\">npm install --save aws-amplify @aws-amplify\/ui-vue moment<\/code><\/pre>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 AWS Amplify<\/h4>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 AWS Amplify:<\/p>\n<pre><code class=\"nginx\">npm install -g @aws-amplify\/cli<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c CLI \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u0443\u0447\u0435\u0442\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438:<\/p>\n<pre><code class=\"nginx\">amplify configure<\/code><\/pre>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0438\u0434\u0435\u043e-\u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0443 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0449\u0435\u043b\u043a\u043d\u0438\u0442\u0435&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=fWbM5DLh25U\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>&nbsp;.<\/p>\n<\/blockquote>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c&nbsp;<code>amplify configure<\/code>\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443.&nbsp;\u041f\u043e\u0441\u043b\u0435 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c AWS \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0439\u0442\u0435:<\/p>\n<ul>\n<li>\n<p>\u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043e\u043d AWS:&nbsp;<strong>eu-central-1 (\u0424\u0440\u0430\u043d\u043a\u0444\u0443\u0440\u0442)<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f IAM:&nbsp;<strong>ampify-datastore<\/strong><\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 AWS \u043d\u0430\u0436\u043c\u0438\u0442\u0435&nbsp;<strong>\u0414\u0430\u043b\u0435\u0435: \u0420\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/strong>&nbsp;,&nbsp;<strong>\u0414\u0430\u043b\u0435\u0435: \u0422\u0435\u0433\u0438<\/strong>&nbsp;,&nbsp;<strong>\u0414\u0430\u043b\u0435\u0435: \u041e\u0431\u0437\u043e\u0440<\/strong>&nbsp;\u0438&nbsp;<strong>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f,<\/strong>&nbsp;\u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f IAM.&nbsp;\u0417\u0430\u0442\u0435\u043c \u0432\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 Enter.<\/p>\n<\/blockquote>\n<ul>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u043b\u044e\u0447 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0432\u043d\u043e\u0432\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n<p>accessKeyId:&nbsp;<strong>(&lt;YOUR<em>ACCESS<\/em>KEY<em>ID&gt;)<\/em><\/strong><em>secretAccessKey:&nbsp;<\/em><strong><em>(&lt;YOUR<\/em>SECRET<em>ACCESS<\/em>KEY&gt;)<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0418\u043c\u044f \u043f\u0440\u043e\u0444\u0438\u043b\u044f: \u043f\u043e&nbsp;<strong>\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/strong><\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f IAM, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443&nbsp;https:\/\/console.aws.amazon.com\/iam\/home?region=eu-central-1#\/users&nbsp;.&nbsp;\u0422\u0430\u043a\u0436\u0435 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0430\u0448 \u0440\u0435\u0433\u0438\u043e\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u044b\u0431\u043e\u0440\u0443.<\/p>\n<\/blockquote>\n<h4>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h4>\n<pre><code class=\"nginx\">amplify init<\/code><\/pre>\n<ul>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:&nbsp;<strong>ampifydatastore<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043c\u044f \u0434\u043b\u044f \u0441\u0440\u0435\u0434\u044b:&nbsp;<strong>dev<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:&nbsp;<strong>Visual Studio Code<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0438\u043f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435&nbsp;<strong>javascript<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a\u0443\u044e \u0441\u0440\u0435\u0434\u0443 JavaScript \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435&nbsp;<strong>vue<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041f\u0443\u0442\u044c \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443:&nbsp;<strong>src<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041f\u0443\u0442\u044c \u043a&nbsp;<strong>\u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443<\/strong>&nbsp;\u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044f:&nbsp;<strong>dist<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u0431\u043e\u0440\u043a\u0438:&nbsp;<strong>npm run-script build<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430:&nbsp;<strong>npm run-script serve<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044c AWS? <strong>\u0434\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <strong>\u043f\u043e<\/strong> <strong>\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 AWS Amplify \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0438 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443:&nbsp;<strong>ampify<\/strong>&nbsp;.&nbsp;\u0424\u0430\u0439\u043b\u044b \u0432 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<pre><code class=\"nginx\">&lt;amplify-app&gt;     |_ amplify       |_ .config       |_ #current-cloud-backend       |_ backend       team-provider-info.json<\/code><\/pre>\n<h2>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0432 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 Amplify, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"nginx\">amplify add auth<\/code><\/pre>\n<blockquote>\n<p>\u041f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435<\/p>\n<\/blockquote>\n<ul>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u043f\u043e&nbsp;<strong>\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/strong>&nbsp;?:&nbsp;<strong>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u043b\u0438 \u0432\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0443\u043b\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Cognito ?:&nbsp;<strong>\u0418\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b?&nbsp;<strong>\u0414\u0430, \u044f \u0445\u043e\u0447\u0443 \u0432\u043d\u0435\u0441\u0442\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0434\u043b\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438?&nbsp;(\u041d\u0430\u0436\u043c\u0438\u0442\u0435 &lt;\u043f\u0440\u043e\u0431\u0435\u043b&gt;, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0440\u0430\u0442\u044c, &lt;a&gt;, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0441\u0435, &lt;i&gt;, \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435):&nbsp;<strong>\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439?&nbsp;(\u041d\u0430\u0436\u043c\u0438\u0442\u0435 &lt;\u043f\u0440\u043e\u0431\u0435\u043b&gt;, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0440\u0430\u0442\u044c, &lt;a&gt;, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0441\u0435, &lt;i&gt;, \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435):&nbsp;<strong>\u041d\u0435\u0442<\/strong><\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0436\u043c\u0438\u0442\u0435&nbsp;<code>Enter<\/code>\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u043e\u043f\u0446\u0438\u044e.<\/p>\n<\/blockquote>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 push, \u0438 \u043e\u0431\u043b\u0430\u0447\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0432 \u043d\u0430\u0448\u0435\u0439 \u0443\u0447\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 AWS.<\/p>\n<pre><code>amplify push   Current Environment: dev | Category | Resource name      | Operation | Provider plugin   | | -------- | ------------------ | --------- | ----------------- | | Auth     | amplifyappuuid     | Create    | awscloudformation | ? Are you sure you want to continue? Yes<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439&nbsp;<strong>\u043f\u0443\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Cognito,<\/strong>&nbsp;\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c:<\/p>\n<pre><code>amplify status<\/code><\/pre>\n<blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a&nbsp;<strong>\u043a\u043e\u043d\u0441\u043e\u043b\u0438 AWS Cognito<\/strong>&nbsp;\u0432 \u043b\u044e\u0431\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443&nbsp;<a href=\"https:\/\/console.aws.amazon.com\/cognito\/\" rel=\"noopener noreferrer nofollow\">https:\/\/console.aws.amazon.com\/cognito\/<\/a>&nbsp;.<\/p>\n<\/blockquote>\n<h2>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Vue<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u044b, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c!<\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Vue, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0441\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u043e \u043e \u043d\u0430\u0448\u0435\u043c \u043d\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 AWS Amplify.&nbsp;\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u043e\u0431\u0440\u0430\u0442\u0438\u0432\u0448\u0438\u0441\u044c \u043a \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443&nbsp;<code>aws-exports.js<\/code>\u0444\u0430\u0439\u043b\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 <code>src<\/code>\u043f\u0430\u043f\u043a\u0435.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435&nbsp;<strong>main.js<\/strong>&nbsp;\u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">import Vue from 'vue' import App from '.\/App.vue'  import Amplify from 'aws-amplify'; import '@aws-amplify\/ui-vue'; import aws_exports from '.\/aws-exports';  Amplify.configure(aws_exports);  Vue.config.productionTip = false  new Vue({   render: h =&gt; h(App), }).$mount('#app')<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 AWS.<\/p>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/h4>\n<p>AWS Amplify \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.&nbsp;\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043f\u0440\u043e\u0435\u043a\u0442<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Authenticator, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0435\u0433\u043e \u0432&nbsp;<strong>src \/ App.vue<\/strong>&nbsp;:<\/p>\n<pre><code class=\"java\">&lt;template&gt;   &lt;div id=\"app\"&gt;     &lt;amplify-authenticator&gt;       &lt;div&gt;         &lt;h1&gt;Hey, {{user.username}}!&lt;\/h1&gt;         &lt;amplify-sign-out&gt;&lt;\/amplify-sign-out&gt;       &lt;\/div&gt;     &lt;\/amplify-authenticator&gt;   &lt;\/div&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u0442\u043e\u043a \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0448\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.&nbsp;\u042d\u0442\u043e\u0442 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0432\u043e\u0439\u0442\u0438 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/p>\n<blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0441\u0435\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0432\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u043d\u0430&nbsp;\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f&nbsp;<strong>Cognito \u043f\u043e<\/strong>&nbsp;\u0430\u0434\u0440\u0435\u0441\u0443&nbsp;<a href=\"https:\/\/console.aws.amazon.com\/cognito\/\" rel=\"noopener noreferrer nofollow\">https:\/\/console.aws.amazon.com\/cognito\/<\/a>&nbsp;.&nbsp;<\/p>\n<\/blockquote>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/p>\n<pre><code>amplify console auth<\/code><\/pre>\n<h4>\u0414\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/h4>\n<p>\u041f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e,&nbsp;<code>onAuthUIStateChange<\/code>\u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d \u0432\u043e\u0448\u0435\u043b \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">&lt;script&gt; import { AuthState, onAuthUIStateChange } from '@aws-amplify\/ui-components'  export default {   name: 'app',   data() {     return {       user: { },     }   },   created() {     \/\/ authentication state managament     onAuthUIStateChange((state, user) =&gt; {       \/\/ set current user and load data after login       if (state === AuthState.SignedIn) {         this.user = user;       }     })   } } &lt;\/script&gt;<\/code><\/pre>\n<h3>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 GraphQL API<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c GraphQL API, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>amplify add api<\/code><\/pre>\n<p>\u041e\u0442\u0432\u0435\u0442\u044c\u0442\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043e\u0434\u043d\u0443 \u0438\u0437 \u043d\u0438\u0436\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0441\u043b\u0443\u0436\u0431&nbsp;<strong>GraphQL<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u0438\u043c\u044f API:&nbsp;<strong>ChattyAPI<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0438\u043f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f&nbsp;<strong>\u043a\u043b\u044e\u0447\u0430<\/strong>&nbsp;API&nbsp;<strong>API<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0430 API:&nbsp;<strong>(\u043f\u0443\u0441\u0442\u043e)<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0427\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043d\u0435\u0439 \u0438\u0441\u0442\u0435\u0447\u0435\u0442 \u0441\u0440\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043b\u044e\u0447\u0430 API (1-365):&nbsp;<strong>7<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f GraphQL API?&nbsp;<strong>\u0414\u0430, \u044f \u0445\u043e\u0447\u0443 \u0432\u043d\u0435\u0441\u0442\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438?&nbsp;<strong>N<\/strong><\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432?&nbsp;<strong>Y<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e&nbsp;<strong>Auto Merge<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438? <strong>N<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0423 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0430\u043d\u043d\u043e\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 GraphQL? <strong>N<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0445\u0435\u043c\u044b? <strong>Y<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0427\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442: <strong>\u043e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00abTodo\u00bb \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c, \u0438\u043c\u0435\u043d\u0435\u043c, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c)<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0445\u0435\u043c\u0443 \u0441\u0435\u0439\u0447\u0430\u0441? <strong>Y<\/strong><\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0436\u043c\u0438\u0442\u0435&nbsp;<code>Enter<\/code>.<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u041f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0441\u0445\u0435\u043c\u0443 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e:<\/p>\n<\/blockquote>\n<pre><code>type Chatty @model {   id: ID!   user: String!   message: String!   createdAt: AWSDateTime }<\/code><\/pre>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0434\u0430\u0442\u043e\u0439 \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<\/p>\n<blockquote>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 \u0441\u0445\u0435\u043c\u044b!<\/p>\n<\/blockquote>\n<p>\u0417\u0430\u0442\u0435\u043c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0432 \u043d\u0430\u0448\u0443 \u0443\u0447\u0435\u0442\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n<pre><code>amplify push<\/code><\/pre>\n<ul>\n<li>\n<p>\u0412\u044b \u0443\u0432\u0435\u0440\u0435\u043d\u044b \u0447\u0442\u043e \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c?&nbsp;<strong>\u0434\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0434\u043b\u044f \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e GraphQL API?&nbsp;<strong>\u0414\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u044f\u0437\u044b\u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430&nbsp;<strong>javascript<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u0438\u043c\u0435\u043d\u0438 \u0444\u0430\u0439\u043b\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043c\u0443\u0442\u0430\u0446\u0438\u0439 \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a&nbsp;<strong>graphql src \/ graphql \/ ** \/ *. Js<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \/ \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 GraphQL &#8212; \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438?&nbsp;<strong>\u0414\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0433\u043b\u0443\u0431\u0438\u043d\u0443 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 [\u0443\u0432\u0435\u043b\u0438\u0447\u044c\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 \u0441\u0445\u0435\u043c\u0430 \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u0430]&nbsp;<strong>2<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430&nbsp;<strong>\u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 GraphQL<\/strong>&nbsp;\u0438&nbsp;<strong>\u041a\u041b\u042e\u0427 API<\/strong>&nbsp;.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0448\u0430\u0433\u0435 \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u043e\u0432\u044b\u0439 API AWS AppSync.&nbsp;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0438\u0436\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f AWS AppSync.&nbsp;\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0430\u0448 \u0440\u0435\u0433\u0438\u043e\u043d \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439.<\/p>\n<pre><code>amplify console api<\/code><\/pre>\n<ul>\n<li>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043e\u0434\u043d\u0443 \u0438\u0437 \u043d\u0438\u0436\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0441\u043b\u0443\u0436\u0431&nbsp;<strong>GraphQL<\/strong><\/p>\n<\/li>\n<\/ul>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Amplify DataStore<\/h3>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Amplify DataStore<\/h4>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code>npm install --save @aws-amplify\/core @aws-amplify\/datastore<\/code><\/pre>\n<h4>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445<\/h4>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043d\u0430\u0448\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e&nbsp;<strong>ChattyAPI.<\/strong><\/p>\n<pre><code>amplify codegen models<\/code><\/pre>\n<blockquote>\n<p>\u0412\u0430\u0436\u043d\u043e: \u041d\u0415 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u043d\u043e\u0441\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0432\u043e\u044e \u0441\u0445\u0435\u043c\u0443.<\/p>\n<\/blockquote>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 AWS Amplify \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u0432 \u0441\u0432\u043e\u0435\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0435:&nbsp;<strong>models<\/strong>&nbsp;.&nbsp;\u0424\u0430\u0439\u043b\u044b \u0432 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0441\u0445\u0435\u043c\u0443 \u0432\u0430\u0448\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<pre><code>&lt;amplify-app&gt;     |_ src       |_ models<\/code><\/pre>\n<blockquote>\n<p>\u0421\u0430\u043c\u044b\u0435 \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043b\u0438\u0432\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <a href=\"https:\/\/github.com\/lazy-fox-code\/amplify-datastore\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/lazy-fox-code\/amplify-datastore<\/a> \u0438 \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c \u043a\u0443\u0434\u0430 \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 App.vue \u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b.<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 App.vue \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0448\u0430\u0431\u043b\u043e\u043d &lt;templat<\/p>\n<\/blockquote>\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-316467","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/316467","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=316467"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/316467\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=316467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=316467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=316467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}