The challenge contains 7 tasks. As it has staging and production environment, so actually is 3 different sets of tasks.

Provision the Qwiklabs environment

run those commands to set config and checkout files

Task 1:

Assessment

Build an image using Cloud Build
Deploy a Cloud Run service as an unauthenticated service
Test service responds when the endpoint is accessed

+-----------------+-----------------------------------+
|      FIELD      |               VALUE               |
+-----------------+-----------------------------------+
| Billing Image   | billing-staging-api:0.1           |
| Billing Service | public-billing-service            |
| Authentication  | unauthenticated                   |
| Code            | pet-theory/lab07/unit-api-billing |
+-----------------+-----------------------------------+

1. gCloud build command reference: https://cloud.google.com/sdk/gcloud/reference/beta/builds/submit

cd ~/<CODE>
gcloud builds submit \
--tag gcr.io/$GOOGLE_CLOUD_PROJECT/<BILLING_IMAGE>

2. gCloud deploy command reference:

• https://cloud.google.com/sdk/gcloud/reference/run/deploy
• https://cloud.google.com/sdk/gcloud/reference/run/deploy#–[no-]allow-unauthenticated

gcloud run deploy <SERVICE> \
--image gcr.io/$GOOGLE_CLOUD_PROJECT/<BILLING_IMAGE> \
--<AUTHENTICATED>

3. optional: click on the Service

URL

curl https://public-billing-service-XXXXXXX.a.run.app

Task 2:

Same as task 1, with different values.

+----------------+-------------------------------------------+
|     FIELD      |                   VALUE                   |
+----------------+-------------------------------------------+
| Image Name     | frontend-staging:0.1                      |
| Service Name   | frontend-staging-service                  |
| Authentication | unauthenticated                           |
| Code           | pet-theory/lab07/staging-frontend-billing |
+----------------+-------------------------------------------+

Task 3:

+----------------+--------------------------------------+
|     FIELD      |                VALUE                 |
+----------------+--------------------------------------+
| Image Name     | billing-staging-api:0.2              |
| Service Name   | private-billing-service              |
| Authentication | authenticated                        |
| Code           | pet-theory/lab07/staging-api-billing |
+----------------+--------------------------------------+

1. Delete the existing Billing Service

cd ~/<CODE>
gcloud beta run services delete public-billing-service

2. Build an image using Cloud Build: similar to task 1

3. Deploy the image to Cloud Run requiring authentication: similar to above, just be aware this time is authenticated.

--no-allow-unauthenticated

4. Test service:

BILLING_SERVICE=private-billing-service
BILLING_URL=$(gcloud run services describe $BILLING_SERVICE \
  --format "value(status.URL)")
curl -X get -H "Authorization: Bearer $(gcloud auth print-identity-token)" $BILLING_URL

Task 4:

+-----------------+---------------------------+
|      FIELD      |           VALUE           |
+-----------------+---------------------------+
| Service Account | billing-service-sa        |
| Display Name    | Billing Service Cloud Run |
+-----------------+---------------------------+

1. create service account reference: https://cloud.google.com/iam/docs/creating-managing-service-accounts#creating

gcloud iam service-accounts create <SERVICE_ACOUNT> --display-name "<DISPLAY_NAME>"

Task 5:

+-----------------+-----------------------------------+
|      FIELD      |               VALUE               |
+-----------------+-----------------------------------+
| Image Name      | billing-prod-api:0.1              |
| Service Name    | billing-prod-service              |
| Authentication  | authenticated                     |
| Code            | pet-theory/lab07/prod-api-billing |
| Service Account | billing-service-sa                |
+-----------------+-----------------------------------+

1. Deploy the image to Cloud Run & Enable Authentication

cd ~/<CODE>
## similar to task 3 build and deploy command above

2. Enable Service Account

https://cloud.google.com/sdk/gcloud/reference/run/services/add-iam-policy-binding

gcloud run services add-iam-policy-binding <SERVICE_NAME> \
  --member=serviceAccount:<SERVICE_ACCOUNT>@$GOOGLE_CLOUD_PROJECT.iam.gserviceaccount.com \
  --role=roles/run.invoker

3. optional: Test service url: lab instructions

URL

PROD_BILLING_SERVICE=private-billing-servicePROD_BILLING_URL=$(gcloud run services \
    describe $PROD_BILLING_SERVICE \
    --format "value(status.URL)")
curl -X get -H "Authorization: Bearer \
    $(gcloud auth print-identity-token)" \
    $PROD_BILLING_URL

Task 6:

+-----------------+-----------------------------------+
|      FIELD      |               VALUE               |
+-----------------+-----------------------------------+
| Service Account | frontend-service-sa               |
| Display Name    | Billing Service Cloud Run Invoker |
+-----------------+-----------------------------------+

1. same command as Task 4

Task 7:

+-----------------+----------------------------------------+
|      FIELD      |                 VALUE                  |
+-----------------+----------------------------------------+
| Image Name      | frontend-prod:0.1                      |
| Service Name    | frontend-prod-service                  |
| Authentication  | unauthenticated                        |
| Code            | pet-theory/lab07/prod-frontend-billing |
| Service Account | frontend-service-sa                    |
+-----------------+----------------------------------------+

1. Deploy the image to Cloud Run & Enable Authentication: refer to Task 5

cd ~/<CODE>
## similar to task 5 build and deploy command above

2. Enable Service Account: similar to task 5

gcloud run services add-iam-policy-binding <SERVICE_NAME> \
  --member=serviceAccount:<SERVICE_ACCOUNT>@$GOOGLE_CLOUD_PROJECT.iam.gserviceaccount.com \
  --role=roles/run.invoker

3. optional: click on URL printed in cloud shell to verify endpoint access

Congratulations

After that you should be able to finish this challenge lab and obtain a skill badge:

Although Progressive Web Apps (PWA) are installable without app store, as of today business requirement may still need the distribute channel via app store. With ionic (UI) and Cordova framework, one single code base can serve native apps and web apps together.

ionic 4

Capacitor or Stencil

Capacitor is still in Release Candidate in Dec 2018, and 1.0 production in 2019. Integrate with Angular. Cross platform: iOS, android, Web, Electron (win & macOS)

Stencil: web component (similar to ploymer), reusable, independent (angular, react, vue)

selected Capacitor as per requirement.

Toolings: Intellij Idea (as subscribed), or Visual Studio Code (free)

Installation

follow the official documentation.  run

$ ng build

Creation on iOS & android projects is smooth and easy. ionic team really did a great job there. However, PWA isn’t that user-friendly. 

npm install @ionic/pwa-elements

PWA services worker

angular-worker: basic usage, 

npm install -g @angular/cli ; ng add @angular/pwa

very difficult to setup, due to angular builder. Need to manually add “glob”: “workbox-<Component>.<dev|prod>.js” to angular.json . See https://golb.hplar.ch/2018/06/workbox-serviceworker-in-angular-project.html for more details

Development

$ ionic server –> live reload on source folder, so PWA doesn’t work as pre-caching & routing info in /www (build) folder, not src/service-worker.js

edit package.json, add 

"dist": "ng build && workbox injectManifest"

$ npm run dist

$ npx cap serve 

alternatively, http-server can be used, that will use /www file. e.g. 

http-server www -c-1 -o -a -S localhost -p 8200

HTTPS: PWA works on localhost, 192.168.x.x . Others need HTTPS. It won’t work on non-SSL, took some time to find out, as office wifi is not Class C network. Yet it runs okay at home.

放左去gist。有用既請拍下 likecoin ，Thanks：）

原來係其中一個update statement 行subquery，where id = (select  …) mysql 會run select on each row   DataSet 一大，慢到嘔。

CREATE TABLE alarm_backup SELECT * FROM alarm;  

UPDATE alarm a
SET a.status = 'active' , ....... 
WHERE a.id = (
  SELECT al.id 
  FROM alarm_backup ab 
    JOIN device d ON ab.device_id = d.id
    JOIN ......
  WHERE .....
);

其實subquery 係唔需要⋯⋯

CREATE TABLE alarm_backup SELECT * FROM alarm;  

UPDATE alarm a
JOIN device d ON a.device_id = d.id
JOIN ......
SET a.status = 'active' , ....... 
WHERE ..... ；

故事教訓我地：
1) 放假返黎之後小心點，你唔係到個時既Peer review 都要睇返。
2) 唔好咁容易信你上司，上左神枱技術係會回塘

check out the details in https://hacktoberfest.digitalocean.com/

Keynote 比較大路，冇乜特別，都係話google 投資左好多錢咁啦。GCP 起步遲過AWS, 不過我覺得kubernetes 先係王道，比起vendor lock in AWS 好. 其次我覺得AWS product啲名好麻煩好難記

1st: CI/CD pipelines in the cloud
由source code repo, build & test, artifact management, deliver. 以前係svn + maven + jenkins，而家係github/gitlab + Cloud Build + Container Registey + Spinnaker.

2nd: Kubernetes & Istio: The Efficient Approach to well-managed Infrastructure
之前聽Craig Box 嘅Podcast，今次卒之見到真人，係全日嘅session入邊佢係最流暢嘅presenter. k8s / envoy / sidecar / citadel  似乎真係要落手落腳做過先知深淺。GKE serverless Add-on looks promising.

3rd: AI drives an Exceptional Customer Experience
唔算好technical. High level concept on Contact Centre AI, 但係如果有budget implement 到真係升level 到另一個層次. Google 真係好強力推動 AI.

…. 我打字實在太慢，下次再續

1. New VM

首先登入GCP，左上角Menu > MarketPlace，然後搜尋 WordPress，再揀Nginx WordPress with NGINX and SSL Certified by Bitnami，按Launch on Compute Engine button。

因為Free Tier 嘅關係，記住要揀係美國嘅region，同 f1-micro instance. Disk size 30GB 以下就得, 我自己用15GB. info: https://cloud.google.com/compute/pricing#freeusage

2. Backup

等緊個VM create嘅時候，可以就係用緊嘅WordPress 做 Backup。Install “All-in-One WP Migration” plugin, Export everything. 詳細資料：https://docs.bitnami.com/aws/how-to/migrate-wordpress/，Backup 完然後power off

3. Migrate

個新VM 起好之後，In VPC network > External IP address，這個舊嘅static IP 轉去新 VM 到，然後ssh to new VM, restart all services

sudo /opt/bitnami/ctlscript.sh restart

再登入新WordPress，check 返site setting同user email address ，如果係 IP address 就改番做Domain name。

終於係時候Import返 data： All-in-One WP Migration > Import，upload the backup file.

Disable bitnami logo:

sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
sudo /opt/bitnami/ctlscript.sh restart nginx

搞掂。

當一切安好之後，就可以Delete 舊VM & snapshot。

(Optional 1)

用Let’s encrypt & Cloudflare SSL strict mode:
一直用開 Cloudflare 免費CDN & FleixSSL，而家用 Lets encrtpy 其實可以唔使用 Cloudflare SSL, 不過費事大搞, 轉做strict mode 算.

in ssh shell:

sudo /opt/bitnami/letsencrypt/scripts/generate-certificate.sh -m YOURMAIL -d YOURDOMAIN -d www.YOURDOMAIN

我揀左 Yes 但係個crontab 都係冇野，要手動加返上去。

crontab -e

 0 0 1 * * sudo /opt/bitnami/letsencrypt/lego --path="/opt/bitnami/letsencrypt" --email="YOURMAIL" --domains="YOURDOMAIN" renew && sudo /opt/bitnami/nginx/sbin/nginx -s reload

(Optional 2)

redirect HTTP to HTTPS in nginx

如果唔用 Cloudflare redirect，可以係Nginx 做，改 server_name 同埋加 301 ：

server_name hang321.net www.hang321.net
if ($http_x_forwarded_proto = "http") {
  return 301 https://$server_name$request_uri;
}

.....
server_name hang321.net www.hang321.net

Reference:

• https://docs.bitnami.com/aws/how-to/migrate-wordpress/
• https://docs.bitnami.com/general/apps/wordpress-pro
• https://support.cloudflare.com/hc/en-us/articles/200170416-What-do-the-SSL-options-mean-

咁唯有整番個website靚仔小小啦。

呢個site 係GCP free tier (每個月$0.x egress only,  爽啊)，原本個Base image 係 Debian 8，上個月discontinue support, 所以要更新到 Debian 9. 今次就試下由Apache轉去Nginx，睇下Performance 會唔會有改善。技術文下次再寫。

更新完 Compute Engine VM, WordPress, Themes, Plugin … etc, 奇怪個主頁顯示唔到LikeCoin Widget, 最後發現原來係個Theme Home Page setting 嘅問題，唔係page又唔係post type。然後就去睇下個widget 其實係 iframe, 咁我自己加返條Link就會出到。

https://button.like.co/in/embed/<YOUR_USERNAME>/button?referrer=https%3A%2F%2F<YOUR_DOMAINNAME>

[blog count="3" imageType="left" full="true" nopaging="false"]

[iframe src="https://button.like.co/in/embed/hang321/button?referrer=https%3A%2F%2Fwww.hang321.net" width="100%" height="212"]