- 了解如何構(gòu)建解決實(shí)際問(wèn)題的無(wú)服務(wù)器應(yīng)用程序。
- 了解這些技術(shù)的應(yīng)用場(chǎng)景(以及局限)。
- 創(chuàng)建與DynamoDB和NoSQL數(shù)據(jù)庫(kù)進(jìn)行交互的GraphQL API。
- 學(xué)習(xí)身份驗(yàn)證的工作原理,并了解身份驗(yàn)證和授權(quán)之間的區(qū)別。
- 深入了解無(wú)服務(wù)器函數(shù)的工作原理及其重要性。
- 在AWS上構(gòu)建全棧應(yīng)用程序,并使用Amplify DataStore構(gòu)建脫機(jī)應(yīng)用程序。
云計(jì)算通常與后端開(kāi)發(fā)和DevOps有關(guān)。但隨著Serverless技術(shù)的興起以及新一代服務(wù)和框架的出現(xiàn),前端和移動(dòng)開(kāi)發(fā)人員也可以構(gòu)建強(qiáng)大的應(yīng)用程序,并且其中支持生產(chǎn)就緒的功能包括身份驗(yàn)證和授權(quán),API網(wǎng)關(guān),聊天機(jī)器人,增強(qiáng)現(xiàn)實(shí)場(chǎng)景等。本書(shū)向你展示了如何實(shí)現(xiàn)上述功能的步驟。
Amazon Web Services的倡導(dǎo)者Nader Dabit將指導(dǎo)你完成使用React、AWS、GraphQL和AWS Amplify構(gòu)建全棧應(yīng)用程序的過(guò)程。你將學(xué)習(xí)如何在客戶端創(chuàng)建服務(wù)并將其集成到客戶端應(yīng)用程序中,同時(shí)還會(huì)學(xué)習(xí)常規(guī)的實(shí)踐、部署策略、富媒體管理,以及整個(gè)過(guò)程中的持續(xù)集成和交付。
前言
本書(shū)緣起
次學(xué)習(xí)編程時(shí),我對(duì)軟件開(kāi)發(fā)工作的細(xì)節(jié)知之甚少。當(dāng)時(shí)一心只想著構(gòu)建一款應(yīng)用程序,當(dāng)我開(kāi)始研究并磕磕碰碰地完成想做的所有事情時(shí),才知道自己是多么天真。
我了解的重點(diǎn)之一就是,應(yīng)用程序通常由兩個(gè)部分組成:前端(客戶端代碼)以及后端API 和服務(wù)。當(dāng)時(shí),云技術(shù)還處于起步階段,至少學(xué)習(xí)如何構(gòu)建全棧應(yīng)用程序是令人頭疼的。對(duì)于我來(lái)說(shuō)情況可能更糟,因?yàn)槲蚁霕?gòu)建原生的移動(dòng)應(yīng)用程序,并且著手構(gòu)建移動(dòng)應(yīng)用程序比構(gòu)建Web 應(yīng)用程序要困難得多。
信息技術(shù)經(jīng)過(guò)10 年的迅猛發(fā)展后,情況有了很大的改觀。曾經(jīng)由一大批開(kāi)發(fā)者完成的工作現(xiàn)在有時(shí)可以由一名開(kāi)發(fā)人員完成。React Native、Flutter 和Cordova 等工具使得開(kāi)發(fā)者可以使用單個(gè)代碼庫(kù)構(gòu)建和交付跨平臺(tái)的移動(dòng)應(yīng)用程序。Amplify、Firebase 等云技術(shù)使得相同的開(kāi)發(fā)人員也可以利用云計(jì)算技術(shù)以前所未有的速度更快地構(gòu)建后端。
我想我們正在迎接一種新的范式,它使得成為全棧開(kāi)發(fā)者比以往任何時(shí)候都容易,并且全棧開(kāi)發(fā)者的定義正在發(fā)生變化。寫(xiě)這本書(shū)是為了展示我對(duì)這種新范式在實(shí)踐中的看法,并介紹一種專門(mén)利用前沿的前端和云技術(shù)而創(chuàng)建的技術(shù)。我認(rèn)為本書(shū)描述的是軟件工程的未來(lái)。
目標(biāo)讀者
本書(shū)適用于希望構(gòu)建全棧應(yīng)用程序的軟件工程師,特別是對(duì)云計(jì)算感興趣的。它還適用于希望學(xué)習(xí)如何使用現(xiàn)有技術(shù)來(lái)通過(guò)云技術(shù)構(gòu)建全棧應(yīng)用程序的前端開(kāi)發(fā)人員。
對(duì)于CTO 和初創(chuàng)公司的創(chuàng)業(yè)者來(lái)說(shuō),這也是一個(gè)很好的資源,因?yàn)樗麄兿M褂蒙俚馁Y源來(lái)限度地提高生產(chǎn)效率和開(kāi)發(fā)速度。本書(shū)概述的技術(shù)是快速原型開(kāi)發(fā)和創(chuàng)意實(shí)驗(yàn)的理想之選,它可以讓開(kāi)發(fā)人員和創(chuàng)業(yè)者將其創(chuàng)意迅速地推向市場(chǎng),并在取得成功的情況下提供可擴(kuò)展且健壯的產(chǎn)品。
本書(shū)概要
本書(shū)的目的是向讀者介紹使用React 和無(wú)服務(wù)器技術(shù)構(gòu)建真實(shí)、可擴(kuò)展的全棧應(yīng)用程序所需的所有步驟。通過(guò)在每章中構(gòu)建不同的應(yīng)用程序,逐一介紹相關(guān)功能(例如身份驗(yàn)證、API 和數(shù)據(jù))以及一些在前端和后端實(shí)現(xiàn)這些功能的技術(shù)。
你創(chuàng)建的每個(gè)應(yīng)用程序都將基于上一章中學(xué)到的知識(shí)。在后一章中,你將構(gòu)建一個(gè)復(fù)雜的應(yīng)用程序,它將用到在實(shí)際工作或項(xiàng)目初創(chuàng)階段所需的很多云服務(wù)。當(dāng)你完成本書(shū)的學(xué)習(xí)之后,應(yīng)該具備了通過(guò)React 和AWS 云技術(shù)構(gòu)建自己的無(wú)服務(wù)器應(yīng)用程序的知識(shí)和能力。
第1 章 無(wú)服務(wù)器計(jì)算時(shí)代的全棧開(kāi)發(fā)
在本章中,我們將介紹無(wú)服務(wù)器理念,無(wú)服務(wù)器應(yīng)用程序的特征和優(yōu)點(diǎn),以及AWS 和AWS Amplify CLI。
第2 章 AWS Amplify 簡(jiǎn)介
在本章中,將使用AWS Amplify 創(chuàng)建和部署一項(xiàng)無(wú)服務(wù)器功能。我們將創(chuàng)建該功能,然后添加API 并與其交互。
第3 章 創(chuàng)建你的款應(yīng)用
在這里,我們將通過(guò)構(gòu)建一個(gè)筆記(notes)應(yīng)用來(lái)演示從頭創(chuàng)建一個(gè)新的全棧應(yīng)用程序的基本流程。我們將創(chuàng)建一個(gè)新的React 應(yīng)用程序,初始化一個(gè)新的Amplify 項(xiàng)目,添加GraphQL API,然后從客戶端(React)應(yīng)用程序連接到API 并與之交互。
第4 章 身份驗(yàn)證簡(jiǎn)介
在本章中,我們將逐步完成向應(yīng)用程序添加身份驗(yàn)證的過(guò)程。首先將創(chuàng)建一個(gè)新的React 應(yīng)用程序,并使用AWS Amplify React 庫(kù)中的高階組件(HOC)withAuthenticator 添加基本的身份驗(yàn)證功能。我們將讀取用戶的元數(shù)據(jù),并創(chuàng)建一個(gè)用戶資料頁(yè)面,以允許用戶查看其信息。
第5 章 自定義身份驗(yàn)證策略
在本章中,我們將通過(guò)使用React、React Router 和AWS Amplify 創(chuàng)建自定義身份驗(yàn)證流程來(lái)進(jìn)一步學(xué)習(xí)身份驗(yàn)證。該應(yīng)用程序?qū)?cè)頁(yè)面,登錄頁(yè)面和忘記密碼頁(yè)面。登錄后,將出現(xiàn)一個(gè)主菜單,以便將用戶導(dǎo)航到個(gè)人資料頁(yè)面、地圖頁(yè)面和歡迎頁(yè)面,并且歡迎頁(yè)面將作為該應(yīng)用程序的主視圖。
第6 章 無(wú)服務(wù)器函數(shù)進(jìn)階(一)和第7 章 無(wú)服務(wù)器函數(shù)進(jìn)階(二)
在這里,我們將介紹無(wú)服務(wù)器函數(shù)以及如何在React 應(yīng)用程序中與之交互。將通過(guò)創(chuàng)建一個(gè)支持CORS 保護(hù)的API 獲取柴犬(shiba inu)圖片的應(yīng)用程序來(lái)演示創(chuàng)建、更新和刪除等操作的無(wú)服務(wù)器函數(shù),相關(guān)的代碼存放在一個(gè)AWS Lambda 函數(shù)中,將使用AWS Amplify CLI 創(chuàng)建和配置這個(gè)函數(shù)。
第8 章 AWS AppSync 應(yīng)用
我們將基于第3 章的知識(shí)構(gòu)建一個(gè)更復(fù)雜的API,它包括多對(duì)多關(guān)系和多種授權(quán)類型。我們將創(chuàng)建一個(gè)事件應(yīng)用程序,它允許管理員創(chuàng)建表演節(jié)目和舞臺(tái)。將讓所有用戶都能夠讀取節(jié)目信息,無(wú)論他們是否登錄,但僅允許已登錄的管理員創(chuàng)建、更新和刪除節(jié)目和舞臺(tái)。
第9 章 使用Amplify DataStore 構(gòu)建離線應(yīng)用程序
在本章中,我們將介紹如何使用Amplify DataStore 實(shí)現(xiàn)離線功能。
第10 章 圖像與存儲(chǔ)
本章我們將學(xué)習(xí)如何創(chuàng)建圖片共享應(yīng)用,該應(yīng)用程序?qū)⒃试S用戶上傳和查看圖片。
第11 章 托管:將你的應(yīng)用程序部署到支持CI 和CD 的Amplify Console在后一章中,我們將會(huì)用到第10 章創(chuàng)建的圖片共享應(yīng)用程序,并使用Amplify Console 將其部署到線上。我們還會(huì)學(xué)習(xí)將更新合并到master 分支時(shí),啟動(dòng)新的構(gòu)建來(lái)添加持續(xù)集成(CI)和持續(xù)部署(CD)功能。后,我們將學(xué)習(xí)如何添加自定義域,以便讀者能夠?qū)?yīng)用程序和自己的實(shí)際URL 關(guān)聯(lián)。
排版約定
本書(shū)中將使用以下排版約定:
斜體(Italic)
表示新的術(shù)語(yǔ),URL,電子郵件地址,文件和文件擴(kuò)展名。
等寬字體(Constant width)
表示程序列表,以及在段落中引用程序元素,例如變量或函數(shù)名、數(shù)據(jù)庫(kù)、數(shù)據(jù)類型、環(huán)境變量、語(yǔ)句和關(guān)鍵字。
等寬粗體(Constant width bold)
表示應(yīng)由用戶直接輸入的命令或其他文本。
等寬斜體(Constant width italic)
表示應(yīng)由用戶提供的值或由上下文確定的值。
代碼示例
補(bǔ)充材料(代碼示例、練習(xí)等)可以通過(guò)如下網(wǎng)址下載:https://github.com/dabit3/full-stack-serverless-code。
如果你在使用代碼示例時(shí)遇到技術(shù)問(wèn)題或疑問(wèn), 請(qǐng)發(fā)送電子郵件至bookquestions@oreilly.com。
本書(shū)中的代碼可以幫助你完善工作。一般而言,本書(shū)中的源代碼,不需要得到我們的許可就可以應(yīng)用到你自己的程序或文檔中,除非你希望重新發(fā)布了這些代碼的副本。舉例來(lái)說(shuō),一個(gè)程序中用到本書(shū)中的若干代碼塊不需要許可授權(quán)。銷售或發(fā)布包含OReilly 圖書(shū)中的代碼樣例的CD-Rom 不需要授權(quán)許可;卮鹨粋(gè)問(wèn)題引用本書(shū)中的內(nèi)容或代碼不需要授權(quán)許可。在你的產(chǎn)品文檔中加入大量的本書(shū)代碼樣例需要授權(quán)許可。
我們建議但不強(qiáng)制要求標(biāo)明出處。出處通常包括標(biāo)題,作者,發(fā)行商和ISBN。比如:Full Stack Serverless by Nader Dabit (OReilly). Copyright 2020 Nader Dabit, 978-1-492-05989-9。
如果你覺(jué)得使用代碼樣例超出了上述許可范圍,請(qǐng)通過(guò)permissions@oreilly.com 與我們?nèi)〉寐?lián)系。
OReilly 在線學(xué)習(xí)平臺(tái)(OReilly Online Learning)
近40 年來(lái),OReilly Media 致力于提供技術(shù)和商業(yè)
培訓(xùn)、知識(shí)和卓越見(jiàn)解,來(lái)幫助眾多公司取得成功。
我們擁有獨(dú)一無(wú)二的專家和革新者組成的龐大網(wǎng)絡(luò),他們通過(guò)圖書(shū)、文章、會(huì)議和我們的在線學(xué)習(xí)平臺(tái)分享他們的知識(shí)和經(jīng)驗(yàn)。OReilly 的在線學(xué)習(xí)平臺(tái)允許你按需訪問(wèn)現(xiàn)場(chǎng)培訓(xùn)課程、深入的學(xué)習(xí)路徑、交互式編程環(huán)境,以及OReilly 和200 多家其他出版商提供的大量文本和視頻資源。有關(guān)的更多信息,請(qǐng)?jiān)L問(wèn)http://oreilly.com。
聯(lián)系我們
美國(guó):
OReilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中國(guó):
北京市西城區(qū)西直門(mén)南大街2號(hào)成銘大廈C座807室(100035)
奧萊利技術(shù)咨詢(北京)有限公司
致謝
感謝我的妻子Lilly,她在我的職業(yè)生涯中一直堅(jiān)定地支持著我,當(dāng)我為了寫(xiě)這本書(shū)在辦公室工作到很晚,有時(shí)在家也工作到很晚的時(shí)候,她把我的生活打理得井井有條。
感謝我的孩子,Victor 和Eli,他們都很棒并且是我靈感的源泉,我非常愛(ài)你們。
感謝我的父母,是你們讓我有機(jī)會(huì)學(xué)習(xí),讓我獲得人生的第二、第三和第四次機(jī)會(huì)。
我要感謝許多團(tuán)隊(duì)和個(gè)人: 感謝整個(gè)AWS 移動(dòng)團(tuán)隊(duì),是他們大膽雇了剛結(jié)束混亂的咨詢職業(yè)生涯的我,讓我有機(jī)會(huì)與我見(jiàn)過(guò)的聰明的人一起工作。感謝Michael Paris, Mohit Srivastava, Dennis Hills, Adrian Hall, Richard Threlkald, Michael Labieniec, Rohan Deshpande, Amit Patel,以及所有其他的團(tuán)隊(duì)成員,他們教會(huì)了我在新工作中需要學(xué)習(xí)的知識(shí)。感謝Russ Davis、Lee Johnson 和SchoolStatus,是他們給了我在這份工作中學(xué)習(xí)前沿技術(shù)的機(jī)會(huì),正是這份工作讓我終進(jìn)入了咨詢行業(yè)。感謝Brian Noah、Nate Lubeck 和我在Egood 的團(tuán)隊(duì),這是我得到的份真正的技術(shù)工作,它讓我接觸到技術(shù)交流大會(huì)的世界,以及成為一名偉大的開(kāi)發(fā)者所需要的東西。
Nader Dabit是Amazon Web Services的一名高級(jí)開(kāi)發(fā)者及其擁護(hù)者,擅長(zhǎng)跨平臺(tái)和云服務(wù)的應(yīng)用程序開(kāi)發(fā)。他與客戶端團(tuán)隊(duì)一起通力合作,改善了客戶端SDK的開(kāi)發(fā)體驗(yàn)。此前,Nader通過(guò)其公司React Native Training為很多大公司提供了使用React和React Native框架構(gòu)建應(yīng)用程序的培訓(xùn)服務(wù),其中包括Amazon,、Microsoft、Salesforce和American Express等。
目錄
前言 .1
第1 章 無(wú)服務(wù)器計(jì)算時(shí)代的全棧開(kāi)發(fā) 9
1.1 當(dāng)前流行的無(wú)服務(wù)器理念 10
1.1.1 無(wú)服務(wù)器應(yīng)用的特征 . 11
1.1.2 無(wú)服務(wù)器架構(gòu)的優(yōu)點(diǎn) . 11
1.1.3 無(wú)服務(wù)器架構(gòu)的不同實(shí)現(xiàn) 14
1.2 AWS 簡(jiǎn)介 17
1.2.1 關(guān)于AWS 17
1.2.2 AWS 上的全棧無(wú)服務(wù)器特性 17
1.2.3 Amplify CLI 17
1.3 AWS Amplify CLI 簡(jiǎn)介 20
1.3.1 安裝和配置Amplify CLI 21
1.3.2 初始化你的個(gè)Amplify 項(xiàng)目 22
1.3.3 創(chuàng)建和部署你的個(gè)服務(wù) 25
1.3.4 刪除資源 27
1.4 小結(jié) 28
第2 章 AWS Amplify 簡(jiǎn)介 29
2.1 創(chuàng)建和部署無(wú)服務(wù)器函數(shù) 30
2.1.1 創(chuàng)建React 應(yīng)用程序并安裝依賴項(xiàng) 31
2.1.2 使用Amplify CLI 創(chuàng)建新的無(wú)服務(wù)器函數(shù) . 32
2.1.3 代碼解析 33
2.1.4 創(chuàng)建路由/coins 33
2.2 添加API 34
2.2.1 創(chuàng)建新的API. 35
2.2.2 部署API 和Lambda 函數(shù) 35
2.3 與新API 進(jìn)行交互 . 36
2.3.1 配置客戶端應(yīng)用程序與Amplify 協(xié)同工作. 36
2.3.2 Amplify 客戶端API 類 . 36
2.3.3 在React 中調(diào)用API 并渲染數(shù)據(jù) 37
2.4 更新函數(shù)以調(diào)用另一個(gè)API 39
2.4.1 安裝Axios 39
2.4.2 更新函數(shù) 40
2.4.3 更新客戶端應(yīng)用 41
2.5 小結(jié) 42
第 3 章 創(chuàng)建你的款應(yīng)用 43
3.1 GraphQL 簡(jiǎn)介 43
3.1.1 GraphQL 是什么? . 43
3.1.2 GraphQL API 的構(gòu)成 . 44
3.1.3 GraphQL 操作 45
3.2 創(chuàng)建GraphQL API 47
3.3 查看GraphQL API 并與之交互 49
3.4 構(gòu)建React 應(yīng)用程序 51
3.4.1 列出筆記(GraphQL 查詢) . 51
3.4.2 創(chuàng)建筆記(GraphQL 變更) . 56
3.4.3 刪除筆記(GraphQL 變更) . 59
3.4.4 更新筆記(GraphQL 變更) . 61
3.4.5 實(shí)時(shí)數(shù)據(jù)(GraphQL 訂閱) . 63
3.5 小結(jié) 64
第4 章 身份驗(yàn)證簡(jiǎn)介 .66
4.1 Amazon Cognito 簡(jiǎn)介 67
4.1.1 Amazon Cognito 的工作原理 . 67
4.1.2 Amazon Cognito 與AWS Amplify 的集成 68
4.2 創(chuàng)建React 應(yīng)用程序并添加Amplify . 69
客戶端身份驗(yàn)證概述 . 70
4.3 構(gòu)建應(yīng)用程序 71
4.3.1 創(chuàng)建文件和文件夾結(jié)構(gòu) 71
4.3.2 創(chuàng)建個(gè)組件 72
4.3.3 Public 組件 . 73
4.3.4 Nav 組件 73
4.3.5 Protected 組件 74
4.3.6 Router 組件 . 76
4.3.7 Profile 組件 . 77
4.3.8 UI 美化組件 79
4.3.9 配置應(yīng)用程序 79
4.3.10 測(cè)試應(yīng)用程序 . 79
4.4 小結(jié) 80
第5 章 自定義身份驗(yàn)證策略 81
5.1 創(chuàng)建protectedRoute 鉤子 82
5.2 創(chuàng)建表單 83
5.2.1 登錄組件(SignIn) 87
5.2.2 注冊(cè)組件(SignUp) . 88
5.2.3 注冊(cè)確認(rèn)組件(ConfirmSignUp) . 89
5.2.4 ForgotPassword 組件 . 89
5.2.5 ForgotPasswordSubmit 組件 90
5.2.6 完善Form.js 91
5.2.7 updateForm 輔助函數(shù) 93
5.2.8 renderForm 函數(shù) 94
5.2.9 表單類型切換 95
5.2.10 更新Profile 組件 96
5.2.11 測(cè)試應(yīng)用程序 . 98
5.3 小結(jié) 98