- Auth: Amazon Cognito(SignIn\/SignUp\u6a5f\u80fd\u3092\u8ffd\u52a0)<\/ul>\n<\/li>\n<\/ul>\n
- \n
- Analytics: Amazon Pinpoint(\u30e6\u30fc\u30b6\u306e\u30bb\u30c3\u30b7\u30e7\u30f3\u3084\u30a4\u30d9\u30f3\u30c8\u3092\u8a18\u9332)<\/ul>\n<\/li>\n<\/ul>\n
- \n
- Storage: Amazon S3<\/ul>\n<\/li>\n<\/ul>\n
- \n
- Caching: Amazon Cloudfront<\/ul>\n<\/li>\n<\/ul>\n
- \n
- Amplify CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb(Node.js\u3068npm\u306e\u4e8b\u524d\u5c0e\u5165\u304c\u5fc5\u8981)<\/ul>\n<\/li>\n<\/ul>\n
- \n
- Amplify\u306e\u8a2d\u5b9a\u3067AWS\u30ea\u30bd\u30fc\u30b9\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306eIAM\u30e6\u30fc\u30b6\u3092\u65b0\u898f\u4f5c\u6210<\/ul>\n<\/li>\n<\/ul>\n
<\/p>\n
- \u30a2\u30af\u30bb\u30b9\u30ad\u30fcID\u3068\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30a2\u30af\u30bb\u30b9\u30ad\u30fc\u3092\u5165\u529b\u3057\u3066Amplify CLI\u3068IAM\u30e6\u30fc\u30b6\u3092\u7d10\u4ed8\u3051<\/ul>\n
\u521b\u5efa\u5e94\u7528\u7a0b\u5f0f<\/h1>\n
\u4f7f\u7528Amplify\u6784\u5efa\u540e\u7aef\u8d44\u6e90\u5982GraphQL\u548cAuth\uff0c\u5e76\u5728React\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528\u5b83\u4eec\u3002\u8bf7\u9996\u5148\u4f7f\u7528npx create-react-app <app\u540d>\u547d\u4ee4\u521b\u5efa\u9879\u76ee\u3002<\/p>\n
\u540e\u7aef\u5efa\u8bbe<\/h2>\n
\u9996\u5148\uff0c\u5728\u9879\u76ee\u4e2d\u5bfc\u5165amplify\u3002\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\u540e\uff0c\u4f1a\u5f39\u51fa\u4e0e\u9ed8\u8ba4\u7f16\u8f91\u5668\u548c\u4f7f\u7528\u7684\u6846\u67b6\u76f8\u5173\u7684\u95ee\u9898\uff0c\u8bf7\u56de\u7b54\u8fd9\u4e9b\u95ee\u9898\u3002<\/p>\n
amplify init\r\n\r\n? Enter a name for the project chatapp\r\n? Enter a name for the environment dev\r\n? Choose your default editor: Visual Studio Code\r\n? Choose the type of app that you're building javascript\r\nPlease tell us about your project\r\n? What javascript framework are you using react\r\n? Source Directory Path: src\r\n? Distribution Directory Path: build\r\n? Build Command: npm run-script build\r\n? Start Command: npm run-script start\r\nUsing default provider awscloudformation\r\n\r\n? Select the authentication method you want to use: (Use arrow keys)\r\n? Select the authentication method you want to use: AWS profile\r\n\r\nFor more information on AWS Profiles, see:\r\nhttps:\/\/docs.aws.amazon.com\/cli\/latest\/userguide\/cli-configure-profiles.html\r\n\r\n? Please choose the profile you want to use default\r\n<\/code><\/pre>\n\u6784\u5efaAPI(GraphQL)\u8d44\u6e90<\/h3>\n
\u901a\u8fc7\u4ee5\u4e0b\u547d\u4ee4\u9010\u6b65\u56de\u7b54\u95ee\u9898\uff0c\u5c06\u5728amplify\/backend\u7684\u6839\u76ee\u5f55\u4e0b\u521b\u5efaapi\u6587\u4ef6\u5939\u3002<\/p>\n
amplify add api\r\n\r\n? Please select from one of the below mentioned services: GraphQL\r\n? Provide API name: chatapp\r\n? Choose the default authorization type for the API API key\r\n? Enter a description for the API key:\r\n? After how many days from now the API key should expire (1-365): 365\r\n? Do you want to configure advanced settings for the GraphQL API No, I am done.\r\n? Do you have an annotated GraphQL schema? No\r\n? Choose a schema template: Single object with fields (e.g., \u201cTodo\u201d with ID, name, description)\r\n<\/code><\/pre>\n\u5728 schema.graphql \u4e2d\u5b9a\u4e49\u6a21\u5f0f\u3002<\/p>\n
type<\/span> Post<\/span> @<\/span>model<\/span> {<\/span>\r\n id<\/span>:<\/span> ID<\/span>!<\/span>\r\n postOwnerId<\/span>:<\/span> String<\/span>!<\/span>\r\n postOwnerUsername<\/span>:<\/span> String<\/span>!<\/span>\r\n postTitle<\/span>:<\/span> String<\/span>!<\/span>\r\n postBody<\/span>:<\/span> String<\/span>!<\/span>\r\n createdAt<\/span>:<\/span> String<\/span>\r\n comments<\/span>:<\/span> [<\/span>Comment<\/span>]<\/span> @<\/span>connection<\/span>(<\/span>name<\/span>:<\/span> \"<\/span>PostComments<\/span>\"<\/span>)<\/span> #relationship<\/span>\r\n likes<\/span>:<\/span> [<\/span>Like<\/span>]<\/span> @<\/span>connection<\/span>(<\/span>name<\/span>:<\/span> \"<\/span>PostLikes<\/span>\"<\/span>)<\/span>\r\n}<\/span>\r\n\r\ntype<\/span> Comment<\/span> @<\/span>model<\/span> {<\/span>\r\n id<\/span>:<\/span> ID<\/span>!<\/span>\r\n commentOwnerId<\/span>:<\/span> String<\/span>!<\/span>\r\n commentOwnerUsername<\/span>:<\/span> String<\/span>!<\/span>\r\n post<\/span>:<\/span> Post<\/span> @<\/span>connection<\/span>(<\/span>name<\/span>:<\/span> \"<\/span>PostComments<\/span>\"<\/span>)<\/span>\r\n content<\/span>:<\/span> String<\/span>!<\/span>\r\n createdAt<\/span>:<\/span> String<\/span>!<\/span>\r\n}<\/span>\r\n\r\ntype<\/span> Like<\/span> @<\/span>model<\/span> {<\/span>\r\n id<\/span>:<\/span> ID<\/span>!<\/span>\r\n numberLikes<\/span>:<\/span> Int<\/span>!<\/span>\r\n likeOwnerId<\/span>:<\/span> String<\/span>!<\/span>\r\n likeOwnerUsername<\/span>:<\/span> String<\/span>!<\/span>\r\n post<\/span>:<\/span> Post<\/span> @<\/span>connection<\/span>(<\/span>name<\/span>:<\/span> \"<\/span>PostLikes<\/span>\"<\/span>)<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n\u82e5\u5728”type”\u4e0a\u6dfb\u52a0”model”\u6307\u4ee4\uff0c\u5b83\u5c06\u81ea\u52a8\u751f\u6210\u4e0e\u6570\u636e\u6e90(DynamoDB)\u7684\u8fde\u63a5\u4ee5\u53ca\u89e3\u6790\u5668\u3002\u6b64\u5916\uff0c\u4f7f\u7528amplify codegen\uff0c\u8fd8\u53ef\u4ee5\u81ea\u52a8\u751f\u6210\u5ba2\u6237\u7aef\u6e90\u4ee3\u7801\u5e93\uff0c\u4ee5\u4fbf\u5728src\/graphql\u4e2d\u8bbf\u95ee\u3002<\/p>\n
![\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8265913a08637a6b023a\/21-0.png\" "\\"\\"")
<\/div>\n\u5f53\u6267\u884camplify push\u547d\u4ee4\u5e76\u56de\u7b54\u4ee5\u4e0b\u95ee\u9898\u65f6\uff0c\u5c06\u4f1a\u90e8\u7f72AWS\u8d44\u6e90\uff08AppSync\uff09\u3002<\/p>\n
amplify push\r\n\r\n| Category | Resource name | Operation | Provider plugin |\r\n| -------- | ------------- | --------- | ----------------- |\r\n| Api | chatapp | Create | awscloudformation |\r\n\r\n? Are you sure you want to continue? Yes\r\n? Do you want to generate code for your newly created GraphQL API Yes\r\n? Choose the code generation language target javascript\r\n? Enter the file name pattern of graphql queries, mutations and subscriptions src\/graphql\/**\/*.js\r\n? Do you want to generate\/update all possible GraphQL operations - queries, mutations and subscriptions Yes\r\n? Enter maximum statement depth [increase from default if your schema is deeply nested] 2\r\n<\/code><\/pre>\n![\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8265913a08637a6b023a\/24-0.png\" "\\"\\"")
<\/div>\n\u5efa\u7acbAuth\u8d44\u6e90<\/h3>\n
\u5728\u6267\u884c “amplify add auth” \u540e\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528 “amplify push” \u6765\u6784\u5efaAWS\u8d44\u6e90\uff08Cognito\uff09\u3002<\/p>\n
amplify add auth\r\n\r\nUsing service: Cognito, provided by: awscloudformation\r\n\r\n The current configured provider is Amazon Cognito.\r\n\r\n Do you want to use the default authentication and security configuration? Default configuration\r\n Warning: you will not be able to edit these selections.\r\n How do you want users to be able to sign in? Username\r\n Do you want to configure advanced settings? No, I am done.\r\n<\/code><\/pre>\n\u524d\u7aef\u914d\u7f6e<\/h2>\n
\u6211\u6574\u7406\u4e86\u5982\u4f55\u5728\u524d\u7aef\uff08React\uff09\u4e2d\u4f7f\u7528\u914d\u7f6e\u597d\u7684 AWS \u8d44\u6e90\u7684\u65b9\u6cd5\u3002<\/p>\n
API\uff08GraphQL\uff09<\/h3>\n
\u6211\u6574\u7406\u4e86\u5982\u4f55\u4f7f\u7528\u521b\u5efa\u7684Query\u548cMutation\u7684\u65b9\u6cd5\u3002<\/p>\n
\u67e5\u8be2<\/h4>\n
\u901a\u8fc7\u8fd0\u884cnpm install aws-amplify aws-amplify-react\u5b89\u88c5\u6240\u9700\u7684\u5e93\uff0c\u5e76\u52a0\u8f7d\u5df2\u521b\u5efa\u7684\u67e5\u8be2\u6765\u6267\u884cAPI.graphql\uff08graphqlOperation\uff08listPosts\uff09\uff09\u3002\u5728\u83b7\u53d6\u6570\u636e\u540e\uff0c\u6211\u4eec\u5e0c\u671b\u8fdb\u884c\u663e\u793a\uff0c\u6240\u4ee5\u8fdb\u884c\u4e86\u5f02\u6b65\u5904\u7406\uff08async~await\uff09\u3002<\/p>\n
import<\/span> {<\/span> listPosts<\/span> }<\/span> from<\/span> '<\/span>..\/graphql\/queries<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> API<\/span>,<\/span> graphqlOperation<\/span> }<\/span> from<\/span> '<\/span>aws-amplify<\/span>'<\/span>;<\/span>\r\n\r\n\r\nconst<\/span> getPosts<\/span> =<\/span> async<\/span> ()<\/span> =><\/span> {<\/span>\r\n const<\/span> result<\/span> =<\/span> await<\/span> API<\/span>.<\/span>graphql<\/span>(<\/span>graphqlOperation<\/span>(<\/span>listPosts<\/span>));<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n\u7a81\u53d8 (t\u00fa<\/h4>\n
\u8fd9\u4e5f\u4e0e\u67e5\u8be2\u7c7b\u4f3c\uff0c\u4ecegraphql\u6587\u4ef6\u5939\u4e2d\u8bfb\u53d6\u5e76\u6267\u884c\u3002
\n\u4ee5\u4e0b\u662fdeletePost\u7684\u793a\u4f8b\u3002\u4e3a\u4e86\u6307\u5b9a\u8981\u5220\u9664\u7684post\uff0c\u5b83\u5c06postId\u4f5c\u4e3a\u53c2\u6570\u3002<\/p>\nconst<\/span> handleDeletePost<\/span> =<\/span> async<\/span> (<\/span>postId<\/span>)<\/span> =><\/span> {<\/span>\r\n const<\/span> input<\/span> =<\/span> {<\/span>\r\n id<\/span>:<\/span> postId<\/span>,<\/span>\r\n };<\/span>\r\n\r\n await<\/span> API<\/span>.<\/span>graphql<\/span>(<\/span>graphqlOperation<\/span>(<\/span>deletePost<\/span>,<\/span> {<\/span> input<\/span> }));<\/span>\r\n<\/code><\/pre>\n\u8ba4\u8bc1<\/h3>\n
\u6211\u5c06\u5bfc\u5165withAuthentificator\u5e76\u5c06\u5176\u5305\u88c5\u5728App\u4e2d\u3002<\/p>\n
import<\/span> '<\/span>.\/App.css<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> DisplayPosts<\/span> }<\/span> from<\/span> '<\/span>.\/components\/DisplayPosts<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> CreatePost<\/span> }<\/span>
<\/p>\n
- \n
- \n
<\/p>\n
- API: API Gateway+Lambda(REST)\u3084AppSync(GraphQL)<\/ul>\n
\u5728\u9ed1\u5e26\u7684\u8d44\u6599\u4e2d\u6709\u66f4\u8be6\u7ec6\u7684\u5185\u5bb9\u3002<\/p>\n
\u5f15\u7528CLI Amplify\u7684\u4ecb\u7ecd<\/h1>\n
\u53ea\u9700\u70b9\u51e0\u4e0b\u5373\u53ef\u521b\u5efa\u540e\u7aef\u8d44\u6e90\uff0c\u9700\u8981\u4f7f\u7528Amplify CLI\u8fdb\u884c\u5b89\u88c5\u5e76\u4e0e\u81ea\u5df1\u7684AWS\u8d26\u6237\u5173\u8054\u3002\u5177\u4f53\u5b89\u88c5\u6b65\u9aa4\u8bf7\u53c2\u8003\u5b98\u65b9\u6587\u6863\uff0c\u7b80\u5355\u6982\u62ec\u5982\u4e0b\u6240\u793a\u3002<\/p>\n
- \n
- \n
<\/p>\n
- \n
- \n
<\/p>\n
- \n
- \n
<\/p>\n
- \n