{"id":48139,"date":"2023-04-24T10:31:24","date_gmt":"2023-10-09T14:15:07","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e4%bb%ac%e5%b0%86%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cvue%e6%9d%a5%e8%bd%bb%e6%9d%be%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e8%81%8a%e5%a4%a9%e5%ba%94%e7%94%a8%ef%bc%81%ef%bc%81\/"},"modified":"2024-04-30T01:04:28","modified_gmt":"2024-04-29T17:04:28","slug":"%e6%88%91%e4%bb%ac%e5%b0%86%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cvue%e6%9d%a5%e8%bd%bb%e6%9d%be%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e8%81%8a%e5%a4%a9%e5%ba%94%e7%94%a8%ef%bc%81%ef%bc%81","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e4%bb%ac%e5%b0%86%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cvue%e6%9d%a5%e8%bd%bb%e6%9d%be%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e8%81%8a%e5%a4%a9%e5%ba%94%e7%94%a8%ef%bc%81%ef%bc%81\/","title":{"rendered":"\u6211\u4eec\u5c06\u4f7f\u7528AWS Amplify\u548cVue\u6765\u8f7b\u677e\u521b\u5efa\u4e00\u4e2a\u804a\u5929\u5e94\u7528\uff01\uff01"},"content":{"rendered":"

AWS Amplify\u5f88\u597d\u7528\uff0c\u5927\u5bb6\u90fd\u5728\u4f7f\u7528\u5417\uff1f
\n\u901a\u8fc7\u4f7f\u7528Amplify\uff0c\u6211\u4eec\u53ef\u4ee5\u5c06AWS\u7684\u5404\u79cd\u529f\u80fd\u96c6\u6210\u5230SPA Web\u5e94\u7528\u7a0b\u5e8f\u4e2d\uff0c\u6211\u4eec\u5728\u8fd9\u91cc\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u57fa\u4e8eDynamoDB + GraphQL\u6570\u636e\u6e90\u7684\u804a\u5929\u5e94\u7528\u3002
\n\u901a\u8fc7\u6267\u884camplify\u547d\u4ee4\uff0c\u60a8\u53ef\u4ee5\u611f\u53d7\u5230\u5728\u4e0d\u76f4\u63a5\u64cd\u4f5cAWS\u7ba1\u7406\u63a7\u5236\u53f0\u7b49\u7684\u60c5\u51b5\u4e0b\u521b\u5efa\u4e00\u4e2a\u76f8\u5f53\u5b8c\u6574\u7684\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n

\u987a\u4fbf\u8bf4\u4e00\u4e0b\uff0c\u8fd9\u662f AWS Amplify Advent Calendar 2019 \u7b2c14\u5929\u7684\u6587\u7ae0\uff01<\/p>\n

\u5173\u4e8e\u5f00\u53d1\u73af\u5883<\/h1>\n
$ <\/span>vue -V<\/span>\r\n3.11.0\r\n\r\n$ <\/span>amplify -v<\/span>\r\n1.7.3\r\n<\/code><\/pre>\n
\u5236\u4f5cVue\u5e94\u7528\u7a0b\u5e8f<\/h1>\n
vue create vue-chat-app\r\n\r\nVue CLI v4.1.1\r\n? Please pick a preset: (<\/span>Use arrow keys)<\/span>\r\n\u276f default (<\/span>babel, eslint)<\/span> \r\n  Manually select <\/span>features \r\n<\/code><\/pre>\n
\u90a3\u6211\u5148\u8bd5\u7740\u542f\u52a8\u4e00\u4e0b\u770b\u770b\u3002<\/p>\n
cd vue-chat-app\r\nyarn serve\r\n<\/code><\/pre>\n
http:\/\/\u672c\u5730\u4e3b\u673a:8081<\/p>\n
\u521b\u5efa\u4e00\u4e2aVue\u5e94\u7528<\/h1>\n
\u9996\u5148\uff0c\u5728\u6ca1\u6709\u96c6\u6210Amplify\u7684\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2aVue\u5e94\u7528\u7a0b\u5e8f\uff0c\u4ee5\u4fbf\u80fd\u591f\u7b80\u5355\u5730\u786e\u8ba4\u5176\u884c\u4e3a\u3002<\/p>\n
\u5f15\u5bfc\u7a0b\u5e8f\u7684\u5185\u7f6e<\/h2>\n
\u60a8\u4f1a\u4f7f\u7528Bootstrap-Vue\u5904\u7406UI\u90e8\u5206\uff0c\u5bf9\u5417\uff1f<\/p>\n
$ <\/span>yarn add bootstrap-vue bootstrap core-js\r\n<\/code><\/pre>\n
\u5e94\u7528\u7a0b\u5e8f\u7684\u5b9e\u65bd<\/h2>\n
\u5c55\u5f00\u6d88\u606f\u53d1\u9001\u5bf9\u8bdd\u6846
\n\u2193
\n\u5728\u8868\u683c\u4e2d\u8f93\u5165
\n\u2193
\n\u663e\u793a\u6d88\u606f<\/p>\n
\u6211\u4f1a\u5c3d\u91cf\u5728\u6ca1\u6709\u66f4\u65b0\u6570\u636e\u5e93\u7684\u60c5\u51b5\u4e0b\u5b9e\u73b0\u5230\u53ef\u884c\u7a0b\u5ea6\u3002<\/p>\n
\u4e3b\u8981\u6587\u4ef6\u4e3asrc\/main.js\u3002<\/p>\n
import<\/span> Vue<\/span> from<\/span> '<\/span>vue<\/span>'<\/span>\r\nimport<\/span> App<\/span> from<\/span> '<\/span>.\/App.vue<\/span>'<\/span>\r\nimport<\/span> BootstrapVue<\/span> from<\/span> '<\/span>bootstrap-vue<\/span>'<\/span>\r\nimport<\/span> '<\/span>bootstrap\/dist\/css\/bootstrap.css<\/span>'<\/span>\r\nimport<\/span> '<\/span>bootstrap-vue\/dist\/bootstrap-vue.css<\/span>'<\/span>\r\n\r\nVue<\/span>.<\/span>use<\/span>(<\/span>BootstrapVue<\/span>)<\/span>\r\n\r\nVue<\/span>.<\/span>config<\/span>.<\/span>productionTip<\/span> =<\/span> false<\/span>\r\n\r\nnew<\/span> Vue<\/span>({<\/span>\r\n  render<\/span>:<\/span> h<\/span> =><\/span> h<\/span>(<\/span>App<\/span>),<\/span>\r\n}).<\/span>$mount<\/span>(<\/span>'<\/span>#app<\/span>'<\/span>)<\/span>\r\n<\/code><\/pre>\n
src\/App.vue \u7684\u4e2d\u6587\u7ffb\u8bd1\uff1a\u4e3b\u6587\u4ef6\/App.vue<\/p>\n
<<\/span>template<\/span>><\/span>\r\n  <<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>app<\/span>\"<\/span>><\/span>\r\n    <<\/span>header<\/span>><\/span>\r\n      <<\/span>b<\/span>-<\/span>navbar<\/span> variant<\/span>=<\/span>\"<\/span>info<\/span>\"<\/span> type<\/span>=<\/span>\"<\/span>dark<\/span>\"<\/span>><\/span>\r\n        <<\/span>b<\/span>-<\/span>navbar<\/span>-<\/span>brand<\/span> href<\/span>=<\/span>\"<\/span>#<\/span>\"<\/span>><\/span>Vue<\/span> Chat<\/span> App<\/span><<\/span>\/b-navbar-brand<\/span>>\r\n<\/span>\r\n        <<\/span>b<\/span>-<\/span>navbar<\/span>-<\/span>nav<\/span> class<\/span>=<\/span>\"<\/span>ml-auto<\/span>\"<\/span>><\/span>\r\n          <<\/span>b<\/span>-<\/span>nav<\/span>-<\/span>form<\/span>><\/span>\r\n            <<\/span>b<\/span>-<\/span>button<\/span> @<\/span>click<\/span>=<\/span>\"<\/span>modalShow = !modalShow<\/span>\"<\/span> variant<\/span>=<\/span>\"<\/span>light<\/span>\"<\/span>><\/span>Post<\/span><<\/span>\/b-button<\/span>>\r\n<\/span>          <<\/span>\/b-nav-form<\/span>>\r\n<\/span>        <<\/span>\/b-navbar-nav<\/span>>\r\n<\/span>      <<\/span>\/b-navbar<\/span>>\r\n<\/span>    <<\/span>\/header<\/span>>\r\n<\/span>\r\n    <<\/span>b<\/span>-<\/span>container<\/span>><\/span>\r\n      <<\/span>section<\/span> class<\/span>=<\/span>\"<\/span>form<\/span>\"<\/span>><\/span>\r\n        <<\/span>section<\/span>><\/span>\r\n          <<\/span>b<\/span>-<\/span>modal<\/span> v<\/span>-<\/span>model<\/span>=<\/span>\"<\/span>modalShow<\/span>\"<\/span> size<\/span>=<\/span>\"<\/span>lg<\/span>\"<\/span> title<\/span>=<\/span>\"<\/span>Post chat message<\/span>\"<\/span>><\/span>\r\n            <<\/span>section<\/span> v<\/span>-<\/span>if<\/span>=<\/span>\"<\/span>errors.length > 0<\/span>\"<\/span> class<\/span>=<\/span>\"<\/span>alerts<\/span>\"<\/span>><\/span>\r\n              <<\/span>div<\/span>\r\n                v<\/span>-<\/span>for<\/span>=<\/span>\"<\/span>(error, j) in errors<\/span>\"<\/span>\r\n                v<\/span>-<\/span>bind<\/span>:<\/span>key<\/span>=<\/span>\"<\/span>j<\/span>\"<\/span>\r\n                class<\/span>=<\/span>\"<\/span>alert alert-danger<\/span>\"<\/span>\r\n                role<\/span>=<\/span>\"<\/span>alert<\/span>\"<\/span>\r\n              ><\/span>{{<\/span> error<\/span> }}<\/span><<\/span>\/div<\/span>>\r\n<\/span>            <<\/span>\/section<\/span>>\r\n<\/span>\r\n            <<\/span>b<\/span>-<\/span>form<\/span>><\/span>\r\n              <<\/span>b<\/span>-<\/span>form<\/span>-<\/span>group<\/span> label<\/span>=<\/span>\"<\/span>User:<\/span>\"<\/span> label<\/span>-<\/span>for<\/span>=<\/span>\"<\/span>user<\/span>\"<\/span>><\/span>\r\n                <<\/span>b<\/span>-<\/span>form<\/span>-<\/span>input<\/span> id<\/span>=<\/span>\"<\/span>user<\/span>\"<\/span> v<\/span>-<\/span>model<\/span>=<\/span>\"<\/span>form.user<\/span>\"<\/span> required<\/span> placeholder<\/span>=<\/span>\"<\/span>Enter user<\/span>\"<\/span>><<\/span>\/b-form-input<\/span>>\r\n<\/span>              <<\/span>\/b-form-group<\/span>>\r\n<\/span>\r\n              <<\/span>b<\/span>-<\/span>form<\/span>-<\/span>group<\/span> label<\/span>=<\/span>\"<\/span>message<\/span>\"<\/span> label<\/span>-<\/span>for<\/span>=<\/span>\"<\/span>message<\/span>\"<\/span>><\/span>\r\n                <<\/span>b<\/span>-<\/span>form<\/span>-<\/span>textarea<\/span>\r\n                  id<\/span>=<\/span>\"<\/span>message<\/span>\"<\/span>\r\n                  v<\/span>-<\/span>model<\/span>=<\/span>\"<\/span>form.message<\/span>\"<\/span>\r\n                  placeholder<\/span>=<\/span>\"<\/span>Enter something...<\/span>\"<\/span>\r\n                  rows<\/span>=<\/span>\"<\/span>3<\/span>\"<\/span>\r\n                  max<\/span>-<\/span>rows<\/span>=<\/span>\"<\/span>6<\/span>\"<\/span>\r\n                ><<\/span>\/b-form-textarea<\/span>>\r\n<\/span>              <<\/span>\/b-form-group<\/span>>\r\n<\/span>            <<\/span>\/b-form<\/span>>\r\n<\/span>\r\n            <<\/span>template<\/span> v<\/span>-<\/span>slot<\/span>:<\/span>modal<\/span>-<\/span>footer<\/span>=<\/span>\"<\/span>{ submit, cancel, close }<\/span>\"<\/span>><\/span>\r\n              <<\/span>b<\/span>-<\/span>button<\/span> variant<\/span>=<\/span>\"<\/span>success<\/span>\"<\/span> @<\/span>click<\/span>=<\/span>\"<\/span>onPostMessage<\/span>\"<\/span>><\/span>Submit<\/span><<\/span>\/b-button<\/span>>\r\n<\/span>              <<\/span>b<\/span>-<\/span>button<\/span> variant<\/span>=<\/span>\"<\/span>default<\/span>\"<\/span> @<\/span>click<\/span>=<\/span>\"<\/span>onCancel<\/span>\"<\/span>><\/span>Cancel<\/span><<\/span>\/b-button<\/span>>\r\n<\/span>            <<\/span>\/template<\/span>>\r\n<\/span>          <<\/span>\/b-modal<\/span>>\r\n<\/span>        <<\/span>\/section<\/span>>\r\n<\/span>\r\n        <<\/span>section<\/span>><\/span>\r\n          <<\/span>b<\/span>-<\/span>card<\/span>\r\n            v<\/span>-<\/span>for<\/span>=<\/span>\"<\/span>(chat, i) in chats<\/span>\"<\/span>\r\n            v<\/span>-<\/span>bind<\/span>:<\/span>key<\/span>=<\/span>\"<\/span>i<\/span>\"<\/span>\r\n            v<\/span>-<\/span>bind<\/span>:<\/span>footer<\/span>=<\/span>\"<\/span>chat.user + ' - ' + chat.created_at<\/span>\"<\/span>\r\n            footer<\/span>-<\/span>tag<\/span>=<\/span>\"<\/span>footer<\/span>\"<\/span>\r\n          ><\/span>\r\n            <<\/span>b<\/span>-<\/span>media<\/span>><\/span>\r\n              <<\/span>template<\/span> v<\/span>-<\/span>slot<\/span>:<\/span>aside<\/span>><\/span>\r\n                <<\/span>b<\/span>-<\/span>img<\/span> width<\/span>=<\/span>\"<\/span>64<\/span>\"<\/span> src<\/span>=<\/span>\"<\/span>https:\/\/picsum.photos\/200<\/span>\"<\/span>><<\/span>\/b-img<\/span>>\r\n<\/span>              <<\/span>\/template<\/span>>\r\n<\/span>              {{<\/span> chat<\/span>.<\/span>message<\/span> }}<\/span>\r\n            <<\/span>\/b-media<\/span>>\r\n<\/span>          <<\/span>\/b-card<\/span>>\r\n<\/span>        <<\/span>\/section<\/span>>\r\n<\/span>      <<\/span>\/section<\/span>>\r\n<\/span>    <<\/span>\/b-container<\/span>>\r\n<\/span>  <<\/span>\/div<\/span>>\r\n<\/span><<\/span>\/template<\/span>>\r\n<\/span>\r\n<<\/span>script<\/span>><\/span>\r\nexport<\/span> default<\/span> {<\/span>\r\n  user<\/span>:<\/span> \"<\/span>app<\/span>\"<\/span>,<\/span>\r\n  data<\/span>()<\/span> {<\/span>\r\n    return<\/span> {<\/span>\r\n      form<\/span>:<\/span> {<\/span>\r\n        user<\/span>:<\/span> \"\"<\/span>,<\/span>\r\n        message<\/span>:<\/span> \"\"<\/span>\r\n      },<\/span>\r\n      chats<\/span>:<\/span> [],<\/span>\r\n      modalShow<\/span>:<\/span> false<\/span>,<\/span>\r\n      errors<\/span>:<\/span> []<\/span>\r\n    };<\/span>\r\n  },<\/span>\r\n  computed<\/span>:<\/span> {<\/span>\r\n    formIsInValid<\/span>()<\/span> {<\/span>\r\n      return<\/span> this<\/span>.<\/span>errors<\/span>.<\/span>length<\/span> ><\/span> 0<\/span>;<\/span>\r\n    },<\/span>\r\n    chatParams<\/span>()<\/span> {<\/span>\r\n      return<\/span> {<\/span>\r\n        ...<\/span>this<\/span>.<\/span>form<\/span>,<\/span>\r\n        created_at<\/span>:<\/span> new<\/span> Date<\/span>().<\/span>toLocaleString<\/span>()<\/span>\r\n      };<\/span>\r\n    }<\/span>\r\n  },<\/span>\r\n  methods<\/span>:<\/span> {<\/span>\r\n    onPostMessage<\/span>()<\/span> {<\/span>\r\n      this<\/span>.<\/span>checkMessageParams<\/span>();<\/span>\r\n      if<\/span> (<\/span>this<\/span>.<\/span>formIsInValid<\/span>)<\/span> {<\/span>\r\n        return<\/span>;<\/span>\r\n      }<\/span>\r\n\r\n      this<\/span>.<\/span>postMessage<\/span>();<\/span>\r\n\r\n      this<\/span>.<\/span>modalShow<\/span> =<\/span> false<\/span>;<\/span>\r\n      this<\/span>.<\/span>form<\/span>.<\/span>user<\/span> =<\/span> \"\"<\/span>;<\/span>\r\n      this<\/span>.<\/span>form<\/span>.<\/span>message<\/span> =<\/span> \"\"<\/span>;<\/span>\r\n    },<\/span>\r\n    postMessage<\/span>()<\/span> {<\/span>\r\n      this<\/span>.<\/span>chats<\/span>.<\/span>push<\/span>(<\/span>\r\n        this<\/span>.<\/span>chatParams<\/span>\r\n      )<\/span>\r\n    },<\/span>\r\n    onCancel<\/span>()<\/span> {<\/span>\r\n      this<\/span>.<\/span>modalShow<\/span> =<\/span> false<\/span>;<\/span>\r\n    },<\/span>\r\n    checkMessageParams<\/span>()<\/span> {<\/span>\r\n      this<\/span>.<\/span>errors<\/span> =<\/span> [];<\/span>\r\n\r\n      if<\/span> (<\/span>this<\/span>.<\/span>form<\/span>.<\/span>user<\/span> ===<\/span> \"\"<\/span>)<\/span> {<\/span>\r\n        this<\/span>.<\/span>errors<\/span>.<\/span>push<\/span>(<\/span>'<\/span>\"User\" is required.<\/span>'<\/span>);<\/span>\r\n      }<\/span>\r\n      if<\/span> (<\/span>this<\/span>.<\/span>form<\/span>.<\/span>message<\/span> ===<\/span> \"\"<\/span>)<\/span> {<\/span>\r\n        this<\/span>.<\/span>errors<\/span>.<\/span>push<\/span>(<\/span>'<\/span>\"message\" is required.<\/span>'<\/span>);<\/span>\r\n      }<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n};<\/span>\r\n<<\/span>\/script<\/span>>\r\n<\/span>\r\n<<\/span>style<\/span>><\/span>\r\n.<\/span>card<\/span> {<\/span>\r\n  margin<\/span>:<\/span> 1<\/span>em<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n<<\/span>\/style<\/span>>\r\n<\/span><\/code><\/pre>\n
\"vue-chat-app.jpg\"<\/div>\n
\"vue-chat-app.jpg\"<\/div>\n
\"vue-chat-app.jpg\"<\/div>\n
\"vue-chat-app.jpg\"<\/div>\n
3. \u5c06Amplify\u96c6\u6210\u8fdb\u53bb Amplify<\/h1>\n
3.1 \u521d\u59cb\u5316<\/h3>\n
\u6beb\u4e0d\u7336\u8c6b\u5730\u6253\u51fa\u4ee5\u4e0b\u7684\u6307\u4ee4\u3002<\/p>\n
$ <\/span>amplify init\r\n\r\n\r\nNote: It is recommended to run this command <\/span>from the root of your app directory\r\n\r\n? Enter a name for <\/span>the project \r\nvue-chat-app\r\n\r\n? Enter a name for <\/span>the environment\r\ndevelop\r\n\r\n? Choose your default editor:\r\nVisual Studio Code\r\n\r\n? Choose the type <\/span>of app that you're building\r\njavascript\r\n\r\nPlease tell us about your project\r\n? What javascript framework are you using\r\nvue\r\n\r\n? Source Directory Path:\r\nsrc\r\n\r\n? Distribution Directory Path:\r\ndist\r\n\r\n? Build Command:\r\nyarn build\r\n\r\n? Start Command:\r\nyarn serve\r\n<\/span><\/code><\/pre>\n
3.2 \u5c06\u6258\u7ba1\u81f3 S3<\/h2>\n
\u5c3d\u7ba1\u987a\u5e8f\u65e0\u6240\u8c13\uff0c\u4f46\u5728\u8fdb\u884c\u6570\u636e\u5e93\u5468\u56f4\u7684\u8bbe\u7f6e\u4e4b\u524d\uff0c\u672c\u6b21\u5c06\u628a\u5f53\u524d\u72b6\u6001\u7684\u5e94\u7528\u7a0b\u5e8f\u90e8\u7f72\u5230S3\u3002<\/p>\n
$ <\/span>amplify add hosting\r\n\r\n? Select the environment setup: (<\/span>S3 only with HTTP)<\/span>\r\nDEV\r\n\r\n? hosting bucket name\r\nvue-chat-app-20191214083130-hostingbucket\r\n\r\n? index doc for <\/span>the website\r\nindex.html\r\n\r\n? error doc for <\/span>the website\r\nindex.html\r\n\r\nYou can now publish your app using the following command<\/span>:\r\nCommand: amplify publish\r\n<\/code><\/pre>\n
$ <\/span>amplify publish\r\n\r\nCurrent Environment: develop\r\n\r\n| Category | Resource name   | Operation | Provider plugin   |\r\n| --------<\/span> | ---------------<\/span> | ---------<\/span> | -----------------<\/span> |\r\n| Hosting  | S3AndCloudFront | Create    | awscloudformation |\r\n\r\n? Are you sure you want to continue<\/span>?\r\nYes\r\n\r\n~\r\n\r\n\u2728  Done in <\/span>35.82s.\r\nfrontend build command <\/span>exited with code 0\r\n\u2714 Uploaded files successfully.\r\nYour app is published successfully.\r\nhttp:\/\/vue-chat-app-20191214083130-hostingbucket-develop.s3-website-ap-northeast-1.amazonaws.com\r\n<\/code><\/pre>\n
\u6267\u884cpublish\u547d\u4ee4\u540e\uff0c\u5c06\u6267\u884c\u5728amplify init\u547d\u4ee4\u884c\u4e2d\u56de\u7b54\u7684\u6784\u5efa\u547d\u4ee4\uff08yarn build\uff09\uff0c\u5e76\u5c06\u5176\u90e8\u7f72\u5230S3\u4e2d\u3002
\n\u90e8\u7f72\u5b8c\u6210\u540e\uff0c\u5c06\u663e\u793aS3\u7ec8\u7aef\u70b9\u5730\u5740\uff0c\u8bf7\u5c1d\u8bd5\u8bbf\u95ee\u3002<\/p>\n
\u8bf7\u5c06\u4ee5\u4e0b\u5185\u5bb9\u4ee5\u4e2d\u6587\u672c\u5730\u5316\u91cd\u8ff0\uff0c\u53ea\u9700\u4e00\u79cd\u9009\u9879:
\nhttp:\/\/vue-chat-app-20191214083130-hostingbucket-develop.s3-website-ap-northeast-1.amazonaws.com<\/p>\n
http:\/\/vue-chat-app-20191214083130-hostingbucket-develop.s3-website-ap-northeast-1.amazonaws.com\u7f51\u5740\u3002<\/p>\n
\u5982\u679c\u663e\u793a\u7684\u5e94\u7528\u7a0b\u5e8f\u4e0e\u672c\u5730\u786e\u8ba4\u7684\u4e00\u6837\uff0c\u90a3\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n
\u65b0\u589e\u4e863.3 API\u3002<\/h2>\n
$ <\/span>amplify add api\r\n\r\n? Please select <\/span>from one of the below mentioned services\r\nGraphQL\r\n\r\n? Provide API name:\r\nvuechatapp\r\n\r\n? Choose an authorization type <\/span>for <\/span>the API\r\nAPI key\r\n\r\n? Do you have an annotated GraphQL schema?\r\nNo\r\n\r\n? Do you want a guided schema creation?\r\nYes\r\n\r\n? What best describes your project: (<\/span>e.g., \u201cTodo\u201d with ID, name, description)<\/span>\r\nSingle object with fields\r\n\r\n? Do you want to edit the schema now?\r\nYes\r\n\r\nPlease edit the file in <\/span>your editor: \/Users\/Work\/aws_amplify\/vue-chat-app\/amplify\/backend\/api\/vuechatapp\/schema.graphql\r\n\r\ns? Press enter to continue<\/span>\r\n<\/code><\/pre>\n
\u9009\u62e9\u201c\u662f\u201d\u5c06\u542f\u52a8\u7f16\u8f91\u5668\uff0c\u5e76\u663e\u793a\u5982\u4e0b\u6240\u793a\u7684GraphQL\u6a21\u5f0f\u6587\u4ef6\u6a21\u677f\u3002<\/p>\n
GraphQL\u67b6\u6784<\/p>\n
type Todo @model {\r\n  id: ID!\r\n  name: String!\r\n  description: String\r\n}\r\n<\/code><\/pre>\n
\u5c06\u8fdb\u884c\u5982\u4e0b\u66f4\u6539\u3002<\/p>\n
type Chat @model {\r\n  id: ID!\r\n  user: String!\r\n  message: String\r\n  created_at: String\r\n}\r\n<\/code><\/pre>\n
\u6211\u4f1a\u8bd5\u7740\u653e\u5927\u72b6\u51b5\u6765\u770b\u3002<\/p>\n
$ amplify status\r\n\r\nCurrent Environment: develop\r\n\r\n| Category | Resource name   | Operation | Provider plugin   |\r\n| -------- | --------------- | --------- | ----------------- |\r\n| Api      | vuechatapp      | Create    | awscloudformation |\r\n| Hosting  | S3AndCloudFront | No Change | awscloudformation |\r\n\r\nHosting endpoint: http:\/\/vue-chat-app-20191214083130-hostingbucket-develop.s3-website-ap-northeast-1.amazonaws.com\r\n\r\n<\/code><\/pre>\n
\u6240\u4ee5\uff0c\u6211\u4eec\u5c06\u91cd\u65b0\u90e8\u7f72\u3002
\n\u7531\u4e8e\u662f\u5728API\u7aef\u521b\u5efa\u8d44\u6e90\uff0c\u6240\u4ee5\u8fd9\u6b21\u6211\u4eec\u4f1a\u8fdb\u884c\u63a8\u9001\u3002
\n\u63a8\u9001\u64cd\u4f5c\u662f\u5c06\u5728\u672c\u5730\u4fee\u6539\u7684Amplify\u66f4\u6539\u5e94\u7528\u5230AWS\u4e0a\uff0c
\n\u53d1\u5e03\u64cd\u4f5c\u5219\u662f\u5728Amplify\u66f4\u6539\u7684\u57fa\u7840\u4e0a\u8fdb\u884c\u5e94\u7528\u6784\u5efa\u548c\u90e8\u7f72\u64cd\u4f5c\u3002<\/p>\n
\"amplify push\"<\/span> will build all your local <\/span>backend resources and provision it in <\/span>the cloud\r\n\"amplify publish\"<\/span> will build all your local <\/span>backend and frontend resources (<\/span>if <\/span>you have hosting category added)<\/span> and provision it in <\/span>the cloud\r\n<\/code><\/pre>\n
\u5f53\u60a8\u8fdb\u884cAmplify push\u64cd\u4f5c\u65f6\uff0c\u4f1a\u663e\u793a\u4e00\u4e9b\u95ee\u9898\u3002
\n\u4ee5\u4e0b\u6240\u6709\u5185\u5bb9\u5747\u4e3a\u9ed8\u8ba4\u503c\u3002<\/p>\n
GraphQL schema compiled successfully.\r\nEdit your schema at \/Users\/yuto-ogi\/Work\/aws_amplify\/vue-chat-app\/amplify\/backend\/api\/vuechatapp\/schema.graphql or place .graphql files in <\/span>a directory at \/Users\/yuto-ogi\/Work\/aws_amplify\/vue-chat-app\/amplify\/backend\/api\/vuechatapp\/schema\r\n\r\n? Do you want to generate code for <\/span>your newly created GraphQL API\r\nYes\r\n\r\n? Choose the code generation language target \r\njavascript\r\n\r\n? Enter the file name pattern of graphql queries, mutations and subscriptions\r\nsrc\/graphql\/**<\/span>\/*<\/span>.js\r\n\r\n? Do you want to generate\/update all possible GraphQL operations - queries, mutations and subscriptions \r\nYes\r\n\r\n? Enter maximum statement depth [<\/span>increase from default if <\/span>your schema is deeply nested]\r\n2\r\n\r\n\u280f Updating resources in <\/span>the cloud. This may take a few minutes...\r\n<\/code><\/pre>\n
\u5f53\u5728AWS\u4e0a\u521b\u5efaGrapyQL\u8d44\u6e90\u5b8c\u6210\u540e\uff0c\u5c06\u5728\u6e90\u76ee\u5f55\u4e2d\u521b\u5efa\u5982\u4e0b\u6587\u4ef6\u3002<\/p>\n
  modified:   .graphqlconfig.yml\r\n  modified:   src\/graphql\/mutations.js\r\n  modified:   src\/graphql\/queries.js\r\n  modified:   src\/graphql\/schema.json\r\n  modified:   src\/graphql\/subscriptions.js\r\n<\/code><\/pre>\n
\u6b64\u5916\uff0c\u5728src\u6587\u4ef6\u5939\u4e0b\u4f1a\u521b\u5efaaws-exports.js\u6587\u4ef6\uff08\u8be5\u6587\u4ef6\u5305\u542b\u8ba4\u8bc1\u4fe1\u606f\uff0c\u5e94\u5c06\u5176\u52a0\u5165.gitignore\uff09\u3002
\n\u7136\u540e\uff0c\u5728Vue\u5e94\u7528\u7a0b\u5e8f\u4e2d\u52a0\u8f7d\u8be5\u6587\u4ef6\u3002<\/p>\n
const awsmobile = {<\/span>\r\n    \"aws_project_region\"<\/span>:<\/span> \"<\/span>ap-northeast-1\"<\/span>,<\/span>\r\n    \"<\/span>aws_content_delivery_bucket\"<\/span>:<\/span> \"<\/span>*********************************\"<\/span>,<\/span>\r\n    \"<\/span>aws_content_delivery_bucket_region\"<\/span>:<\/span> \"<\/span>ap-northeast-1\"<\/span>,<\/span>\r\n    \"<\/span>aws_content_delivery_url\"<\/span>:<\/span> \"<\/span>*********************************\"<\/span>,<\/span>\r\n    \"<\/span>aws_appsync_graphqlEndpoint\"<\/span>:<\/span> \"<\/span>*********************************\"<\/span>,<\/span>\r\n    \"<\/span>aws_appsync_region\"<\/span>:<\/span> \"<\/span>ap-northeast-1\"<\/span>,<\/span>\r\n    \"<\/span>aws_appsync_authenticationType\"<\/span>:<\/span> \"<\/span>API_KEY\"<\/span>,<\/span>\r\n    \"<\/span>aws_appsync_apiKey\"<\/span>:<\/span> \"<\/span>*********************************\"<\/span>\r\n}<\/span>;<\/span>\r\n\r\n\r\nexport default awsmobile;<\/span>\r\n<\/code><\/pre>\n
3.4 \u5c06AppSync\u96c6\u6210\u5230Vue\u5e94\u7528\u7a0b\u5e8f\u4e2d<\/h2>\n
$ <\/span>yarn add aws-amplify aws-amplify-vue\r\n<\/code><\/pre>\n
\u6211\u4f1a\u5728\u4e0b\u9762\u589e\u8865\u5185\u5bb9\u3002<\/p>\n
\u4e3b\u8981.js<\/p>\n
import Amplify, * as AmplifyModules from 'aws-amplify'\r\nimport { AmplifyPlugin } from 'aws-amplify-vue'\r\nimport awsconfig from '.\/aws-exports'\r\nAmplify.configure(awsconfig)\r\nVue.use(AmplifyPlugin, AmplifyModules)\r\n\r\nVue.config.productionTip = false\r\n<\/code><\/pre>\n
App.vue \u7684\u4e2d\u6587\u91ca\u4e49\u662f\uff1a\u5e94\u7528\u89c6\u56fe\u7ec4\u4ef6\u3002<\/p>\n
\u5728\u4f7f\u7528amplify push\u4e4b\u540e\uff0c\u5c06\u521b\u5efa\u7684\u4e0eGraphQL\u76f8\u5173\u7684\u6587\u4ef6\u5bfc\u5165\u5e76\u96c6\u6210\u5230\u5e94\u7528\u7a0b\u5e8f\u4e2d\u3002<\/p>\n
import<\/span> {<\/span> API<\/span>,<\/span> graphqlOperation<\/span> }<\/span> from<\/span> \"<\/span>aws-amplify<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> createChat<\/span> }<\/span> from<\/span> \"<\/span>@\/graphql\/mutations<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> listChats<\/span> }<\/span> from<\/span> \"<\/span>@\/graphql\/queries<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> onCreateChat<\/span> }<\/span> from<\/span> \"<\/span>@\/graphql\/subscriptions<\/span>\"<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u5728created\u52a8\u4f5c\u4e2d\uff0c\u6211\u4eec\u6267\u884c\u4e86\u4e24\u4e2a\u64cd\u4f5c\uff1a\u52a0\u8f7d\u73b0\u6709\u8bb0\u5f55\u5e76\u8ba2\u9605\u5bf9\u6570\u636e\u5e93\u7684\u66f4\u6539\u3002<\/p>\n
async<\/span> created<\/span>()<\/span> {<\/span>\r\n  \/\/ query<\/span>\r\n  const<\/span> queryResponse<\/span> =<\/span> await<\/span> API<\/span>.<\/span>graphql<\/span>(<\/span>graphqlOperation<\/span>(<\/span>listChats<\/span>));<\/span>\r\n  this<\/span>.<\/span>chats<\/span> =<\/span> queryResponse<\/span>.<\/span>data<\/span>.<\/span>listChats<\/span>.<\/span>items<\/span>;<\/span>\r\n\r\n  \/\/ subscribe<\/span>\r\n  API<\/span>.<\/span>graphql<\/span>(<\/span>\r\n    graphqlOperation<\/span>(<\/span>onCreateChat<\/span>)<\/span>\r\n  ).<\/span>subscribe<\/span>({<\/span>\r\n    next<\/span>:<\/span> chat<\/span> =><\/span> {<\/span>\r\n      this<\/span>.<\/span>chats<\/span>.<\/span>push<\/span>(<\/span>chat<\/span>.<\/span>value<\/span>.<\/span>data<\/span>.<\/span>onCreateChat<\/span>);<\/span>\r\n    }<\/span>\r\n  });<\/span>\r\n},<\/span>\r\n<\/code><\/pre>\n
\u901a\u8fc7postMessage\uff0c\u4f7f\u7528GraphQL\u7684mutation\u529f\u80fd\u5728DynamoDB\u4e2d\u521b\u5efa\u8bb0\u5f55\u3002<\/p>\n
async<\/span> postMessage<\/span>()<\/span> {<\/span>\r\n  await<\/span> API<\/span>.<\/span>graphql<\/span>(<\/span>\r\n    graphqlOperation<\/span>(<\/span>createChat<\/span>,<\/span> {<\/span>\r\n      input<\/span>:<\/span> this<\/span>.<\/span>chatParams<\/span>\r\n    })<\/span>\r\n  ).<\/span>catch<\/span>(<\/span>error<\/span> =><\/span> {<\/span>\r\n    console<\/span>.<\/span>error<\/span>(<\/span>error<\/span>);<\/span>\r\n  });<\/span>\r\n},<\/span>\r\n<\/code><\/pre>\n
4. \u66b4\u9732<\/h1>\n
\u5b8c\u6210\u672c\u5730\u6d4b\u8bd5\u540e\uff0c\u5c06\u5176\u90e8\u7f72\u5230S3\u3002<\/p>\n
$ amplify publish\r\n<\/code><\/pre>\n
\u6211\u5011\u4f7f\u7528\u4e86Lorem Picsum\u5728\u7528\u6236\u5716\u6a19\u4e2d\u986f\u793a\u5716\u50cf\uff0c\u4f46\u6211\u5011\u53ea\u662f\u66ab\u6642\u6307\u5b9a\u4e86\u4e00\u500b\u93c8\u63a5\uff0c\u56e0\u6b64\u6bcf\u6b21\u91cd\u65b0\u52a0\u8f09\u9801\u9762\u6642\u5716\u50cf\u90fd\u6703\u8b8a\u5316\uff0c\u4e26\u4e14\u6240\u6709\u7528\u6236\u90fd\u6703\u770b\u5230\u76f8\u540c\u7684\u5716\u50cf^^;<\/p>\n