Thursday, March 28, 2024
GCP Juara GCP Web Hosting

Hosting a Web App on Google Cloud Using Compute Engine

compute

Hosting a Web App on Google Cloud Using Compute Engine

Daftar Isi

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

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
cd ~/monolith-to-microservices
./setup.sh
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

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

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

Baca Juga :  Cloud Monitoring

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
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
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"
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

Baca Juga :  Cloud Monitoring

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

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.

(Visited 208 times, 1 visits today)

Similar Posts