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

By Khomkrid Lerdprasert

Published in Technology

August 31, 2020

1 min read

ใช้ 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 ปั๊บ

ก่อนอื่นเลยใช้ 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"

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

สร้าง 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/