วิธีHostเว็บไซต์บน GCP Compute Engine

สวัสดีค่ะ วันนี้มายจะมาสอนวิธีการ deploy เว็บแอปของเราบน Google Cloud Platform โดยที่ตัว compute ที่เราจะใช้เป็น host ในวันนี้คือ Google Compute Engine นะคะ

นอกจาก Web hosting แล้ว Google ยังมี Google Cloud Domains ให้เราเลือกโดเมน register ผ่านทาง Google ได้เลยด้วย หรือ manage DNS ด้วย Cloud DNS ใน Architecture ตัวอย่างนี้เราสามารถใช้ Load Balancing เพื่อเป็น external https load balancer เพื่อจัดการกับ traffic ต่างๆบน network เรา ดังนั้นเรามาเรียนรู้วิธีการ host เว็บแอปบน Virtual machine ทีละขั้นตอนกัน

1. เปิดการใช้ Compute Engine API ผ่านทาง Google Cloud Console หรือ ใช้คำสั่งด้านล่างเพื่อเปิด API บน Cloud Shell

gcloud services enable compute.googleapis.com

2. สร้าง Bucket บน Google Cloud Storage เพื่อเก็บโค้ดของเราและพวก Startup Script ก่อน โดยใช้คำสั่งด้านล่างบน Cloud shell

gsutil mb gs://online-shopping-$DEVSHELL_PROJECT_ID

• คำสั่ง $DEVSHELL_PROJECT_ID สามารถใช้เพื่อดึง variable ใน Cloud shell มาได้เช่น Project ID
• คำสั่ง mb สร้าง Bucket ชื่อ “online-shopping-ชื่อโปรเจคเรา” เราอาจจะใช้ชื่อ Bucket เป็นชื่ออื่นก็ได้แล้วแต่สะดวกเลยค่า

3. Clone โค้ดทั้งหมดมาเก็บไว้บน Bucket ที่เราพึ่งสร้างไป

You will clone the source code so you can focus on the aspects of deploying to Compute Engine. Later on in this lab, you will perform a small update to the code to demonstrate the simplicity of updating on Compute Engine.

4. ขั้นตอนการสร้าง Virtual Machine Instances เพื่อใช้ deploy โค้ดของเรา สมมติว่าเราสร้าง startup script ชื่อ 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 /store
gsutil -m cp -r gs://online-shopping-[DEVSHELL_PROJECT_ID]/store/
# Install app dependencies.
cd /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=/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

ขั้นตอนการ copy โค้ดจาก Cloud storage เราต้องเปลี่ยน url เป็น Bucket ที่เราพึ่งสร้างไป เช่นตัวอย่าง

# Get the application source code from the Google Cloud Storage bucket.
mkdir /store
gsutil -m cp -r gs://online-shopping-[DEVSHELL_PROJECT_ID]/store/

สุดท้ายเซฟ startup scriptของเราที่แก้แล้วมาเก็บไว้บน Cloud storage เดียวกันตามคำสั่งด้านล่าง

gsutil cp ~/startup-script.sh gs://online-shopping-$DEVSHELL_PROJECT_ID

5. Clone โค้ดของเรามาเพื่ออัพบน Cloud storage

cd ~
gsutil -m cp -r "folder-name" gs://online-shopping-$DEVSHELL_PROJECT_ID/

6. Deploy โค้ดหลังบ้านบน Cloud compute engine instance ในที่นี้เราจะสร้าง n1-standard-1 instance ที่ถูก config ไว้ว่าให้รัน startup script

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

7. Config connection

ก่อนเราจะ deploy โค้ดหน้าบ้านของเรา ให้เราเข้าไปอัพเดต config จาก localhost เพื่อ point ไปที่ External IP ที่เราพึ่ง deploy ไปก่อนหน้านี้

วีธีเช็ค EXTERNAL_IP:

gcloud compute instances list

Example output:

NAME     ZONE           MACHINE_TYPE  PREEMPTIBLE  INTERNAL_IP  EXTERNAL_IP   STATUS
backend  us-central1-f  n1-standard-1             10.128.0.2   34.68.223.88  RUNNING

8. Deploy ส่วนของโค้ดหน้าบ้านบน Cloud compute engine instance

• เราจะdeploy ตามขั้นตอนเดียวกับที่เราได้ทำไปเมื่อกี้ตอนที่ deploy backend เลยนะคะ

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

9. อย่าลืม config networkนะคะ สร้าง firewall rules เพื่อให้ port 8080 และ 8081–8082 สามารถ access ได้

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

10. วิธีการหา External IP ของโค้ดfrontend ที่เรา deploy ไปให้ใช้คำสั่ง

gcloud compute instances list

Example output:

NAME: backend
ZONE: us-central1-f
MACHINE_TYPE: n1-standard-1
PREEMPTIBLE:
INTERNAL_IP: 10.128.0.2
EXTERNAL_IP: 34.27.178.79
STATUS: RUNNING
NAME: frontend
ZONE: us-central1-f
MACHINE_TYPE: n1-standard-1
PREEMPTIBLE:
INTERNAL_IP: 10.128.0.3
EXTERNAL_IP: 34.172.241.242
STATUS: RUNNING

ขั้นตอนสุดท้าย เทสโดย run app และเข้าไป access เว็บไซต์ที่ http://[Frontend-External-IP]:8080

จบไปแล้วน้ากับวิธีการทำ web hosting บน Google Compute Engine อาจจะมีบางขั้นตอนที่ซับซ้อนเกี่ยวกับ network configuration นิดนึง หวังว่าจะพอทำตามกันได้ เป็นแนวทางนะคะ ฝากติดตามบทความต่อๆไปด้วยนะคะ ^_^