- \u4ee5\u4e0b\u30b3\u30de\u30f3\u30c9\u3067\u30a2\u30d7\u30ea\u3092\u4f5c\u6210<\/ul>\n
npx create-react-app todo\r\n<\/code><\/pre>\n\u6253\u5f00\u5e94\u7528<\/h3>\ncd todo\r\nnpm start\r\n<\/code><\/pre>\n![\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d846c913a08637a6b6417\/6-0.png\" "\\"\\"")
<\/div>\n\u5173\u95ed\u5e94\u7528\u7a0b\u5e8f<\/h3>\n
\u300c\u590d\u5236\u300d<\/p>\n
\u521b\u5efaGitHub\u4ed3\u5e93<\/h2>\n
\u5728GitHub\u4e0a\u521b\u5efa\u4e00\u4e2a\u5b58\u50a8\u5e93\uff0c\u5e76\u5c06\u5e94\u7528\u7a0b\u5e8f\u63a8\u9001\u5230\u8be5\u5b58\u50a8\u5e93\u4e2d\u3002<\/p>\n
git init\r\ngit remote add origin https:\/\/github.com\/xxxxx\/todo.git\r\ngit remote -v\r\ngit add .\r\ngit commit -m 'init'\r\ngit push origin main\r\n<\/code><\/pre>\n\n- \n
\u3010GitHub\u3011 authentication failed\u3067\u5931\u6557\u3059\u308b\u5834\u5408\u306f\u4ee5\u4e0b\u3092\u53c2\u8003\u306b\u30c8\u30fc\u30af\u30f3\u3092\u8a2d\u5b9a\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n <\/p>\n
https:\/\/donachikiblog.com\/github-authentication-failed\/<\/ul>\n\u589e\u5f3a\u90e8\u7f72<\/h2>\n
\u4f7f\u7528AWS\u8d26\u53f7\u767b\u5f55\uff0c\u4eceAmplify\u63a7\u5236\u53f0\u90e8\u7f72\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
![\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d846c913a08637a6b6417\/15-1.png\" "\\"\\"")
<\/div>\n\u653e\u5927\u5e94\u7528\u7a0b\u5e8f\u7684\u521d\u59cb\u5316<\/h2>\n
\u5b89\u88c5 Amplify CLI<\/p>\n
npm install -g @aws-amplify\/cli\r\n<\/code><\/pre>\n\u8bbe\u7f6eAmplify<\/p>\n
\u3053\u306e\u969b\u3001AWS\u306b\u3066Amplify\u3067\u30a2\u30af\u30bb\u30b9\u3059\u308bIAM\u30e6\u30fc\u30b6\u3092\u4f5c\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u306e\u3067\u30a2\u30ca\u30a6\u30f3\u30b9\u306b\u8a18\u8f09\u3055\u308c\u308bURL\u3092\u3082\u3068\u306bIAM\u30e6\u30fc\u30b6\u3092\u4f5c\u6210\u3057\u3001accessKeyId\u3068SecretAccessKey\u3092\u767a\u884c\u5f8c\u3001\u30ed\u30fc\u30ab\u30eb\u30b3\u30f3\u30bd\u30fc\u30eb\u4e0a\u306b\u5165\u529b\u3059\u308b<\/ul>\n
amplify configure\r\n\u30fb\r\n\u30fb\r\n\u30fb\r\nSign in to your AWS administrator account:\r\nhttps:\/\/console.aws.amazon.com\/\r\nPress Enter to continue\r\n\r\nSpecify the AWS Region\r\n? region: ap-northeast-1\r\nSpecify the username of the new IAM user:\r\n? user name: todoAdmin\r\nComplete the user creation using the AWS console\r\nhttps:\/\/console.aws.amazon.com\/iam\/home?region=*****\r\nPress Enter to continue\r\n\r\nEnter the access key of the newly created user:\r\n? accessKeyId: ********\r\n? secretAccessKey: ********\r\nThis would update\/create the AWS Profile in your local machine\r\n? Profile Name: default\r\n\r\nSuccessfully set up the new user.\r\n<\/code><\/pre>\n\u521d\u59cb\u5316Amplify\u9879\u76ee<\/p>\n
amplify init --appId \u3010Amplify\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3ARN\u3011\r\n<\/code><\/pre>\n\u589e\u52a0\u8ba4\u8bc1<\/h2>\n
\u5b89\u88c5amplify\u5e93<\/p>\n
npm install aws-amplify @aws-amplify\/ui-react\r\n<\/code><\/pre>\n\u5c06\u8ba4\u8bc1\u670d\u52a1\u6dfb\u52a0\u5230Amplify\u9879\u76ee\u4e2d\u3002<\/p>\n
amplify add auth\r\n<\/code><\/pre>\n\u90e8\u7f72\u8eab\u4efd\u9a8c\u8bc1\u670d\u52a1<\/p>\n
\u300c–y\u300d\u30aa\u30d7\u30b7\u30e7\u30f3\u3067\u5168\u3066\u306e\u8cea\u554f\u306b\u300cyew\u300d\u3092\u8a2d\u5b9a\u3059\u308b<\/ul>\n
amplify push --y\r\n<\/code><\/pre>\n\u4fee\u6539React\u5e94\u7528<\/h2>\n
src\/index.js \u7684\u6e90\u4ee3\u7801<\/p>\n
import React from 'react';\r\nimport ReactDOM from 'react-dom\/client';\r\nimport '.\/index.css';\r\nimport App from '.\/App';\r\nimport reportWebVitals from '.\/reportWebVitals';\r\nimport { Amplify } from 'aws-amplify'\r\nimport config from '.\/aws-exports';\r\nAmplify.configure(config);\r\n\r\nconst root = ReactDOM.createRoot(document.getElementById('root'));\r\nroot.render(\r\n <React.StrictMode>\r\n <App \/>\r\n <\/React.StrictMode>\r\n);\r\n\r\n\/\/ If you want to start measuring performance in your app, pass a function\r\n\/\/ to log results (for example: reportWebVitals(console.log))\r\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals\r\nreportWebVitals();\r\n\r\n<\/code><\/pre>\nsrc\/App.js:
\n\u4e3b\u8981\u539f\u59cb\u78bc\/src\/App.js<\/p>\n
import React from 'react';\r\nimport logo from '.\/logo.svg';\r\nimport '.\/App.css';\r\nimport { withAuthenticator } from '@aws-amplify\/ui-react'\r\nimport '@aws-amplify\/ui-react\/styles.css';\r\n\r\nfunction App({ signOut, user }) {\r\nreturn (\r\n<div className=\"App\">\r\n<header>\r\n<img src={logo} className=\"App-logo\" alt=\"logo\" \/>\r\n<h1>Hello {user.username}<\/h1>\r\n<button onClick={signOut}>Sign out<\/button>\r\n<\/header>\r\n<\/div>\r\n);\r\n}\r\nexport default withAuthenticator(App);\r\n<\/code><\/pre>\n![\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d846c913a08637a6b6417\/37-0.png\" "\\"\\"")
<\/div>\n\u521b\u9020GraphQL<\/h2>\n
\u5c06GraphQL API\u6dfb\u52a0\u5230\u5e94\u7528\u7a0b\u5e8f\u4e2d\u3002<\/p>\n
amplify add api\r\n? Select from one of the below mentioned services: GraphQL\r\n? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue\r\n? Choose a schema template: Single object with fields (e.g., \u201cTodo\u201d with ID, name, description)\r\n\u2714 Do you want to edit the schema now? (Y\/n) \u00b7 yes\r\n? Try opening with system-default editor instead? Yes\r\n<\/code><\/pre>\n\u4fee\u6539GraphQL\u6587\u4ef6
\n– \u4fee\u6539amplify\/backend\/api\/todo\/schema.graphql\u6587\u4ef6<\/p>\n
type Note @model {\r\n id: ID!\r\n name: String!\r\n description: String\r\n}\r\n<\/code><\/pre>\n\u64b0\u5199\u7528\u4e8e\u4f7f\u7528API\u7684\u524d\u7aef\u4ee3\u7801\u3002<\/p>\n
src\/App.js\u3092\u66f4\u65b0<\/ul>\n
import React, { useState, useEffect } from 'react';\r\nimport logo from '.\/logo.svg';\r\nimport '.\/App.css';\r\nimport { withAuthenticator } from '@aws-amplify\/ui-react'\r\nimport '@aws-amplify\/ui-react\/styles.css';\r\nimport { API } from 'aws-amplify';\r\nimport { listNotes } from '.\/graphql\/queries';\r\nimport { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from '.\/graphql\/mutations';\r\n\r\nconst initialFormState = { name: '', description: '' }\r\n\r\nfunction App({ signOut, user }) {\r\n const [notes, setNotes] = useState([]);\r\n const [formData, setFormData] = useState(initialFormState);\r\n\r\n useEffect(() => {\r\n fetchNotes();\r\n }, []);\r\n\r\n async function fetchNotes() {\r\n const apiData = await API.graphql({ query: listNotes });\r\n setNotes(apiData.data.listNotes.items);\r\n }\r\n\r\n async function createNote() {\r\n if (!formData.name || !formData.description) return;\r\n await API.graphql({ query: createNoteMutation, variables: { input: formData } });\r\n setNotes([ ...notes, formData ]);\r\n setFormData(initialFormState);\r\n }\r\n\r\n async function deleteNote({ id }) {\r\n const newNotesArray = notes.filter(note => note.id !== id);\r\n setNotes(newNotesArray);\r\n await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});\r\n }\r\n return (\r\n <div className=\"App\">\r\n <h1>My Notes App<\/h1>\r\n <input\r\n onChange={e => setFormData({ ...formData, 'name': e.target.value})}\r\n placeholder=\"Note name\"\r\n value={formData.name}\r\n \/>\r\n <input\r\n onChange={e => setFormData({ ...formData, 'description': e.target.value})}\r\n placeholder=\"Note description\"\r\n value={formData.description}\r\n \/>\r\n <button onClick={createNote}>Create Note<\/button>\r\n <div style={{marginBottom: 30}}>\r\n {\r\n notes.map(note => (\r\n <div key={note.id || note.name}>\r\n <h2>{note.name}<\/h2>\r\n <p>{note.description}<\/p>\r\n <button onClick={() => deleteNote(note)}>Delete note<\/button>\r\n <\/div>\r\n ))\r\n }\r\n <\/div>\r\n <img src={logo} className=\"App-logo\" alt=\"logo\" \/>\r\n <h1>Hello {user.username}<\/h1>\r\n <button onClick={signOut}>Sign out<\/button>\r\n <\/div>\r\n );\r\n}\r\n\r\nexport default withAuthenticator(App);\r\n<\/code><\/pre>\n![\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d846c913a08637a6b6417\/46-0.png\" "\\"\\"")
<\/div>\n\u589e\u52a0\u4f9b\u56fe\u7247\u4f7f\u7528\u7684\u5b58\u50a8\u7a7a\u95f4<\/h2>\namplify add storage\r\n? Select from one of the below mentioned services: Content (Images, audio, video, etc.)\r\n\u2714 Provide a friendly name for your resource that will be used to label this category in the project: \u00b7 imageStorage\r\n\u2714 Provide bucket name: \u00b7 test-amplify-image-storage-xxx\r\n\u2714 Who should have access: \u00b7 Auth users only\r\n\u2714 What kind of access do you want for Authenticated users? \u00b7 create\/update, read, delete\r\n\u2714 Do you want to add a Lambda Trigger for your S3 Bucket? (y\/N) \u00b7 no\r\n\u2705 Successfully added resource imageStorage locally\r\n\u26a0\ufe0f If a user is part of a user pool group, run \"amplify update storage\" to enable IAM group policies for CRUD operations\r\n\u2705 Some next steps:\r\n\"amplify push\" builds all of your local backend resources and provisions them in the cloud\r\n\"amplify publish\" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud\r\n<\/code><\/pre>\n\u4fee\u6539GraphQL\u6587\u4ef6<\/h2>\ntype Note @model {\r\n id: ID!\r\n name: String!\r\n description: String\r\n image: String\r\n}\r\n<\/code><\/pre>\n\u90e8\u7f72API\u548c\u5b58\u50a8\u3002<\/h2>\namplify push --y\r\n<\/code><\/pre>\n\u786e\u8ba4\u52a8\u4f5c<\/h2>\n![\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d846c913a08637a6b6417\/54-0.png\" "\\"\\"")
<\/div>\n\u5c06\u7a0b\u5e8f\u90e8\u7f72\u5230\u6b63\u5f0f\u73af\u5883<\/h2>\n
\u9996\u5148\u5c06\u66f4\u6539\u63a8\u9001\u5230 GitHub \u4e0a\u7684 main \u5206\u652f\uff0c\u5373\u53ef\u81ea\u52a8\u90e8\u7f72\u5230\u751f\u4ea7\u73af\u5883\u3002<\/p>\n
git add -A\r\ngit commit -m 'main push'\r\ngit push origin main\r\n<\/code><\/pre>\n\u7279\u6027\u6807\u5fd7\u5728 “amplify\/cli.json” \u914d\u7f6e\u6587\u4ef6\u4e2d\u5b9a\u4e49\uff0c\u5e76\u4e14\u5bf9\u5f53\u524d\u8fd0\u884c\u7684 Amplify CLI \u662f\u672a\u77e5\u7684\u95ee\u9898\u3002
\n\u5f53\u90e8\u7f72\u5230\u751f\u4ea7\u73af\u5883\u65f6\uff0c\u4e0a\u8ff0\u9519\u8bef\u4f1a\u53d1\u751f\uff0c\u5e76\u5bfc\u81f4\u90e8\u7f72\u5931\u8d25\u3002
\n\u56e0\u6b64\uff0c\u5728 Amplify \u63a7\u5236\u53f0\u7684 “\u5e94\u7528\u7a0b\u5e8f\u8bbe\u7f6e” > “\u6784\u5efa\u8bbe\u7f6e” > “\u4f7f\u7528\u5e94\u7528\u7a0b\u5e8f\u6784\u5efa” \u4e2d\uff0c\u6211\u4fee\u6539\u4e86 amplify.yml \u5982\u4e0b\u6240\u793a\uff1a<\/p>\n