Hosting a Web App on Google Cloud Using Compute Engine

admin

1 year ago

“Hosting a Web App on Google Cloud Using Compute Engine“

Daftar Isi

Toggle

Pengantar

Ada banyak cara untuk menerapkan situs web dalam Google Cloud dengan setiap solusi menawarkan fitur, kemampuan, dan tingkat kontrol yang berbeda. Compute Engine menawarkan tingkat kontrol yang mendalam atas infrastruktur yang digunakan untuk menjalankan situs web, tetapi juga memerlukan manajemen operasional yang lebih sedikit dibandingkan dengan solusi seperti Google Kubernetes Engines (GKE), App Engine, atau lainnya. Dengan Compute Engine, Anda memiliki kontrol menyeluruh atas aspek infrastruktur, termasuk mesin virtual, penyeimbang muatan, dan lainnya. Di lab ini, Anda akan men-deploy aplikasi sampel, situs e-commerce “Fancy Store”, untuk menunjukkan bagaimana situs dapat di-deploy dan diskalakan dengan mudah menggunakan Compute Engine.

Praktikum

Task 1. Enable Compute Engine API

Connect to centos-clean

Buka Cloud Shell
Ketik perintah berikut :

gcloud services enable compute.googleapis.com

Task 2. Create Cloud Storage bucket

Buka Cloud shell

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

Task 3. Clone source repository

Clone

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

Run Build

cd ~/monolith-to-microservices
./setup.sh

Cek nodejs

nvm install --lts

Test aplikasi

cd microservices
npm start

Klik web preview

Task 4. Create Compute Engine instances

Create the startup script

Buka open editor masuk ke folder -> monolith-to-microservices
Buat file startup-script.sh

#!/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

ganti file [DEVSHELL\_PROJECT\_ID\] dengan nama project .
Cara cek nama project

echo $DEVSHELL_PROJECT_ID

save file
Running code

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

Copy code into the Cloud Storage 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

Buat Vm

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

cek external IP

gcloud compute instances list

Klik open editor , buka folder monolith-to-microservices > react-app
Select View > Toggle Hidden Files
Buka .env ganti dengan IP backend di atas

REACT_APP_ORDERS_URL=http://[BACKEND_ADDRESS]:8081/api/orders
REACT_APP_PRODUCTS_URL=http://[BACKEND_ADDRESS]:8082/api/products

Save
Rebuild app

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

Copy 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

Buat Vm

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 rule untuk akses port 8080

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

Cek external IP frontend

gcloud compute instances list

tunggu 30 detik kemudian ekseskusi perintah berikut

watch -n 2 curl http://[FRONTEND_ADDRESS]:8080

Buka browser akses link berikut -> http://[FRONTEND_ADDRESS]:8080

Task 5. Create managed instance groups

Create instance template from source instance

stop instance

gcloud compute instances stop frontend
gcloud compute instances stop backend

Buat instance template

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

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

gcloud compute instance-templates list

delete instance beckend

gcloud compute instances delete backend

Create managed instance group

Buat 2 grup

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

Buat rule 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 rule

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

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

Create HTTP(S) load balancer

Buat health check

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 service backend target loadbalancer

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

Buat loadbalancer

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

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

Create a path matcher to allow the /api/orders and /api/products paths to route

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 global forwading rule

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

Update the configuration

Masuk ke cloud shell

cd ~/monolith-to-microservices/react-app/
gcloud compute forwarding-rules list --global

Update file .env ( ganti dengan IP external yang baru )

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

save
Rebuild app react

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

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/

Update the frontend instances

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

Test the website

Test sampai musncul HEALTHY

watch -n 2 gcloud compute instance-groups list-instances fancy-fe-mig
watch -n 2 gcloud compute backend-services get-health fancy-fe-frontend --global

---
backend: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instanceGroups/fancy-fe-mig
status:
  healthStatus:
  - healthState: HEALTHY
    instance: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instances/fancy-fe-x151
    ipAddress: 10.128.0.7
    port: 8080
  - healthState: HEALTHY
    instance: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instances/fancy-fe-cgrt
    ipAddress: 10.128.0.11
    port: 8080
  kind: compute#backendServiceGroupHealth

Task 7. Scaling Compute Engine

Buat autoscaling

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

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

Task 8. Update the website

Updating instance template

modify machine

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

buat instance template

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

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

Cek status

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

Make changes to the website

copy update file

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

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

build react 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/

force all instance

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

Penutup

Sahabat Blog Learning & Doing demikianlah penjelasan mengenai Hosting a Web App on Google Cloud Using Compute Engine. Semoga Bermanfaat . Sampai ketemu lagi di postingan berikut nya.