ผู้ที่ใช้ WordPress ในการทำเว็บไซต์คงจะรู้กันดีนะครับว่าค่าใช้จ่ายสำหรับการดูแลเว็บไซต์ให้อยู่ดีมีสุขนั้นค่อนข้างเยอะเลยทีเดียว ไหนจะเป็นค่า host หรือ server ที่ต่ำ ๆ ก็หลักร้อยบาทต่อเดือน ไหนจะค่าโดเมนอีก

นั่นจึงเป็นเหตุผลที่ทำให้ตัวผมเองได้คิดหาวิธีการลดค่าใช้จ่ายในส่วนนี้ไป

ในตอนแรก หวยไปออกที่ Amazon AWS ที่มี Server ให้ใช้แบบฟรี ๆ อย่าง EC2 ที่มี Free tier eligible อยู่ที่ 12 เดือน เดือนละ 750 ชั่วโมง ซึ่งถือว่าเป็น Spec ที่ใช้ได้เลยนะ แต่ปัญหาของ EC2 คือเวลาจะปรับอะไรหรือ Restart server ที Public IP ที่เขาให้มาจะเปลี่ยนไป แต่มันก็มีวิธีที่จะไม่ให้ Public IP เปลี่ยนอยู่นั่นก็คือทำ Allocate Elastic IP address

ใช่ครับ มันมีค่าใช้จ่ายในส่วนนี้

แต่ราคาก็ไม่ใช่แพงจนที่ว่าเราจ่ายไม่ได้เลยใช่ไหมล่ะ 555 แต่ปัญหามันอยู่ตรงนี้ครับ

เว็บไซต์ส่วนใหญ่ทุกวันนี้ถ้าเว็บไหนไม่มีได้ทำ SSL หรือ Https แล้วถือว่าเว็บนั้นไม่ปลอดภัยอีกต่อไป และถ้าใครทำ SEO ให้เว็บไซต์เป็นที่โปรดปรานของ Google ท่านแล้วยิ่งแล้วใหญ่เพราะพี่ท่านดันเอาเรื่องนี้มาเป็นคะแนนในการจัดอันดับด้วย

แล้วทำอย่างไรล่ะ

หลังจากที่ผมใช้สมองอันน้อยนิดของผมศึกษาหาข้อมูลแล้วพบว่าคุณต้องใช้บริการ Elastic Load Balancing (มีค่าใช้จ่าย) และ Amazon Route 53 (มีค่าใช้จ่าย) ซึ่งรวม ๆ แล้ว ค่าใช้จ่ายตกเดือนละ 1,000 กว่าบาท ..โอ้ววว Server ฟรี แต่อย่างอื่นไม่ฟรีนี่หว่า

พอได้รู้ว่า Server ฟรีจริงนะ แต่อย่างอื่นที่พ่วงมานั้นไม่ฟรีเลย แพงไปสำหรับผมด้วยซ้ำ จึงมาคิดได้ว่า มันมีบริการหนึ่งที่ฟรีจริง ๆ และถึงถ้าเว็บเรามีคนเข้าเยอะ มันก็คิดค่าใช้จ่ายตามที่เราใช้จริง ซึ่งก็คือบริการแบบ Serverless นั่นเอง (Serverless คืออะไร? มารู้จักการพัฒนาระบบเว็บแบบใหม่ ราคาถูก แถมไม่ล่มง่าย ๆ – เว็บนี้เขียนถึง Serverless ได้ดีมาก ๆ ครับ)

ระบบ Serverless ที่วิ่งเข้ามาในหัวผมตั้งแต่นึกได้ก็คือ Firebase Hosting ของ Google นั่นเองครับ ตัวนี้ข้อดีที่ผมสัมผัสได้คือมันฟรี แม้ใช้เกินโควต้าฟรีของเขา เขาก็คิดราคาถูกมาก ๆ

แต่ปัญหามันอยู่ที่ระบบ Serverless นั้นมันรองรับแค่ Static website นั่นก็หมายถึงคุณจะรัน WordPress ใน firebase ไม่ได้ แล้วทำยังไงล่ะ?

ในเมื่อ firebase รับได้แค่ static wabsite เราก็ทำเว็บไซต์ที่รันด้วย wordpress ของเราให้เป็น static ด้วยการใช้ plugin WP2Static โดยข้อดีของ plugin นี้ก็คือเราจะได้ไฟล์ html เป็นไฟล์ ๆ ออกมาเลย เจ๋งไหมล่ะ 555

ข้อดีอีกอย่างของ WP2Static ก็คือมันสามารถทำ Automated Deployment ในบางที่ได้ด้วย เช่น Github page, S3, Gitlab, etc.. ..แต่ไม่มี Firebase

โอ้ยยยยย ปัญหาเยอะจริง ๆ แต่ด้วยความที่อยากเอา Blog นี้ไปวางที่ Firebase มาก ๆ จึงคิด Solution ง่าย ๆ ขึ้นมาว่า WordPress => Gitlab => Firebase เพิ่มขั้นตอนขึ้นมาหน่อย แต่ได้ผลแน่นอนครับ

เอาล่ะมาถึงตอนนี้แล้วสิ่งที่เราต้องมีก็คือ

  • Server (สำหรับใช้ run wordpress เป็น localhost ก็ได้)
  • Account gitlab (สร้างโปรเจคให้เรียบร้อย)
  • Account firebase (สร้างโปรเจคให้เรียบร้อย)

ขั้นแรกให้เราเตรียมเว็บไซต์ที่ run ด้วย wordpress ของเราให้เรียบร้อยเสียก่อน ตกแต่งให้สวยงามลง plugin ที่จำเป็น

ถัดมาให้เราลง plugin ที่ชื่อว่า WP2Static และใส่ค่าที่เราได้จาก gitlab ให้เรียบร้อย

ขั้นตอนต่อไปให้เราไปสร้างไฟล์ .gitlab-ci.yml ที่โปรเจค gitlab ของเราแล้วใส่ code นี้เข้าไป

image: rambabusaravanan/firebase
stages:
  - deploy

deploy-prod:
  stage: deploy
  only:
    - master
  script:
    - npm i -g firebase-tools@latest
    - firebase use firebase-projectname --token $FIREBASE_TOKEN
    - firebase deploy --only hosting -m "Pipe $CI_PIPELINE_ID Build $CI_BUILD_ID" --token $FIREBASE_TOKEN

หลังจากนั้นให้ลง Firebase CLI tools แล้วใช้คำสั่ง firebase login:ci เพื่อเอา Token ไปใช้ในโปรเจค gitlab ที่้ราสร้างขึ้น

% firebase login:ci

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=123456789-fgrhgmd42bananaj5i8b5prd3ho449e6.a
.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonl
.googleapis.com%2Fauth%2Ffirebase&response_type=code&state=5475783&redirect_uri=http%3A%2F%2Flocal

Waiting for authentication…

+ Success! Use this token to login on a CI server:

1/qX11M4Y400rn4Ezlj-q9LhtLrI13S4R400_J1y1BdQXDiE4NTvo

Example: firebase deploy — token “$FIREBASE_TOKEN”

พอได้ Token มาให้เรานำไปใส่ใน Gitlab environment variable ที่อยู่ในแถบ settings

จากนั้นให้กลับมาที่ gitlab project อีกที แล้วสร้างไฟล์ firebase.json ขึ้นมาแล้วใส่ code นี้เข้าไป

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*"
    ]
  }
}

มาถึงตรงนี้เราสามารถกด Start static site export ที่ Plugin WP2Static ได้เลย รอประมาณ 1 นาที เว็บที่เป็น Static website ของเราก็จะขึ้นไปโลดแล่นที่ Firebase แล้วล่ะครับ

และเว็บไซต์ที่คุณกำลังเข้าอยู่ตอนนี้คือรันอยู่บน firebase แล้วครับ