วันพุธที่ 6 พฤษภาคม พ.ศ. 2563

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

เราต้องทำอะไรก่อนมาถึงตรงนี้
- มี Account Github
- มี Account Travis CI
- มี Account Firebase

สร้าง Account Github และ Travis CI และทำการเชื่อมให้ Travis CI เห็น Repo ใน Github
สร้าง Firebase Project ใน Firebase Console เพื่อใช้ทำการ Initial Firebase อีกที
สร้าง Angular Project แล้วทำการ Initial Firebase ใน Angular Project

เราจะต้องใช้งานไฟล์ .firebaserc และไฟล์ firebase.json
ไฟล์ .firebaserc เก็บชื่อ Project ที่เราจะทำการ Deploy
ไฟล์ firebase.json เก็บข้อมูลการ Deploy เราต้องแก้ไขไฟล์ส่วนที่เป็น public

ตัวอย่างไฟล์ .firebaserc ตรง default ให้เราใส่ชื่อ project เข้าไปผมใช้ project ชื่อ angular-travis-ci
{
  "projects": {
    "default": "angular-travis-ci"
  }
}
ตัวอย่างไฟล์ firebase.json ตรง public ใส่ Path ของไฟล์ที่เก็บ Build แล้วของผม Project ชื่อ travis-ci
เวลา build เสร็จแล้วจะอยู่ใน Folder ชื่อ dist/travis-ci
{
  "hosting": {
    "public": "dist/travis-ci",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
เมื่อทำการต่อ Github เข้ากับ Travis เรียบร้อยแล้วให้ทำการสร้างไฟล์ .travis.yml ที่ Project ของเรา

ตัวอย่างไฟล์ .travis.yml
language: node_js
node_js:
  - '12.14'
branches:
  only:
  - master
before_script:
  - npm install -g @angular/cli
script:
  - npm install
  - npm run build
deploy:
  skip_cleanup: true
  provider: firebase
  token:
    secure: [from travis encrypt]

เสร็จแล้วให้ทำการ Push ไฟล์ขึ้นไปที่ Github เมื่อ Travis เห็นไฟล์ .travis.yml จะทำการ Automate Build และ Deploy ให้เรา


ปัญหาที่พบเลยคือ
Error: HTTP Error: 401, Request had invalid authentication credentials.
Expected OAuth 2 access token, login cookie or other valid authentication credential.
See https://developers.google.com/identity/sign-in/web/devconsole-project.
ให้เราทำการใช้คำสั่งนี้ firebase login:ci เราจะได้ Firebase Token มา
เอา Firebase Token แล้วใช้คำสั่ง travis encrypt อีกทีจะได้ Secure มาใส่ในไฟล์ .travis.yml
firebase login:ci
travis encrypt "[Firebase Token]" -r [githubusername]/[repositoryname] --com




ข้อมูลเพิ่มเติมจาก : https://docs.travis-ci.com/user/deployment/firebase/
https://travis-ci.community/t/firebase-authentication-error/628/5

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

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