วันอาทิตย์ที่ 10 พฤษภาคม พ.ศ. 2563

[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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 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
?
1
2
3
4
5
6
7
# 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 อย่างเดียว
?
1
2
3
4
# 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:

ลำดับการทำงาน
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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/
on
ป้ายกำกับ: ,
ตำแหน่ง: Thailand

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)