Day30 使用Cloudflare部屬Vue靜態網站

2023 iThome 鐵人賽

DAY 30

SideProject30

毫無自信的開發Web遊戲接龍-成為創造龍的英雄之路!系列第 30 篇

15th鐵人賽

懶惰學

2023-10-09 21:31:03

471 瀏覽

分享至

目前撲克牌遊戲網站都是在自己的電腦用npm run dev啟動，今天會介紹如何部屬Vue專案到CloudFlare提供對外連線的網站，操作有誤的地方再請多多指教。

使用Github Aciton建立

以下的操作需要事先註冊Cloudflare的帳號和GitHub的帳號

第0步建立CloudFlare Page的Project

我是參考這個YouTube影片學習如何建立Cloudflare Page專案，
但跟影片不同的部分我在1:56我是選only-select-repositories選擇單一Repo的權限並命名專案名稱ithelp-game-test。

影片看到5分鐘的時候，Cloudflare網站本身停止回應，後面的步驟就沒跟著影片教學做，後面第1~3步驟是我一步步看文件試出來的並非完全照官方建議走，因為需按專案本身調整。

第1步建立 Cloudflare API Token

參考Cloudflare Pages GitHub Action說明以下只是我再額外自己截圖實作的步驟。

登入帳號來到Cloudflare的儀表板，先點選左下角的Workers & Pages
接著點擊右手邊連結Manage API tokens進入管理API Token的頁面
點擊藍色按鈕Create Token前往建立API Token的頁面
來到API Tokens頁面後點選Create Custom Token旁的藍色按鈕Get Started
填寫Token name這邊幫Token取名為Deploy with github
在Permisions區塊點選Add新增一個權限Account/Cloudflare/Edit ，接著畫面拉到最下方點擊藍色按鈕Continue to summary。
此時Cloudflare會讓你再次確認權限，只需要注意畫面上有出現All accounts - Cloudflare Pages:Edit這個，沒問題就繼續點擊藍色按鈕Create Token。
至此Cloudflare API Token建立成功，點擊按鈕Copy先複製起來

第2步將Cloudflare API Token設置於Github Repo

此處Github儲存庫是kabuto412rock/ithelp-pokergame

前往Github的儲存庫點擊Setting->Secrets and Variables->Actions
來到Actions secrets and variables頁面後點擊綠色按鈕New Repository secret
- 設置新的密鑰CLOUDFLARE_API_TOKEN 填入先前取得的Cloudflare API Token
- 設置新的密鑰CLOUDFLARE_ACCOUNT_ID填入在Cloudflare的儀表板右手邊Manage API tokens上方的Account ID
在分支main加入檔案.github/workflows/publish.yml定義Github Action

這邊要注意的是 projectName對應填寫的專案名稱ithelp-game-test是我在第0步已經預先建立的專案名稱，若亂填的話Github Action自動執行時將會在步驟Publish to Cloudflare Pages出錯。

on: [push]

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    name: Publish to Cloudflare Pages
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      # Run a build step here if your project requires
      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm ci
          npm run build

      - name: Publish to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: ithelp-game-test
          directory: dist
          # Optional: Enable this if you want to have GitHub Deployments triggered
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
          # Optional: Switch what branch you are publishing to.
          # By default this will be the branch which triggered this workflow
          branch: main
          # Optional: Change the Wrangler version, allows you to point to a specific version or a tag such as `beta`
          wranglerVersion: '3'