iT邦幫忙

2025 iThome 鐵人賽

DAY 13
0
Modern Web

Laravel 12 開發者幸福度升級指南系列 第 13

Day 13:GitHub Action 自動整合以及 Laravel Cloud 進行雲端自動部署

  • 分享至 

  • xImage
  •  

專案撰寫完成,並且在本地端測試過了之後,接著就是部署到測試環境或者正式環境,讓測試者或者使用者可以正式檢查這個功能了。

這時我們就要提到跟著 Laravel 12 推出的另一個重大的改進:Laravel Cloud

在過去,如果要部署一個 Laravel 的專案,可能我們會選擇自己架設主機,或者購買 AWS、GCP 等等的雲端主機服務。

購買主機之後,要在主機內安裝 PHP、Composer⋯⋯等工具。

如果想加上自動整合以及自動部署,那麼要研究的項目就更多了,包含專案上傳到遠端 git repo 之後要做哪些行為,怎麼將可執行的程式下載到主機內,下載之後怎麼運行⋯⋯等等。

真要說起來,這些任務都相當單純,但是一多起來還是挺繁瑣的。

所以 Laravel 官方推出了 Laravel Cloud 這個部署方案,讓我們可以避開這些繁瑣的設置,快速的部署 Laravel 專案。

下面我們就來開始看看怎麼做吧

建立 Laravel Cloud 帳號

首先,,我們先到 Laravel Cloud 官網建立帳號

https://cloud.laravel.com/

laravel-cloud-login

建立好之後,我們會看到下面的畫面,要求輸入信用卡

laravel-cloud-setup

由於雲端容器服務是根據使用量進行計費的,所以必須要預先輸入一張信用卡,才能在之後部署時根據用量計費。

輸入完成之後,我們會看到下面畫面,選擇專案放置的位置,這邊我們選擇 GitHub

laravel-cloud-create

設置完成之後,看到以下畫面

laravel-cloud-app

我們就可以開始設定我們的第一個專案了

專案的自動整合

在以前,自動整合有很多的工具,還要進行跟 Git Repo 之間的整合,才能在上傳程式碼時同時進行整合

不過很幸運的是,現在的 GitHub 已經有的自己的整合方案 GitHub Action

更幸運的是,當我們使用 Laravel Starter Kit 建立專案時,其實已經將常用的 GitHub Action 都建立好了!

我們可以打開專案的 .github/workflows/ 資料夾內,有兩個 YAML 檔

首先我們看 lint.yml

name: linter

on:
  push:
    branches:
      - develop
      - main
  pull_request:
    branches:
      - develop
      - main

permissions:
  contents: write

jobs:
  quality:
    runs-on: ubuntu-latest
    environment: Testing
    steps:
      - uses: actions/checkout@v4

      - name: Setup PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: '8.4'

      - name: Add Flux Credentials Loaded From ENV
        run: composer config http-basic.composer.fluxui.dev "${{ secrets.FLUX_USERNAME }}" "${{ secrets.FLUX_LICENSE_KEY }}"

      - name: Install Dependencies
        run: |
          composer install -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist
          npm install

      - name: Run Pint
        run: vendor/bin/pint

      # - name: Commit Changes
      #   uses: stefanzweifel/git-auto-commit-action@v5
      #   with:
      #     commit_message: fix code style
      #     commit_options: '--no-verify'
      #     file_pattern: |
      #       **/*
      #       !.github/workflows/*

從名字我們就可以知道,這是一個檢查排版流程的檔案

在經歷一串環境安裝之後,運作 vendor/bin/pint 進行排版檢查。

接著我們看 test.yml

name: tests

on:
  push:
    branches:
      - develop
      - main
  pull_request:
    branches:
      - develop
      - main

jobs:
  ci:
    runs-on: ubuntu-latest
    environment: Testing

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: 8.4
          tools: composer:v2
          coverage: xdebug

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install Node Dependencies
        run: npm i

      - name: Add Flux Credentials Loaded From ENV
        run: composer config http-basic.composer.fluxui.dev "${{ secrets.FLUX_USERNAME }}" "${{ secrets.FLUX_LICENSE_KEY }}"

      - name: Install Dependencies
        run: composer install --no-interaction --prefer-dist --optimize-autoloader

      - name: Copy Environment File
        run: cp .env.example .env

      - name: Generate Application Key
        run: php artisan key:generate

      - name: Build Assets
        run: npm run build

      - name: Run Tests
        run: ./vendor/bin/pest

這邊則是在環境設置之後運作 ./vendor/bin/pest 進行自動化測試。

由於有這兩個檔案,所以當我們將專案送到 GitHub Repo 內之後,就會開始運作自動整合,並根據這兩個檔案的流程進行整合動作了!

我們可以在 GitHub 的 Action 這個標籤頁內看到我們所做的自動整合流程

github-ci

部署

自動整合說完了之後,現在我們就可以開始進行部署了

我們到Laravel Cloud 點擊 「New Application」

點擊之後,選擇我們要部署的專案

laravel-cloud-app

然後選擇要雲端主機要部署的地區,目前離我們最近的是新加坡

laravel-app-choose-location

點擊之後,我們再點擊「Deploy」,就開始進行部署了!

laravel-cloud-deploy

由於 Laravel Cloud 知道這是一個 Laravel 專案,所以其他的環境設置、檔案上傳⋯⋯等等,都不需要我們來處理

Laravel Cloud 已經幫我們處理完畢了

部署完畢之後,我們可以看到 Domain 這個區塊已經有了網址

laravel-cloud-domain

點擊進去之後,就可以看到我們部署上去的網頁了!

今天有關部署的部分,就先說到這邊,我們明天見!


上一篇
Day 12:Filament 利用其他套件再客製化
系列文
Laravel 12 開發者幸福度升級指南13
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言