[Github] Automate - Build และ Deploy Angular JS ไปยัง Firebase

สิ่งที่เราต้องเตรียมคือ
- Account Github
- Account Firebase

ทำการ Push Project ของเราที่เป็น Angular ขึ้นไปยัง Github จากนั้นเปิดที่หน้าเว็บของ Github เข้าไปยัง Repository ของเรา สังเกตุแถบด้านบนจะเห็น แถบ Actions ให้คลิกเข้าไปแล้วเลือก set up a workflow yourself เราจะเห็นไฟล์ main.yml

ไฟล์ main.yml

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - uses: actions/checkout@v2

    # Runs a single command using the runners shell
    - name: Run a one-line script
      run: echo Hello, world!

    # Runs a set of commands using the runners shell
    - name: Run a multi-line script
      run: |
        echo Add other actions to build,
        echo test, and deploy your project.

การตั้ง Workflow Trigger ตอนนี้จะทำงานก็ต่อเมื่อมีการ Push หรือ Pull Request เข้ามาใน Branch Master

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

ตั้ง Job ให้ทำงานอะไร ตอนนี้มี Job ชื่อ Build อย่างเดียว

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:

ลำดับการทำงาน

# Steps represent a sequence of tasks that will be executed as part of the job
    steps:
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - uses: actions/checkout@v2

    # Runs a single command using the runners shell
    - name: Run a one-line script
      run: echo Hello, world!

    # Runs a set of commands using the runners shell
    - name: Run a multi-line script
      run: |
        echo Add other actions to build,
        echo test, and deploy your project.

ให้เปลี่ยน actions/checkout@v2 เป็น actions/checkout@master แล้ว Commit เพื่อทดสอบ
เมื่อ Commit แล้วมาดูที่หน้า Actions จะเห็นว่ามีการทำงานบ้างอย่างเกิดขึ้น
เราจะเห็นว่ามีไฟล์ CI ทำงานอยู่ เมื่อคลิกเข้าไปก็จะเจอว่ามี งานชื่อ build ทำการเสร็จแล้ว ใน build ก็สามารถกดดู Log ต่าง ๆ ได้

---

ตัวอย่างไฟล์ mail.yml

name: CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]


jobs:
    build:
        runs-on: ubuntu-latest
        steps:
    
        - uses: actions/checkout@master
        - uses: actions/setup-node@master
          with: 
            node-version: '12.x'
    
        - run: npm install
        - run: npm run build

---

ขอขอบคุณข้อมูลจาก
https://fireship.io/snippets/github-actions-deploy-angular-to-firebase-hosting/