使用 @ng-toolkit/serverless 部署你的 Angular 应用在 Firebase / AWS Lambda / Google Cloud Functions
在这篇文章中，我将告诉您如何使用@ng-toolkit/serverless library轻松快速地将任何 Angular CLI 项目部署到 Serviceless 环境中。<喎?http://www.weiyer.com/Search.asp?KeyWord=/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPs/W1NrE49LRvq3T0NK7uPbN6sPAoaLHv7TztcRBbmd1bGFyINOm08PBy6OsysfKsbrysr/K8Mv8sNHL/LSrsqW4+MirysC958HLoaPP1tTazsrM4sC0wcuho87S06a4w9TaxMTA77K/yvCjv9PQuty24NGh1PGjujxiciAvPg0KLSC0q82zt/7O8cb3PGJyIC8+DQotINTGt/7O8cb3IKOowP3I5yBBV1MgRUMyICwgVlBTo6k8YnIgLz4NCi0gU2VydmVybGVzcyC7t76zPC9wPg0KPHA+vfHM7M7Sw8e9q7nY16K12sj9uPbRodTxo7pTZXJ2ZXJsZXNzILu3vrOho9TaztK/tMC0o6zV4srHs/W0tLmry766zdfU08nWsNK11d+1xNfuvNG94r72t72wuKGjxOPWu86qxOPV/dTayrnTw7XEtqvO99anuLa30dPDo6y2+LWxxOPKudPDy/zKsaGjRmFhUyAoRnVuY3Rpb24gYXMgYSBTZXJ2aWNlKdTaubLP7dTGu/rG98nP1MvQ0KOs1rvT0LWxv827p8frx/O1vbTvt/7O8cb3sqLUy9DQyrGjrLLF09Cx2NKqzeqzycv8oaO087bgyv0gU2VydmVybGVzcyDM4bmp1d+74bj5vt3WtNDQx+vH87XEyv3Bv7rN1rTQ0MqxvOTK1ciht9HTw6GjtvjH0qOsy/vDx9bQtcS087bgyv22vMzhuanD4rfRsuOjrMD9yOcgQW1hem9uIFdlYiBTZXJ2aWNlcyDDv9TCzOG5qSAxMDAwMDAwILj2w+K30cfrx/OjoTwvcD4NCjxoMiBpZD0="准备工作">准备工作
为了利用我们将要部署的库，您需要为您要使用的提供者安装和配置CLI。看看这些指南来实现这一目标：
- AWS CLI
- Google Cloud CLI
- Firebase
我相信NodeJS 和 Angular CLI 你已经安装好了，此处我们就不再赘述，让我们直接来创建一个新项目：
ng new serverlessApp cd serverlessApp
@ng-toolkit/serverless
我们不会用手动的方式来完成整个设置。我相信每个人都更喜欢自动化的安装，这样他们可以专注于开发。
为了实现这一点，我们使用最新的CLI的新特性： ng add 命令与外部库结合
现在你可以开始选择你喜欢的服务提供商了。
AWS Lambda & Google Cloud Functions:
ng add @ng-toolkit/serverless —-provider aws
或者
ng add @ng-toolkit —-provider gcloud
在成功更新您的项目后，您可以通过键入来检查它是否在lambda上正常工作：
npm run build:serverless:deploy
你的应用程序的URL被附加到命令输出：
Serverless: Packaging service... Serverless: Excluding development dependencies... Serverless: Compiling function "helloWorld"... Serverless: Uploading artifacts... Serverless: Artifacts successfully uploaded... Serverless: Updating deployment... Serverless: Checking deployment update progress... ................................. Serverless: Done... Service Information service: myapp project: another-project-197513 stage: dev region: us-central1 Deployed functions helloWorld https://us-central1-another-project-197513.cloudfunctions.net/http Serverless: Removing old artifacts...
如果需要，可以使用自定义域名。Check out this step-by-step guide on how to set it up in AWS API Gateway。当您的域名成功配置时，您可以将应用程序部署到生产中：
npm run build:prod:deploy
Firebase
Firebase的设置有点不同，这就是为什么我决定把它放在单独的部分。
首先，您需要创建一个新项目。导航到Firebase Console 并点击“Add project”。键入项目名称，选择一个区域，并（可选地）更改项目ID。
项目ID与 ng add 命令一起使用：
ng add @ng-toolkit/serverless --provider firebase --firebaseProject angular-project-495ef
执行此命令后，您应该能够通过键入将应用程序部署到FialBase:
npm run build:prod:deploy === Deploying to 'fir-test-7d7eb'... i deploying functions, hosting i functions: ensuring necessary APIs are enabled... ? functions: all necessary APIs are enabled i functions: preparing functions directory for uploading... i functions: packaged functions (490.22 KB) for uploading ? functions: functions folder uploaded successfully i hosting: preparing functions/dist directory for upload... ? Warning: Public directory does not contain index.html ? hosting: 8 files uploaded successfully i functions: updating function http... ? functions[http]: Successful update operation. ? Deploy complete! Project Console: https://console.firebase.google.com/project/angular-project-495ef/overview Hosting URL: https://angular-project-495ef.firebaseapp.com
Thanks for reading!
