天天看點

aws amplify接入前端完整教程

官方文檔:https://docs.amplify.aws/start/q/integration/react/

1、電腦安裝awx amplify腳手架

yarn global add @aws-amplify/cli      

2、建立一個react前端應用

npx create-react-app amplify-react-app      

3、設定amplify以使用我們的aws賬戶,這将要做的是,知道我們完成設定過程,以擷取一個新的awsamplify設定,它将打開一個新的aws

amplify configure      

6、執行一些額外的步驟,來設定此項目,我們需要輸入一個名字,選擇環境(使用預設環境),選擇我們的編輯器(使用vscode),選擇應用程式(javascript),選擇我們的架構(使用react),目錄路徑為src,釋出路徑為build,是否使用AWS Profiles(是的),profile name設定為(servrrless-amplify)

amplify init      

7、此時項目根目錄會生成一個amplify檔案夾、aws-export.js和amplify.json檔案。

8、使用amplify add auth 指令,這将逐漸指導我們完成向此react ap添加登入系統,使用預設配置

amplify add auth      
aws amplify接入前端完整教程

9、使用amplify push指令,

aws amplify接入前端完整教程
aws amplify接入前端完整教程

8、修改app.js,添加amplify登入UI元件

aws amplify接入前端完整教程
aws amplify接入前端完整教程

 9、安裝兩個amplify UI元件包

npm install --save aws-amplify@aws-amplify-/ui-react      
npm start      

繼續閱讀