GSP662 - Hosting a Web App on Google Cloud Using Compute Engine

Task 1. Enable Compute Engine API

Jalankan command berikut untuk mengaktifkan Compute Engine API
```
gcloud services enable compute.googleapis.com
```

Task 2. Create Cloud Storage bucket

Jalankan command berikut untuk membuat bucket

gsutil mb gs://fancy-store-$DEVSHELL_PROJECT_ID

Task 3. Clone source repository

Clone repository

git clone https://github.com/googlecodelabs/monolith-to-microservices.git

cd ~/monolith-to-microservices

Install dependensi aplikasi
```
./setup.sh
```
Pastikan versi nodeJS
```
nvm install --lts
```
Test/Run aplikasi
```
cd microservices
npm start
```
Click Web Preview > Preview on port 8080 untuk melihat tampilan web
Tekan Ctrl+C untuk menghentikan aplikasi

Task 4. Create Compute Engine instances

Create the startup script

Open Cloud Shell Editor
Cari folder monolith-to-microservices
buat file startup-script.sh

Tambahkan Code

#!/bin/bash
# Install logging monitor. The monitor will automatically pick up logs sent to
# syslog.
curl -s "https://storage.googleapis.com/signals-agents/logging/google-fluentd-install.sh" | bash
service google-fluentd restart &
# Install dependencies from apt
apt-get update
apt-get install -yq ca-certificates git build-essential supervisor psmisc
# Install nodejs
mkdir /opt/nodejs
curl https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.gz | tar xvzf - -C /opt/nodejs --strip-components=1
ln -s /opt/nodejs/bin/node /usr/bin/node
ln -s /opt/nodejs/bin/npm /usr/bin/npm
# Get the application source code from the Google Cloud Storage bucket.
mkdir /fancy-store
gsutil -m cp -r gs://fancy-store-[DEVSHELL_PROJECT_ID]/monolith-to-microservices/microservices/* /fancy-store/
# Install app dependencies.
cd /fancy-store/
npm install
# Create a nodeapp user. The application will run as this user.
useradd -m -d /home/nodeapp nodeapp
chown -R nodeapp:nodeapp /opt/app
# Configure supervisor to run the node app.
cat >/etc/supervisor/conf.d/node-app.conf << EOF
[program:nodeapp]
directory=/fancy-store
command=npm start
autostart=true
autorestart=true
user=nodeapp
environment=HOME="/home/nodeapp",USER="nodeapp",NODE_ENV="production"
stdout_logfile=syslog
stderr_logfile=syslog
EOF
supervisorctl reread
supervisorctl update

Cari [DEVSHELL_PROJECT_ID] dan ganti dengan output dari command berikut
```
echo $DEVSHELL_PROJECT_ID
```
Save file dan pastikan end of line sequence adalah LF

Kembali ke terminal dan jalankan command berikut untuk copy file ke bucket

gsutil cp ~/monolith-to-microservices/startup-script.sh gs://fancy-store-$DEVSHELL_PROJECT_ID

Copy code into the Cloud Storage bucket

Jalan command berikut untuk copy code ke bucket

cd ~
rm -rf monolith-to-microservices/*/node_modules
gsutil -m cp -r monolith-to-microservices gs://fancy-store-$DEVSHELL_PROJECT_ID/

Deploy the backend instance

Jalankan command berikut untuk membuat instance, pastikan sudah setting default zone

gcloud compute instances create backend \
--machine-type=n1-standard-1 \
--tags=backend \
--metadata=startup-script-url=https://storage.googleapis.com/fancy-store-$DEVSHELL_PROJECT_ID/startup-script.sh

Configure a connection to the backend

Jalankan command untuk mendapatkan IP address dari backend instance
```
gcloud compute instances list
```
Copy IP address dari backend instance
Di dalam Cloud Shell Editor, buka file ~/monolith-to-microservices/react-app
Click menu view > Toggle Hidden Files untuk melihat file .env
Edit file .env dan buat . [BACKEND_ADDRESS] dengan IP address dari backend instance
```
BACKEND_ADDRESS={EXTERNAL_IP}
```

Ganti localhost dengan IP address dari backend instance

REACT_APP_ORDERS_URL=http://{EXTERNAL_IP}:8081/api/orders
REACT_APP_PRODUCTS_URL=http://{EXTERNAL_IP}:8082/api/products

Save file

Rebuild aplikasi

cd ~/monolith-to-microservices/react-app
npm run build

Copy hasil build ke bucket

cd ~
rm -rf monolith-to-microservices/*/node_modules

gsutil -m cp -r monolith-to-microservices gs://fancy-store-$DEVSHELL_PROJECT_ID/

Deploy the frontend instance

Jalankan command untuk deploy frontend instance

gcloud compute instances create frontend \
--machine-type=n1-standard-1 \
--tags=frontend \
--metadata=startup-script-url=https://storage.googleapis.com/fancy-store-$DEVSHELL_PROJECT_ID/startup-script.sh

Configure the network

Buat firewall untuk mengakses port 8080 untuk frontend dan 8081-8082 untuk backend

gcloud compute firewall-rules create fw-fe \
    --allow tcp:8080 \
    --target-tags=frontend

gcloud compute firewall-rules create fw-be \
--allow tcp:8081-8082 \
--target-tags=backend

Untuk mengarahkan external-IP ke frontend, lihat external-IP dari frontend instance
```
gcloud compute instances list
```
Copy external-IP dari frontend instance dan ganti FRONTEND_ADDRESS dari command berikut
```
watch -n 2 curl http://{FRONTEND_ADDRESS}:8080
```
click Ctrl+C untuk menghentikan command
Buka browser dan akses http://[FRONTEND_ADDRESS]:8080

Task 5. Create managed instance groups

Create instance template from source instance

Hentikan kedua instances

gcloud compute instances stop frontend backend

Buat instance template dari frontend instance

gcloud compute instance-templates create fancy-fe \
--source-instance=frontend

gcloud compute instance-templates create fancy-be \
--source-instance=backend

Pastikan instance template sudah dibuat
```
gcloud compute instance-templates list
```
Hapus frontend dan backend instance
```
gcloud compute instances delete backend
```

Create managed instance group

Buat 2 instances

gcloud compute instance-groups managed create fancy-fe-mig \
    --base-instance-name fancy-fe \
    --size 2 \
    --template fancy-fe

gcloud compute instance-groups managed create fancy-be-mig \
    --base-instance-name fancy-be \
    --size 2 \
    --template fancy-be

Atur port

gcloud compute instance-groups set-named-ports fancy-fe-mig \
    --named-ports frontend:8080

gcloud compute instance-groups set-named-ports fancy-be-mig \
    --named-ports orders:8081,products:8082

Configure autohealing

Buat health-check

gcloud compute health-checks create http fancy-fe-hc \
    --port 8080 \
    --check-interval 30s \
    --healthy-threshold 1 \
    --timeout 10s \
    --unhealthy-threshold 3

gcloud compute health-checks create http fancy-be-hc \
    --port 8081 \
    --request-path=/api/orders \
    --check-interval 30s \
    --healthy-threshold 1 \
    --timeout 10s \
    --unhealthy-threshold 3

Buat firewall

gcloud compute firewall-rules create allow-health-check \
    --allow tcp:8080-8081 \
    --source-ranges 130.211.0.0/22,35.191.0.0/16 \
    --network default

Terapkan health-check ke instance group

gcloud compute instance-groups managed update fancy-fe-mig \
    --health-check fancy-fe-hc \
    --initial-delay 300

gcloud compute instance-groups managed update fancy-be-mig \
    --health-check fancy-be-hc \
    --initial-delay 300

Task 6. Create load balancers

Buat health-check untuk mengetahui instance yang capable untuk menerima traffic

gcloud compute http-health-checks create fancy-fe-frontend-hc \
    --request-path / \
    --port 8080

gcloud compute http-health-checks create fancy-be-orders-hc \
    --request-path /api/orders \
    --port 8081

gcloud compute http-health-checks create fancy-be-products-hc \
    --request-path /api/products \
    --port 8082

Buat backend sebagai target untuk load balancer

gcloud compute target-pools create fancy-fe-frontend-pool \
    --http-health-check fancy-fe-frontend-hc

gcloud compute backend-services create fancy-fe-frontend \
    --http-health-checks fancy-fe-frontend-hc \
    --port-name frontend \
    --global

gcloud compute backend-services create fancy-be-orders \
    --http-health-checks fancy-be-orders-hc \
    --port-name orders \
    --global

gcloud compute backend-services create fancy-be-products \
    --http-health-checks fancy-be-products-hc \
    --port-name products \
    --global

Tambah load balancer

gcloud compute backend-services add-backend fancy-fe-frontend \
    --instance-group fancy-fe-mig \
    --instance-group-zone us-central1-f \
    --global

gcloud compute backend-services add-backend fancy-be-orders \
    --instance-group fancy-be-mig \
    --instance-group-zone us-central1-f \
    --global

gcloud compute backend-services add-backend fancy-be-products \
    --instance-group fancy-be-mig \
    --instance-group-zone us-central1-f \
    --global

Buat URL map, URL map akan mengarahkan traffic ke backend yang sesuai

gcloud compute url-maps create fancy-map \
    --default-service fancy-fe-frontend

Buat path matcher untuk mengarahkan traffic ke backend yang sesuai

gcloud compute url-maps add-path-matcher fancy-map \
    --default-service fancy-fe-frontend \
    --path-matcher-name orders \
    --path-rules "/api/orders=fancy-be-orders,/api/products=fancy-be-products"

Buat proxy

gcloud compute target-http-proxies create fancy-proxy \
    --url-map fancy-map

Buat forwarding rule

gcloud compute forwarding-rules create fancy-http-rule \
    --global \
    --target-http-proxy fancy-proxy \
    --ports 80

Update the configuration

change directory

cd ~/monolith-to-microservices/react-app/

tampilkan ip address dari load balancer

gcloud compute forwarding-rules list --global

ganti ip .env file

REACT_APP_ORDERS_URL=http://[LB_IP]/api/orders
REACT_APP_PRODUCTS_URL=http://[LB_IP]/api/products

rebuild app

cd ~/monolith-to-microservices/react-app
npm install && npm run-script build

copy build folder ke bucket

cd ~
rm -rf monolith-to-microservices/*/node_modules
gsutil -m cp -r monolith-to-microservices gs://fancy-store-$DEVSHELL_PROJECT_ID/

Update the frontend instances

Rolling restart

gcloud compute instance-groups managed rolling-action replace fancy-fe-mig \
--max-unavailable 100%

Test the website

test

watch -n 2 gcloud compute instance-groups list-instances fancy-fe-mig

pastikan healthy status (tunggu beberapa saat sampai healthy)

watch -n 2 gcloud compute backend-services get-health fancy-fe-frontend --global

Task 7. Scaling Compute Engine

Automatically resize by utilization

buat autoscaler

gcloud compute instance-groups managed set-autoscaling \
    fancy-fe-mig \
    --max-num-replicas 2 \
    --target-load-balancing-utilization 0.60

gcloud compute instance-groups managed set-autoscaling \
    fancy-be-mig \
    --max-num-replicas 2 \
    --target-load-balancing-utilization 0.60

Enable content delivery network

jalankan command berikut untuk mengaktifkan CDN

gcloud compute backend-services update fancy-fe-frontend \
    --enable-cdn --global

Task 8. Update the website

Updating instance template

mofikasi tipe mesin

gcloud compute instances set-machine-type frontend --machine-type custom-4-3840

buat instance template baru

gcloud compute instance-templates create fancy-fe-new \
    --source-instance=frontend \
    --source-instance-zone=us-central1-f

roll out instance template baru

gcloud compute instance-groups managed rolling-action start-update fancy-fe-mig \
    --version template=fancy-fe-new

monitor status

watch -n 2 gcloud compute instance-groups managed list-instances fancy-fe-mig

Make changes to the website

mengubah file

cd ~/monolith-to-microservices/react-app/src/pages/Home
mv index.js.new index.js

check file

cat ~/monolith-to-microservices/react-app/src/pages/Home/index.js

rebuild app

cd ~/monolith-to-microservices/react-app
npm install && npm run-script build

repush ke bucket

cd ~
rm -rf monolith-to-microservices/*/node_modules
gsutil -m cp -r monolith-to-microservices gs://fancy-store-$DEVSHELL_PROJECT_ID/

Push changes with rolling replacements

pull update

gcloud compute instance-groups managed rolling-action replace fancy-fe-mig \
    --max-unavailable=100%

monitor status

watch -n 2 gcloud compute instance-groups list-instances fancy-fe-mig

pastikan healthy status (tunggu beberapa saat sampai healthy)

watch -n 2 gcloud compute backend-services get-health fancy-fe-frontend --global

check website ip address

gcloud compute forwarding-rules list --global

http://[LB_IP]

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GSP662.md

GSP662.md

GSP662 - Hosting a Web App on Google Cloud Using Compute Engine

Task 1. Enable Compute Engine API

Task 2. Create Cloud Storage bucket

Task 3. Clone source repository

Task 4. Create Compute Engine instances

Create the startup script

Copy code into the Cloud Storage bucket

Deploy the backend instance

Configure a connection to the backend

Deploy the frontend instance

Configure the network

Task 5. Create managed instance groups

Create instance template from source instance

Create managed instance group

Configure autohealing

Task 6. Create load balancers

Update the configuration

Update the frontend instances

Test the website

Task 7. Scaling Compute Engine

Automatically resize by utilization

Enable content delivery network

Task 8. Update the website

Updating instance template

Make changes to the website

Push changes with rolling replacements

Files

GSP662.md

Latest commit

History

GSP662.md

File metadata and controls

GSP662 - Hosting a Web App on Google Cloud Using Compute Engine

Task 1. Enable Compute Engine API

Task 2. Create Cloud Storage bucket

Task 3. Clone source repository

Task 4. Create Compute Engine instances

Create the startup script

Copy code into the Cloud Storage bucket

Deploy the backend instance

Configure a connection to the backend

Deploy the frontend instance

Configure the network

Task 5. Create managed instance groups

Create instance template from source instance

Create managed instance group

Configure autohealing

Task 6. Create load balancers

Update the configuration

Update the frontend instances

Test the website

Task 7. Scaling Compute Engine

Automatically resize by utilization

Enable content delivery network

Task 8. Update the website

Updating instance template

Make changes to the website

Push changes with rolling replacements