aws amplify接入前端完整教程


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

完整教程:https://zhuanlan.zhihu.com/p/51392376

 

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

 

 

9、使用amplify push命令,

 

 

 

 

 

8、修改app.js,添加amplify登錄UI組件

 

 

 

 9、安裝兩個amplify UI組件包

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

本地啟動服務后,效果展示:

npm start

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM