關(guān)于 Angular 與 AWS 組合您需要知道的一切

yanding 2023-05-26 537

每個(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 等功能。

關(guān)于 Angular 與 AWS 組合您需要知道的一切

  • 查看架構(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 等語言。

關(guān)于 Angular 與 AWS 組合您需要知道的一切

使用 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 用戶:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
指定 AWS 區(qū)域。?region: <你喜歡的地區(qū)>指定新 IAM 用戶的用戶名:?用戶名:<您希望 Amplify 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)建的用戶的訪問密鑰:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
?accessKeyId:?秘密訪問密鑰:

這將在您的本地計(jì)算機(jī)中創(chuàng)建/更新 AWS 配置文件。

關(guān)于 Angular 與 AWS 組合您需要知道的一切
?配置文件名稱:默認(rèn),

畢竟,您已成功配置新的 AWS Amplify 用戶。

第 2 步:創(chuàng)建一個(gè)新的 Angular 應(yīng)用程序

關(guān)于 Angular 與 AWS 組合您需要知道的一切
>> npx -p @angular/cli ng new amplify-app?你想添加 Angular 路由嗎?是?您想使用哪種樣式表格式?(您喜歡的樣式表提供者)

此后,您可以使用下面給出的命令移動(dòng)角度應(yīng)用程序的文件夾:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
>> cd 放大應(yīng)用程序

注意: Angular 6+ 版本沒有舊版本中提供的“全局”或“進(jìn)程”墊片。您必須將下面給出的代碼添加到您的src/polyfills.ts文件中以重新創(chuàng)建它們:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
(任何窗口).global = window;(任何窗口).process = {
 環(huán)境:{調(diào)試:未定義},};

要使 Angular 應(yīng)用程序在 IE11 上運(yùn)行,您需要將以下內(nèi)容導(dǎo)入到您的src/polyfills.ts文件中:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
導(dǎo)入 'core-js/es/typed-array';導(dǎo)入“核心 js/es/對(duì)象”;

為您的商業(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)行命令:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
放大初始化

初始化后,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)用程序:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
npm 安裝 --save aws-amplify @aws-amplify/ui-angularnpm 開始

aws-amplify/ui-angular導(dǎo)出一組 Angular 組件和提供程序,可幫助開發(fā)人員將應(yīng)用程序與 AWS-Amplify 庫(kù)集成。

如果您為 Typescript 啟用了嚴(yán)格模式并遇到以下錯(cuò)誤。

關(guān)于 Angular 與 AWS 組合您需要知道的一切
“找不到模塊‘./aws-exports’的聲明文件。
'aws-exports.js' 隱式具有 'any' 類型?!?br/>

對(duì)于解決方案,您必須使用下面編寫的代碼在與aws-exports相同級(jí)別上創(chuàng)建aws-exports.d.ts文件。

關(guān)于 Angular 與 AWS 組合您需要知道的一切
聲明 const awsmobile: 記錄導(dǎo)出默認(rèn) awsmobile;

將 Amplify Authenticator UI 模塊 (AmplifyAuthenticatorModule) 導(dǎo)入 AppModule。

關(guān)于 Angular 與 AWS 組合您需要知道的一切
從'@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)用程序:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
放大添加api

它將要求您提及服務(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使用以下代碼:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
輸入餐廳@model {
 編號(hào):編號(hào)!
 名稱:字符串!
 描述:字符串!
 城市:字符串!}

如果您注意到,@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)建所有必需的后端資源。

關(guān)于 Angular 與 AWS 組合您需要知道的一切
放大推動(dòng)?你確定你要繼續(xù)嗎?是?是否要為更新后的 GraphQL API 更新代碼 是?你想根據(jù)你的模式類型生成 GraphQL 語句(查詢、變更和訂閱)嗎?

這將覆蓋您當(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):

關(guān)于 Angular 與 AWS 組合您需要知道的一切
放大地位

該命令將為您提供當(dāng)前環(huán)境的當(dāng)前狀態(tài)和詳細(xì)信息、已創(chuàng)建的類別以及這些類別在 Amplify 項(xiàng)目中的狀態(tài)

例子:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
當(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)類型:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
擴(kuò)大控制臺(tái)api

執(zhí)行命令后,它會(huì)提示您選擇 API 類型,您必須在其中選擇 GraphQL,選擇后,它會(huì)打開 AWS AppSync 控制臺(tái),您可以在服務(wù)器上編寫和執(zhí)行查詢、變更或訂閱并查看您的客戶端應(yīng)用程序中的更改。

第 6 步:建立前端到后端的連接

在項(xiàng)目資源管理器中找到src/main.ts并添加以下代碼以使用 Amplify 配置 Angular 項(xiàng)目:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
從'aws-amplify'導(dǎo)入{Amplify};從“./aws-exports”導(dǎo)入 aws_exports;放大配置(aws_exports);

Amplify for angular 正在使用節(jié)點(diǎn)作為后端,因此,您必須在文件tsconfig.app.json的編譯器選項(xiàng)類型中添加“節(jié)點(diǎn)”值

關(guān)于 Angular 與 AWS 組合您需要知道的一切
“編譯器選項(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ù):

關(guān)于 Angular 與 AWS 組合您需要知道的一切
放大添加授權(quán)?您要使用默認(rèn)身份驗(yàn)證和安全配置嗎?默認(rèn)配置?您希望用戶如何登錄?用戶名?您要配置高級(jí)設(shè)置嗎?不,我完成了。

要部署此服務(wù),您必須通過以下代碼運(yùn)行 push 命令:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
放大推動(dòng)

現(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 組件的完美外觀。

關(guān)于 Angular 與 AWS 組合您需要知道的一切
@import ' ~@aws-amplify /ui-angular/theme.css';

找到并打開src/app/app.component.html,將 app-restaurants 用<amplify-authenticator>包裹起來,開啟鑒權(quán):

關(guān)于 Angular 與 AWS 組合您需要知道的一切

如果你看到 Unhandled Promise rejection: [message] ; 區(qū):; ...控制臺(tái)錯(cuò)誤,您可以在 src/polyfills.ts 文件中導(dǎo)入 zone.js 后添加以下代碼,如下代碼所示:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
導(dǎo)入“zone.js/dist/zone”;// 包含在 Angular CLI 中。(任何窗口).Zone['__zone_symbol__ignoreConsoleErrorUncaughtError'] = true;

運(yùn)行應(yīng)用程序并檢查身份驗(yàn)證流程如何保護(hù)應(yīng)用程序:

關(guān)于 Angular 與 AWS 組合您需要知道的一切
npm 開始

現(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)行下面給出的命令。

關(guān)于 Angular 與 AWS 組合您需要知道的一切
放大添加托管

?選擇要執(zhí)行的插件模塊:# Hosting with Amplify Console(使用自定義域托管,持續(xù)部署)
?選擇類型:# 手動(dòng)部署

發(fā)布您的應(yīng)用:

現(xiàn)在,在這一階段,您已經(jīng)添加/配置了 amplify 托管,距離在云上部署應(yīng)用程序僅一步之遙。

使用下面的命令將應(yīng)用程序發(fā)布到云存儲(chǔ)。

關(guān)于 Angular 與 AWS 組合您需要知道的一切
放大發(fā)布

執(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ā),歡迎資訊!

The End