關(guān)于 Angular 與 AWS 組合您需要知道的一切
每個(gè)企業(yè)主,無論大小,都明確想要最適合他們企業(yè)的東西??紤]到這種方法,在 Web 應(yīng)用程序開發(fā)市場(chǎng)中掀起一股熱潮的是 Angular 與 AWS 的結(jié)合。這種結(jié)合正在極大地改變 Web 應(yīng)用程序開發(fā)市場(chǎng)。因此,在這篇博文中,我們?nèi)娼榻B了 Angular AWS 組合及其功能、為什么應(yīng)該使用 Angular AWS 組合以及如何使用 AWS 部署 Angular 應(yīng)用程序。
介紹
Angular 是一個(gè)平臺(tái)和框架,用于使用 TypeScript 和 HTML 構(gòu)建 SPA 或單頁應(yīng)用程序。然而,AWS 或 Amazon Web Services 是最著名的云平臺(tái)之一,它提供來自全球數(shù)據(jù)中心的眾多功能豐富的服務(wù)。
AWS 提供了一項(xiàng)名為 AWS Amplify 的功能,可讓您快速選擇所需的開發(fā)平臺(tái),這是您的理想選擇。這節(jié)省了時(shí)間并確保了前端的質(zhì)量,Angular 與 AWS 的組合更能增強(qiáng)這一點(diǎn),讓您擁有高質(zhì)量、用戶友好的應(yīng)用程序,這些應(yīng)用程序有效、高效且高度可擴(kuò)展?,F(xiàn)在,在進(jìn)入主題的細(xì)節(jié)之前,讓我們概述一下 Angular AWS 組合之間的關(guān)系。
Angular 與 AWS 的關(guān)系
通過解釋兩者功能的架構(gòu),可以快速而廣泛地理解 Angular 與 AWS 之間的關(guān)系。下面是使用 Amplify CLI 使用 AWS Amplify 配置的 Angular 應(yīng)用程序架構(gòu)。此 Amplify CLI 允許添加 Amazon DynamoDB、AWS Cognito、AWS S3 存儲(chǔ)、Amplify Hosting 等功能。
查看架構(gòu),我們意識(shí)到客戶端可以訪問在前端使用 Angular 而在后端使用 AWS 構(gòu)建的 Web 應(yīng)用程序。
要在客戶端應(yīng)用程序中訪問 AWS 后端,使用 AWS Amplify 工具鏈連接服務(wù)器和客戶端至關(guān)重要。
使用 AWS Amplify CLI,我們添加了由 Amazon Cognito 提供支持的身份驗(yàn)證。
然后,使用相同的 AWS CLI,我們?cè)俅问褂?Amplify CLI 添加了由 AWS AppSync 提供支持的 AWS DynamDB 提供支持的 DataStore。
然后,使用相同的 AWS Amplify CLI,我們將應(yīng)用程序資產(chǎn)存儲(chǔ)在 AWS S3 存儲(chǔ)中。
此外,我們?cè)?AWS S3 存儲(chǔ)上為我們的站點(diǎn)使用了 AWS Amplify 托管。
什么是 (AWS) 亞馬遜網(wǎng)絡(luò)服務(wù)?
Amazon Web Services (AWS) 是世界上發(fā)展最全面的云計(jì)算平臺(tái),由 Amazon 于 2002 年推出,它提供來自全球數(shù)據(jù)中心的 200 多種特色服務(wù)。AWS 是采用最廣泛的云平臺(tái)之一,提供多種按需操作,如內(nèi)容交付、計(jì)算能力、數(shù)據(jù)庫(kù)存儲(chǔ)等,可幫助您擴(kuò)展和發(fā)展。
AWS 或 Amazon Web Services 的功能
數(shù)以百萬計(jì)的客戶,包括快速發(fā)展的初創(chuàng)企業(yè)、大公司,甚至領(lǐng)先的政府機(jī)構(gòu),都在使用 AWS 來降低投資成本、變得更加敏捷并加快創(chuàng)新速度。這種廣泛流行背后的原因在于 AWS 的功能。為了更清楚地了解這一點(diǎn),讓我們看一下 AWS 的功能:
移動(dòng)友好訪問
無服務(wù)器云功能
數(shù)據(jù)庫(kù)
貯存
安全與合規(guī)
AWS 的其他特點(diǎn):
成本效益
有經(jīng)驗(yàn)的
可擴(kuò)展和彈性
靈活性
什么是 AWS 放大?
AWS Amplify 幫助開發(fā)人員在 AWS 云中高效構(gòu)建和部署無服務(wù)器應(yīng)用程序。它是一個(gè)全棧應(yīng)用程序平臺(tái),提供許多功能,如身份驗(yàn)證、數(shù)據(jù)庫(kù)、存儲(chǔ)、托管等。
AWS Amplify 最吸引人的因素是它允許在數(shù)小時(shí)內(nèi)構(gòu)建易于啟動(dòng)和擴(kuò)展的 Web 和移動(dòng)應(yīng)用程序的全棧。它可以在幾分鐘內(nèi)為您的 Web 或移動(dòng)應(yīng)用程序創(chuàng)建一個(gè)具有身份驗(yàn)證、數(shù)據(jù)、存儲(chǔ)等功能的跨平臺(tái)后端。
它提供了通過 Figma 集成從原型到代碼構(gòu)建前端 UI 的能力。它將應(yīng)用程序前端與 AWS 支持的后端連接起來,并通過點(diǎn)擊快速、安全、可靠地部署應(yīng)用程序。
AWS Amplify 的功能包括:
驗(yàn)證
分析
數(shù)據(jù)存儲(chǔ)
應(yīng)用程序接口
功能
地理
互動(dòng)
預(yù)測(cè)
發(fā)布訂閱
推送通知
貯存
為什么將 AWS Amplify 與 Angular 結(jié)合使用?
AWS Amplify 提供多種服務(wù),例如:
Amplify CLI,它有助于校準(zhǔn)有助于通過簡(jiǎn)單的命令行界面為后端提供支持的服務(wù)。
Amplify Libraries允許您使用以案例為中心的客戶端庫(kù),通過聲明性接口將您的應(yīng)用程序代碼集成到后端。
Amplify UI Components為 React Native、React、Angular、Vue 和 Flutter 等框架提供 UI 庫(kù)。
Amplify Hosting是核心 AWS 服務(wù)之一,它提供基于 git 的工作流程,用于持續(xù)部署和托管全棧 Web 應(yīng)用程序。您還可以在 Amplify 控制臺(tái)中找到由 Amplify CLI 創(chuàng)建的云資源。
什么是 Amplify CLI,為什么要使用它?
簡(jiǎn)而言之,我們可以說 Amplify CLI 充當(dāng)一個(gè)統(tǒng)一的工具鏈,用于為您的應(yīng)用程序創(chuàng)建、集成和管理 AWS 云服務(wù)。它補(bǔ)充了 AWS Amplify 庫(kù),為您提供端到端的解決方案,用于創(chuàng)建、配置和實(shí)施可擴(kuò)展的基于云的應(yīng)用程序,以及專注于開發(fā)人員效率的類似 Rails 的體驗(yàn)。AWS Amplify 不僅支持 JavaScript 應(yīng)用程序、框架,還支持 Angular、React、Vue、Swift(Native iOS)、Android(Native Android)和 Flutter 等語言。
使用 AWS 部署 Angular 應(yīng)用程序?
假設(shè)您希望使用 AWS 基礎(chǔ)設(shè)施部署 Angular 應(yīng)用程序。在這種情況下,您可以使用兩個(gè)選項(xiàng)來執(zhí)行相同的操作:
在 AWS S3 存儲(chǔ)中托管的靜態(tài) Web 應(yīng)用程序
從 github/Bitbucket/Gitlab 存儲(chǔ)庫(kù)自動(dòng)部署。(需要從 Amplify CLI 添加 Amplify 托管)
對(duì)于靜態(tài)部署方式,應(yīng)用程序文件是一個(gè)手動(dòng)過程,您必須在其中上傳所有應(yīng)用程序構(gòu)建包文件。在第二種方法中,從 github 存儲(chǔ)庫(kù)分支進(jìn)行動(dòng)態(tài)部署,您必須手動(dòng)配置構(gòu)建腳本。該腳本將根據(jù)您編寫的腳本自動(dòng)部署應(yīng)用程序。
使用 AWS Amplify 作為無服務(wù)器后端構(gòu)建 Angular 應(yīng)用程序。
現(xiàn)在我們已經(jīng)理解了Angular 與 AWS 的結(jié)合。讓我們使用 AWS Amplify 作為無服務(wù)器后端創(chuàng)建一個(gè) Angular 應(yīng)用程序。但是,在繼續(xù)部署過程時(shí),在繼續(xù)之前必須考慮一些先決條件:
Node.js v14.x 或更高版本
npm v6.14.4 或更高版本
git v2.14.1 或更高版本
注意:要進(jìn)一步進(jìn)行安裝和配置,您必須擁有 AWS 帳戶,因?yàn)樗抢^續(xù)進(jìn)行部署過程的必要條件。
繼續(xù)部署過程,讓我們按照以下步驟為 Angular 項(xiàng)目設(shè)置和配置 AWS amplify。
第 1 步:全局安裝 Amplify CLI 并進(jìn)行配置
運(yùn)行命令并安裝 Amplify CLI:npm 安裝-g @aws-amplify/cli
在開始 Amplify CLI 設(shè)置之前,您必須使用以下命令配置 AWS Amplify: amplify configure 命令將要求登錄 AWS 帳戶以訪問 AWS 控制臺(tái)。登錄后,Amplify CLI 將要求您創(chuàng)建或使用現(xiàn)有的 IAM 用戶:
使用 AWS 控制臺(tái)完成用戶創(chuàng)建步驟: < URL > 按照 < URL > 并在AdministratorAccess-Amplify下創(chuàng)建一個(gè)用戶,為您配置您的 AWS 賬戶和資源,如 AppSync、Cognito 等。Amplify CLI 然后會(huì)要求您輸入您創(chuàng)建的用于連接 Amplify CLI 的 IAM 用戶的accessKeyId和secretAccessKey 。
添加您新創(chuàng)建的用戶的訪問密鑰:
這將在您的本地計(jì)算機(jī)中創(chuàng)建/更新 AWS 配置文件。
畢竟,您已成功配置新的 AWS Amplify 用戶。
第 2 步:創(chuàng)建一個(gè)新的 Angular 應(yīng)用程序
此后,您可以使用下面給出的命令移動(dòng)角度應(yīng)用程序的文件夾:
注意: Angular 6+ 版本沒有舊版本中提供的“全局”或“進(jìn)程”墊片。您必須將下面給出的代碼添加到您的src/polyfills.ts文件中以重新創(chuàng)建它們:
要使 Angular 應(yīng)用程序在 IE11 上運(yùn)行,您需要將以下內(nèi)容導(dǎo)入到您的src/polyfills.ts文件中:
為您的商業(yè)理念發(fā)揮 Angular 的全部力量。
從 Bacancy聘請(qǐng) AngularJS 開發(fā)人員,見證您的想法變?yōu)楝F(xiàn)實(shí),我們經(jīng)驗(yàn)豐富的開發(fā)人員緊跟您的 Web 應(yīng)用程序開發(fā)需求。
第 3 步:使用 AWS Amplify 創(chuàng)建后端
在此階段,您有一個(gè)正在運(yùn)行的 Angular 應(yīng)用程序,是時(shí)候使用 AWS Amplify Angular 為此應(yīng)用程序設(shè)置 AWS Amplify,以便您可以創(chuàng)建支持該應(yīng)用程序所需的必要后端服務(wù)。
從項(xiàng)目文件夾的根目錄打開命令提示符并運(yùn)行命令:
初始化后,Amplify 會(huì)詢問有關(guān)應(yīng)用程序的一些信息。對(duì)于所有較新版本的 Angular 應(yīng)用程序,您將需要將分發(fā)目錄路徑從“dist 更改為 dist/amplify-app”,以匹配 Angular 項(xiàng)目的構(gòu)建方式和位置。
?輸入項(xiàng)目名稱:<項(xiàng)目名稱>
下面給出的配置將被應(yīng)用:
項(xiàng)目信息:
| 名稱:<項(xiàng)目名稱>
| 環(huán)境:開發(fā)
| 默認(rèn)編輯器:Visual Studio Code
| 應(yīng)用程序類型:javascript
| Javascript框架:角度
| 源碼目錄路徑:src
| 分發(fā)目錄路徑:dist
| 構(gòu)建命令:npm run-script build
| 啟動(dòng)命令:ng serve
用上面的配置初始化項(xiàng)目?是
使用默認(rèn)提供程序awscloudformation
選擇您首選的身份驗(yàn)證方法:AWS 配置文件
要了解有關(guān) AWS 配置文件的更多信息,請(qǐng)參見此處
請(qǐng)選擇您要使用的配置文件:默認(rèn)
當(dāng)您初始化一個(gè)新的 Amplify 項(xiàng)目時(shí),以下是將對(duì)您的項(xiàng)目進(jìn)行的更改:
這將創(chuàng)建一個(gè)名為 amplify 的根目錄,用于存儲(chǔ)后端資源。此后,您將添加更多功能,如 GraphQL、身份驗(yàn)證、存儲(chǔ)、API、存儲(chǔ),并為 API 建立授權(quán)規(guī)則。當(dāng)您添加 Amplify 服務(wù)時(shí)。然后,Amplify 文件夾會(huì)增長(zhǎng)并創(chuàng)建負(fù)責(zé)定義后端堆棧的模板。
它在 src 目錄中創(chuàng)建一個(gè)名為aws-exports.js 的文件,負(fù)責(zé)保存您使用 Amplify 添加的服務(wù)的所有配置。這允許 Amplify 客戶端連接后端服務(wù)。
它對(duì) .gitignore 文件做了一些修改,將一些配置文件添加到忽略列表中。
在 Amplify 中,云項(xiàng)目在 Amplofy 控制臺(tái)中創(chuàng)建,可通過 Amplify 控制臺(tái)訪問??刂婆_(tái)提供后端環(huán)境列表。
資料來源: Create Amplify 后端
第 4 步:將 Amplify 庫(kù)添加到項(xiàng)目中
在 Project 目錄中,運(yùn)行以下命令并安裝用于 Angular 的 Amplify 庫(kù)并運(yùn)行應(yīng)用程序:
@ aws-amplify/ui-angular導(dǎo)出一組 Angular 組件和提供程序,可幫助開發(fā)人員將應(yīng)用程序與 AWS-Amplify 庫(kù)集成。
如果您為 Typescript 啟用了嚴(yán)格模式并遇到以下錯(cuò)誤。
對(duì)于解決方案,您必須使用下面編寫的代碼在與aws-exports相同級(jí)別上創(chuàng)建aws-exports.d.ts文件。
將 Amplify Authenticator UI 模塊 (AmplifyAuthenticatorModule) 導(dǎo)入 AppModule。
從'@aws-amplify/ui-angular'導(dǎo)入{AmplifyAuthenticatorModule};@NgModule({
聲明:[
應(yīng)用組件
],
進(jìn)口:[
瀏覽器模塊,
應(yīng)用路由模塊,
/* 使用 AmplifyAuthenticatorModule 配置 App */
放大認(rèn)證模塊
],
供應(yīng)商:[],
引導(dǎo)程序:[AppComponent]})導(dǎo)出類 AppModule { }
第 5 步:使用 GraphQL API 和數(shù)據(jù)庫(kù)將 Amplify 后端連接到應(yīng)用程序
使用GraphQL轉(zhuǎn)換準(zhǔn)備數(shù)據(jù)模型:
首先從您的應(yīng)用程序目錄的根目錄打開命令 promt,然后將 GraphQL APP 添加到將通過執(zhí)行以下命令自動(dòng)配置數(shù)據(jù)庫(kù)的應(yīng)用程序:
它將要求您提及服務(wù),然后您希望從任何默認(rèn)數(shù)據(jù)模型架構(gòu)開始。
?從以下服務(wù)之一中選擇:
#GraphQL
? 這是我們將創(chuàng)建的 GraphQL API。選擇要編輯或繼續(xù)的設(shè)置
# Continue
? 選擇一個(gè)模式模板:
# 帶有字段的單個(gè)對(duì)象(例如,“Todo”與
ID、名稱、描述)
? 您現(xiàn)在要編輯模式嗎?(是/否)
#是
自動(dòng)生成的架構(gòu)現(xiàn)在用于 Todo 應(yīng)用程序,如果您希望它有所不同,那么您只需替換路徑中的 GraphQL 架構(gòu)即可:
放大/后端/api/RestaurantAPI/schema.graphql使用以下代碼:
如果您注意到,@Model是 Amplifies GraphQL 轉(zhuǎn)換服務(wù)提供的指令。
GraphQL 轉(zhuǎn)換庫(kù)允許您使用自定義指令來幫助您定義數(shù)據(jù)模型、身份驗(yàn)證和授權(quán)規(guī)則。
通過@model指令修飾的類型將自動(dòng)為該類型和模式創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)表,用于 CRUD 和列表操作
從數(shù)據(jù)庫(kù)中導(dǎo)出 API。
使用數(shù)據(jù)庫(kù)創(chuàng)建 API
使用下面的命令并為您配置的 API 創(chuàng)建所有必需的后端資源。
這將覆蓋您當(dāng)前的 graphql 查詢、變更和訂閱:是
通過 Amplify CLI 生成代碼:
部署完成后,CLI 將在 src/graphql 中創(chuàng)建一個(gè)新目錄,其中包含數(shù)據(jù)模型所需的所有 API 操作。CLI 還在 app 目錄中創(chuàng)建了一個(gè)名為 API.service.ts 的 API 服務(wù)文件。
您可以使用以下命令檢查 Amplify 的狀態(tài):
該命令將為您提供當(dāng)前環(huán)境的當(dāng)前狀態(tài)和詳細(xì)信息、已創(chuàng)建的類別以及這些類別在 Amplify 項(xiàng)目中的狀態(tài)
例子:
當(dāng)前環(huán)境:dev| 類別 | 資源名稱 | 操作 | 提供商插件 || ------ | -------------- | ---------- | ------------------ || 應(yīng)用程序接口 | 餐廳API | 沒有變化 | awscloudformation |
現(xiàn)在,在此階段,您已經(jīng)創(chuàng)建了一個(gè) API,畢竟,是時(shí)候測(cè)試由 Amplify 支持的 API 了。
要測(cè)試 API,您可以打開 AWS 控制臺(tái)并選擇 API 網(wǎng)關(guān)類型:
執(zhí)行命令后,它會(huì)提示您選擇 API 類型,您必須在其中選擇 GraphQL,選擇后,它會(huì)打開 AWS AppSync 控制臺(tái),您可以在服務(wù)器上編寫和執(zhí)行查詢、變更或訂閱并查看您的客戶端應(yīng)用程序中的更改。
第 6 步:建立前端到后端的連接
在項(xiàng)目資源管理器中找到src/main.ts并添加以下代碼以使用 Amplify 配置 Angular 項(xiàng)目:
Amplify for angular 正在使用節(jié)點(diǎn)作為后端,因此,您必須在文件tsconfig.app.json的編譯器選項(xiàng)類型中添加“節(jié)點(diǎn)”值
按照指南進(jìn)行連接:Connect Frontend with backend
第七步:為App添加Authentication并創(chuàng)建認(rèn)證服務(wù)
對(duì)于身份驗(yàn)證,Amplify 使用 Amazon Cognito 作為其主要身份驗(yàn)證提供程序,Cognito 是一種風(fēng)暴用戶目錄服務(wù),負(fù)責(zé)處理用戶注冊(cè)、身份驗(yàn)證、帳戶恢復(fù)和各種其他類似操作。
使用以下命令創(chuàng)建身份驗(yàn)證服務(wù):
要部署此服務(wù),您必須通過以下代碼運(yùn)行 push 命令:
現(xiàn)在,執(zhí)行命令后,認(rèn)證服務(wù)已經(jīng)部署完畢,可以開始使用了。
創(chuàng)建登錄界面:
當(dāng)您已經(jīng)將身份驗(yàn)證服務(wù)部署到 AWS 時(shí),您需要將其部署到您的 Angular 應(yīng)用程序。最初,創(chuàng)建登錄流程是最繁瑣、混亂和復(fù)雜的。但是,Amplify 提供了完整的 UI 組件身份驗(yàn)證,可以通過aws-exports.js文件中指定的配置使用。
在這里,您必須在樣式表(例如 src/style.css)中添加 Authenticator 樣式以獲得 UI 組件的完美外觀。
找到并打開src/app/app.component.html,將 app-restaurants 用<amplify-authenticator>包裹起來,開啟鑒權(quán):
如果你看到 Unhandled Promise rejection: [message] ; 區(qū):
導(dǎo)入“zone.js/dist/zone”;// 包含在 Angular CLI 中。(任何窗口).Zone['__zone_symbol__ignoreConsoleErrorUncaughtError'] = true;
運(yùn)行應(yīng)用程序并檢查身份驗(yàn)證流程如何保護(hù)應(yīng)用程序:
現(xiàn)在您的應(yīng)用程序正在使用允許用戶注冊(cè)和登錄的身份驗(yàn)證流程。此外,您可以自定義給定組件以添加和刪除字段、更新 sterling 或其他配置。
第 8 步:使用 AWS 部署和托管 Angular 應(yīng)用程序
當(dāng)您不打算部署應(yīng)用程序時(shí),構(gòu)建應(yīng)用程序的目的是什么。因此,現(xiàn)在您已經(jīng)完成了應(yīng)用程序的構(gòu)建,是時(shí)候使用 Amplify Hosting 將其部署到 Web 上了。
讓我們看看如何將托管添加到應(yīng)用程序:
Amplify 托管允許為您提供兩種選項(xiàng),您可以使用它們?cè)谠粕喜渴饝?yīng)用程序,一種是您可以手動(dòng)部署 Web 應(yīng)用程序或使用 git 工作流設(shè)置自動(dòng)持續(xù)部署。
您需要從項(xiàng)目的根目錄運(yùn)行下面給出的命令。
?選擇要執(zhí)行的插件模塊:# Hosting with Amplify Console(使用自定義域托管,持續(xù)部署)
?選擇類型:# 手動(dòng)部署
發(fā)布您的應(yīng)用:
現(xiàn)在,在這一階段,您已經(jīng)添加/配置了 amplify 托管,距離在云上部署應(yīng)用程序僅一步之遙。
使用下面的命令將應(yīng)用程序發(fā)布到云存儲(chǔ)。
執(zhí)行命令后,您可以在 AWS 域上實(shí)時(shí)查看您的應(yīng)用程序。
您應(yīng)該在下一個(gè)項(xiàng)目中結(jié)合使用 Angular 和 AWS 嗎?
現(xiàn)在,我們已經(jīng)通過 AWS 和 AWS Amplify 全面介紹了 Angular 的各個(gè)方面。出現(xiàn)的核心問題是,該組合是否適合您的下一個(gè)項(xiàng)目或適合目的。答案肯定是肯定的,因?yàn)槟鷮@得強(qiáng)大的后端和出色的前端,以及 Amazon 的可靠性和 Angular 的可信度。
結(jié)論
最后,如果 Angular 與 AWS 的組合是您 Web 應(yīng)用程序開發(fā)的最重要選擇,我們希望這篇博文一定對(duì)您有深刻的見解,讓您做出最后決定。此外,如果您是企業(yè)主并且仍然對(duì)帶有 Angular 的 AWS 是否是您的 Web 應(yīng)用程序開發(fā)的理想選擇感到困惑,那么您可以聘請(qǐng)像 Bacancy 這樣的Angularjs 開發(fā)公司,并將您的下一個(gè)項(xiàng)目的有效性和效率提升到一個(gè)新的水平。
(言鼎科技)專做軟件開發(fā),微信小程序,網(wǎng)站開發(fā),軟件外包,手機(jī)APP開發(fā),歡迎資訊!