20210411 全端網頁開發起手式：建構並佈署Angular網頁應用程式至GCP

全端網頁開發起手式
洪堃能 Kun-Neng Hung
NCSIST Engineer / GDG Taoyuan Organizer
kunneng.hung
建構並佈署Angular網頁應用程式至GCP
2021/04/11

全端 = 前端 + 後端？
蛤？就這樣？
網頁架構設計、開發流程規劃、資
料庫維護、資訊安全...

Angular + GCP
典型的網站基本運作原理
Google Cloud Platform (GCP)
Google App Engine
Frontend 前端 Backend 後端
Webpage Web Service Database
Angular
或
Pub/Sub + Dataflow、
BigQuery、
Cloud Build、
…
request
response
data

事實上...
https://cloud.google.com/appengine

https://cloud.google.com/appengine/docs/standard/nodejs/setting-up-environment
Step 1

https://cloud.google.com/sdk/docs/install
Step 2

https://cloud.google.com/appengine/docs/standard/nodejs/setting-up-environment
Step 3

初次使用Google Cloud SDK Shell
認證成功！

初次使用Google Cloud SDK Shell

gcloud CLI Commands
manage Google Cloud Platform resources and developer workflow
● gcloud config list
print the properties in the active configuration
● gcloud components list
list the status of all Cloud SDK components
● gcloud init [--console-only]
initialize or reinitialize gcloud
● gcloud projects describe PROJECT_ID_OR_NUMBER
show metadata for a project
https://cloud.google.com/sdk/gcloud/reference

gcloud app CLI Commands
deploy and manage your Google App Engine apps
● gcloud app regions list
list the availability of flex and standard environments for each region
● gcloud app create [--region=REGION]
create an App Engine app within the current Google Cloud Project
● gcloud app describe
display all data about an existing service
● gcloud app deploy
deploy the local code and/or configuration of your app to App Engine
https://cloud.google.com/sdk/gcloud/reference/app

gcloud app CLI Commands
deploy and manage your Google App Engine apps
● gcloud app regions list
● gcloud app create --region=asia-east2
● gcloud app describe

API 金鑰限制和最佳做法
https://developers.google.com/maps/api-key-best-practices
(1) 您可以將未受限制的 API 金鑰用於任何 Google 地圖平台 API 或 SDK，不過我們強烈建議您限制 API 金鑰，尤其是在下列
情況下：
○ 測試環境將設為或已設為開放給所有人檢視。
○ 採用 API 金鑰的應用程式可用於實際執行環境中。
(2) 考慮為行動應用程式採用原生的 Maps SDK for Android 和 Maps SDK for iOS。

初探 Angular
for creating efficient and sophisticated single-page apps
● App-Design framework 應用設計框架
● Development Platform 開發平臺
GDG Taoyuan #06 - 初探Angular 應用設計框架 (https://www.youtube.com/watch?v=xwYV3ZoavoI)
⇒ 提供比函式庫更完整功能與開發環境的「完整解決方案」

跨平臺
漸進式應用/原生/
桌面
速度與效能
程式碼產生/統一
平臺/程式碼拆分
生產力
範本/Angular
CLI/各種 IDE
完整開發故事
測試/動畫/可及性
程式碼整潔有規範
↓
程式碼格式一致性很高、不易出錯
↓
團隊合作順暢愉快
https://angular.tw/features
Angular 特色及優點

建立 Angular 專案
1. 安裝並確定 Node.js 與 npm 版本
2. 安裝 Angular CLI
3. 以 Angular CLI 建立新專案（工作空間）
4. 編譯並執行專案
ng new <name> [options]
ng n <name> [options]
ng serve <name> [options]
ng s <name> [options]
--host: Host to listen on.
--port: Port to listen on.
Default: 4200
node -v
npm -v
npm install -g @angular/cli
https://www.npmjs.com/package/@angular/cli

| Angular CLI | Angular | NodeJS | TypeScript |
|---------------|-----------------|--------------------------------|----------------|
|6.0.8 |6.0.x |8.9.x or later minor |2.7.x |
|7.0.7 |7.0.x |8.9.x/10.9.x or later minor |3.1.x |
|9.0.7 |9.0.7 |10.13.x/12.11.x or later minor |3.6.x/3.7.x |
|9.x |9.x |10.13.x/12.11.x or later minor |3.6.x-3.8.x |
|10.x |10.x |10.13.x/12.11.x or later minor |3.9.x |
|10.1.x |10.1.x |10.13.x/12.11.x or later minor |3.9.x/4.0.x |
|12.0.x |12.0.x |12.13.x/14.15.x or later minor |4.2.x |
https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3

加入 Angular Google Maps component
Component on Angular 9
1. 確認並更新 Angular 版本
2. 安裝 Google Maps 模組
3. 使用 Google Maps 模組
npm install @angular/google-maps
ng version
ng update @angular/core@^9 @angular/cli@^9
https://github.com/angular/components/blob/master/src/google-maps/

操作 Angular CLI
● 建立模組
● 建立元件
● 建立服務
https://www.npmjs.com/package/@angular/cli
ng generate component <name> [options]
ng g component <name> [options]
ng generate service <name> [options]
ng g service <name> [options]
ng generate module <name> [options]
ng g module <name> [options]

PS C:projectsgaehugoo-bus> ng g component bus-map
CREATE src/app/bus-map/bus-map.component.html (22 bytes)
CREATE src/app/bus-map/bus-map.component.spec.ts (627 bytes)
CREATE src/app/bus-map/bus-map.component.ts (278 bytes)
CREATE src/app/bus-map/bus-map.component.css (0 bytes)
UPDATE src/app/app.module.ts (477 bytes)
PS C:projectsgaehugoo-bus> ng g module bus-map
CREATE src/app/bus-map/bus-map.module.ts (192 bytes)
PS C:projectsgaehugoo-bus> ng g service services/google-maps
CREATE src/app/services/google-maps.service.spec.ts (378 bytes)
CREATE src/app/services/google-maps.service.ts (139 bytes)
PS C:projectsgaehugoo-bus> ng g service services/bus-data
CREATE src/app/services/bus-data.service.spec.ts (363 bytes)
CREATE src/app/services/bus-data.service.ts (136 bytes)
BusMapComponent
BusMapModule
GoogleMapsService BusDataService
GoogleMapsModule
HttpClientModule
HttpClientJsonpModule
AppModule
Lazy Loading the API Bus Data Provider

runtime: nodejs14
handlers:
- url: /
static_files: dist/hugoo-bus/index.html
upload: dist/hugoo-bus/index.html
- url: /
static_dir: dist/hugoo-bus
https://cloud.google.com/appengine/docs/standard/nodejs/conﬁguration-ﬁles
<application root>/
source files app.yaml

佈署 Angular 專案
1. 打包專案
2. 佈署專案
ng build --prod
gcloud app deploy

在 Google App Engine 還要做更多事

相關社群與學習資源
● Angular 線上讀書會
https://www.facebook.com/groups/angularstudygroup/
● Google Developers Experts
https://developers.google.com/community/experts/directory
wellwind.idv.tw/blog
blog.miniasp.com blog.kevinyang.net

20210411 全端網頁開發起手式：建構並佈署Angular網頁應用程式至GCP

More Related Content

What's hot

More from Kun-Neng Hung

Recently uploaded

20210411 全端網頁開發起手式：建構並佈署Angular網頁應用程式至GCP