iT邦幫忙

2023 iThome 鐵人賽

DAY 29
0
Modern Web

前端三兩事,哪些您必須要知道的事 !系列 第 29

Day 29 - Git & Github 和哪些小故事

  • 分享至 

  • xImage
  •  

摘要

  • 這篇文章的目的是 ?
  • Git & Github 和哪些小故事
  • 連結

這篇文章的目的是 ?

在現代軟體開發世界中,持續學習和跟蹤最新的開發實踐是至關重要的。這不僅有助於提高你的技能,還有助於確保你的項目處於最佳狀態,符合最新的標準和社區的期望。在這篇文章中,我們將探討兩個重要的主題,它們在軟體開發中扮演了關鍵角色。

Git & Github 和哪些小故事

步驟 1: 什麼是 CI / CD?

CI/CD 是持續整合(Continuous Integration)和持續部署(Continuous Deployment)的縮寫。它是一種軟體開發實踐,旨在自動化測試、集成和部署應用程式,以確保代碼的高品質和快速交付。為什麼要學 CI/CD 呢?

  • 提高開發速度:CI/CD 可以自動化測試和部署過程,減少手動操作,從而加快開發速度。
  • 確保代碼品質:自動化測試確保每次更改不會破壞現有功能,有助於提高代碼品質。
  • 降低風險:自動部署可以減少人為錯誤,提高應用程式的穩定性。

步驟 2: 如何實施 CI / CD?

現在讓我們來看看如何實施 CI/CD。

  1. 創建 GitHub 倉庫:首先,在 GitHub 上創建一個新的倉庫,並將你的 React 專案上傳到這個倉庫。
  2. 安裝必要的工具:確保你的開發環境中安裝了以下工具:
    • Node.js:React 的運行環境
    • npm 或 yarn:JavaScript 的包管理工具
    • GitHub 帳戶:用於存儲代碼和設置 CI/CD 流程的帳戶
  3. 設置 CI 流程:這裡我們可以使用 GitHub Actions 來設置 CI 流程。在你的倉庫中創建一個 .github/workflows 文件夾,然後創建一個 YAML 文件來定義你的 CI 運行步驟。例如:
yamlCopy code
name: CI

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout Repository
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: 14

    - name: Install Dependencies
      run: npm install

    - name: Build
      run: npm run build

    - name: Run Tests
      run: npm test

這個示例設置了當主分支 (main) 推送時運行的 CI 流程。它會在 Ubuntu 環境下檢查代碼、安裝依賴、構建應用程序並運行測試。

  1. 設置 CD 流程:要設置持續部署流程,你可以使用不同的工具,如 Netlify、Vercel 或 GitHub Pages,具體取決於你的需求。這些工具允許你自動部署應用程序到網上。
  2. 將 CI / CD 整合到你的工作流程中:現在,每次推送到主分支時,CI 流程都會運行,並確保代碼的品質。CD 流程則可根據需要自動部署你的應用程序。

步驟 3: 主分支從 "master" 改為 "main"

關於為什麼 GitHub 從 "master" 分支改為 "main" 分支,這背後有一個故事。這是為了消除語言上的偏見和促進包容性。"master" 這個詞在過去可能被用來描述奴隸制度,因此 GitHub 等軟體社區決定採用更中立和尊重的術語。

要將你的 GitHub 倉庫的默認分支改為 "main",請執行以下步驟:

  1. 在 GitHub 倉庫頁面上,點擊 "Settings"。
  2. 在左側菜單中,選擇 "Branches"。
  3. 在 "Default branch" 選項下,選擇 "main" 作為新的默認分支。
  4. 選擇 "Update" 來確認更改。

現在你的倉庫的主分支應該是 "main" 了。

這就是如何使用 React 部署到 GitHub、設置 CI/CD 流程以及關於分支名稱更改的解釋。希望這篇文章對你有所幫助!如果需要任何進一步的說明或程式碼示例,請隨時告訴我。


上一篇
Day 28 - React & CI/CD
下一篇
Day 30 - 就這樣吧 ...
系列文
前端三兩事,哪些您必須要知道的事 !30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言