สวัสดียินดีต้อนรับ! เราคือ Chihiro & Justin คู่รักวิศวกรซอฟต์แวร์ที่ชอบสร้างแอปพลิเคชันและเรียนรู้ไปด้วยกัน Chihiro เป็นผู้เชี่ยวชาญส่วนหน้า และ Justin เป็นผู้เชี่ยวชาญด้าน AI

ในบทความนี้ Chihiro จะตอบคำถามของ Justin เกี่ยวกับวิธีสร้างแอปพลิเคชัน React ด้วยไปป์ไลน์ CICD พร้อมคำแนะนำทีละขั้นตอนอย่างละเอียด

จัสติน: ฉันต้องปรับใช้แอปพลิเคชัน React/ TypeScript ค่อนข้างน้อย ฉันต้องการใช้ไปป์ไลน์ CICD คุณแนะนำเมนูใด

Chihiro: มีหลายวิธีที่จะบรรลุเป้าหมายนั้น แต่ฉันสนุกกับการใช้ Vite เพื่อตั้งค่าแอปพลิเคชัน React แทนที่จะใช้ Webpack หรือ CRA (Create React App) เพราะมันเร็วกว่ามากในการตั้งค่าโครงการของฉัน

ในการสร้างไปป์ไลน์ CICD หากคุณกำลังสร้างไซต์แบบสแตติกเท่านั้น ฉันขอแนะนำให้ใช้หน้า GitHub Actions และ GitHub ฟรีสำหรับนักวิ่งมาตรฐานที่โฮสต์โดย GitHub ในที่เก็บข้อมูลสาธารณะ และสำหรับนักวิ่งที่โฮสต์เอง (เพิ่มเติมเกี่ยวกับที่นี่ )

จัสติน: ฟังดูดีมาก คุณช่วยแนะนำวิธีเริ่มต้นให้ฉันหน่อยได้ไหม

จิฮิโระ: แน่นอนสิ! เตรียม VS Code ของคุณ (หรือตัวแก้ไขโค้ดที่คุณเลือก) และเทอร์มินัลให้พร้อม!

ขั้นตอนการดำเนินการ

1) ตั้งค่า Web App ในเครื่อง

1. นำทางไปยังไดเร็กทอรีที่คุณต้องการให้ไดเร็กทอรี repo
2. สร้างหน้า vite-to-gh (หรือชื่อโครงการของคุณ) โดยใช้npm create vite@latest(อ่านเอกสาร Viteสำหรับข้อมูลเพิ่มเติม)
3. ใช้ชื่อ vite-to-gh-pages เลือก React แล้วเลือก Typescript
4. ย้ายไปยังโฟลเดอร์cd vite-to-gh-pages
5. ติดตั้งโดยใช้npm iหรือnpm install
6. เพื่อทดสอบและดูแอปพลิเคชัน ให้เรียกใช้npm run devและดูแอปในเบราว์เซอร์ของคุณ

1. วิ่งnpm install gh-pages --save-dev
2. ติดตั้งโดยใช้npm i
3. สร้าง repo GitHub และเชื่อมโยงกับ repo ในเครื่องของเรา:

git init
git add .
git commit -m "first-commit"
git branch -M main
git remote add origin https://github.com/username/vite-to-gh-pages.git
git push -u origin main

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/vite-to-gh-pages/',
  plugins: [react()],
})

6. เพิ่ม/distโฟลเดอร์ใน repo ของคุณโดยเรียกใช้git add dist -f

7. วิ่งgit commit -m "Adding dist"

8. วิ่งgit subtree push --prefix dist origin gh-pages

9. ไปที่หน้าสดของ GH Pages เพื่อยืนยันว่าไซต์ของคุณใช้งานได้จริง (ไปที่การตั้งค่า repo ของคุณและค้นหา "หน้า" ที่แผงด้านซ้าย)

3) ตั้งค่า GitHub Actions เพื่อสร้างไซต์ของคุณใหม่เมื่อส่งไปยังสาขาหลัก

1. หากต้องการให้การดำเนินการของ GitHub อัปเดตบิลด์ของเรา ให้ไปที่การตั้งค่า repo ของคุณ > การดำเนินการ > ทั่วไป > สิทธิ์เวิร์กโฟลว์เพื่อเลือกRead and write permissionsและคลิก "บันทึก" การเปลี่ยนแปลงของเราจะทำให้การดำเนินการอัปเดตบิลด์ในสาขา gh-pages ด้วยการพุชแต่ละครั้งไปยังสาขาหลัก

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Node.js CI
on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18.x'
      - run: npm install
      - run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

4. วิ่งgit add .

5. วิ่งgit commit -m "add GH Action"

6. วิ่งgit push

7. เปิดเว็บแอป GitHub Pages เพื่อยืนยันว่าได้ทำการเปลี่ยนแปลงแล้ว คุณสามารถติดตามความคืบหน้าได้โดยคลิกแท็บ "การดำเนินการ" ที่แถบนำทางด้านบน

* ชื่นชมและเฉลิมฉลองแอพที่เพิ่งปรับใช้ของคุณ!

Chihiro: มันได้ผลสำหรับคุณอย่างไร?

จัสติน: มันง่ายมากที่จะปรับใช้และอัปเดตไซต์อย่างต่อเนื่องโดยใช้ไปป์ไลน์ CICD! ตอนนี้ฉันสามารถใช้เวลามากขึ้นในการแก้ปัญหาจริง ขอบคุณ!

4) ทรัพยากร

• ดูหน้าที่ปรับใช้ที่นี่
• vite-to-gh-pages repoบน GitHub

• Justin Snider // GitHub: @sniderjustin LinkedIn: @sniderj
• Chihiro Snider// GitHub: @cheesehero112 LinkedIn: @chihiro-snider

อีเมล์: [email protected]