ใช้ Github Actions ทำ Auto Deploy Gatsbyjs ขึ้น Firebase Hosting กันดีกว่า

ใช้ Github Actions ทำ Auto Deploy Gatsbyjs ขึ้น Firebase Hosting กันดีกว่า

 ก่อนอื่นเลย ผมย้ายจาก wordpress มาเป็น Gatsbyjs เพราะต้องการประหยัดรายจ่าย ด้วยการใช้ GatsbyJS build เป็น static website แล้ว deploy ขึ้น firebase hosting แทน แต่ทุกครั้งที่จะเอา content ขึ้นต้องมานั่งสั่ง yarn build แล้วสั่ง firebase deploy —only hosting ทุกครั้ง

nodebook ร้องเสียงดังระงมเลย งั้นเลยแก้ปัญหาด้วยการ ให้ github deploy ให้ละกัน

push ปุ๊บ deploy ปั๊บ

1. ก่อนอื่นเลยใช้ Terminal พิมพ์ Command

firebase login:ci

ระบบจะ gen token กลับมาให้ทาง terminal ของเรา

Waiting for authentication...

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

token here

Example: firebase deploy --token "$FIREBASE_TOKEN"

2. หลังจากนั้นให้ไปที่ github repo ของเรา เพื่อใส่ firebase token ลงไปใน Secrets ของ repo เรา

3. สร้าง Folder .github/workflows และทำการสร้าง file action.yml ไว้ภายใต้ folder

โดยโครงสร้าง Folder structure ของ ผมจะเป็นแบบนี้ ของใครของมันนะ ไม่เหมือนกัน

.
+-- _.github
|   +-- _workflows
|       +-- action.yml
+-- _aofiee.dev
|   +-- _theme
|       +-- _mytheme
|           +-- _site
|               +-- firebase.json
+-- _functions
|   +-- firebase.json
|   +-- _functions

ทำ actions ให้ autu deploy เมื่อมีการ push มาที่ master

name: "Build and Deploy"
on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: yarn
        working-directory: ./aofiee.dev/theme/_mytheme/site/
      - name: Build
        run: yarn build
        working-directory: ./aofiee.dev/theme/_mytheme/site/
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: public
          path: ./aofiee.dev/theme/_mytheme/site/public
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: public
          path: ./aofiee.dev/theme/_mytheme/site/public
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_HOSTING }}
          PROJECT_PATH: ./aofiee.dev/theme/_mytheme/site/

แค่นี้แหล่ะ เราก็จะได้ auto deploy ไปที่ firebase hosting แล้ว ใช้ฟรี ไม่เสียเงิน ฟรีตั้งแต่ hosting, database, api, จนมา deploy เลย

Operator

Khomkrid Lerdprasert

Technical Lead — building AI-powered platforms, omni-channel chat systems, and telemedicine solutions with Go, Next.js & clean architecture. 20+ years shipping software from crypto wallets to e-learning systems. Bangkok-based. Writes code late at night, brews beer on weekends.

GithubInstagram

author archive