Xin chào & chào mừng! Chúng tôi là Chihiro & Justin, một cặp đôi kỹ sư phần mềm thích tạo ứng dụng và học cùng nhau. Chihiro là chuyên gia giao diện người dùng và Justin là chuyên gia AI.

Trong bài viết này, Chihiro sẽ trả lời các câu hỏi của Justin về cách xây dựng ứng dụng React bằng CICD pipeline với hướng dẫn từng bước chi tiết.

Justin: Tôi phải triển khai khá nhiều ứng dụng React/TypeScript. Tôi muốn sử dụng đường dẫn CICD. Bạn đề xuất món gì?

Chihiro: Có nhiều cách để đạt được điều đó, nhưng tôi thích sử dụng Vite để thiết lập ứng dụng React của mình, thay vì sử dụng Webpack hoặc CRA (Tạo ứng dụng React) vì thiết lập dự án của tôi nhanh hơn rất nhiều.

Đối với việc tạo đường dẫn CICD, nếu bạn chỉ tạo các trang web tĩnh, tôi khuyên bạn nên sử dụng các trang GitHub Actions và GitHub. Nó miễn phí cho các vận động viên được lưu trữ trên GitHub tiêu chuẩn trong các kho lưu trữ công cộng và cho các vận động viên tự lưu trữ. (thêm về điều đó ở đây )

Justin: Điều đó nghe thật tuyệt, bạn có thể hướng dẫn tôi cách bắt đầu không?

Chihiro: Chắc chắn rồi! Nhận Mã VS của bạn (hoặc trình chỉnh sửa mã bạn chọn) và thiết bị đầu cuối đã sẵn sàng!

Các bước thực hiện

1) Thiết lập ứng dụng web cục bộ

1. Điều hướng đến thư mục mà bạn muốn đặt thư mục repo.
2. Tạo các trang vite-to-gh (hoặc tên dự án của bạn) bằng cách sử dụng npm create vite@latest(đọc tài liệu Vite để biết thêm thông tin)
3. Sử dụng tên vite-to-gh-pages, chọn React và chọn Typescript.
4. Di chuyển vào thư mụccd vite-to-gh-pages
5. Cài đặt bằng cách sử dụng npm ihoặcnpm install
6. Để kiểm tra và xem ứng dụng chạy npm run devvà xem ứng dụng trong trình duyệt của bạn

1. Chạynpm install gh-pages --save-dev
2. cài đặt sử dụngnpm i
3. Tạo repo GitHub và liên kết với repo cục bộ của chúng tôi:

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. Thêm /distthư mục vào repo của bạn bằng cách chạygit add dist -f

7. Chạygit commit -m "Adding dist"

8. Chạygit subtree push --prefix dist origin gh-pages

9. Điều hướng đến trang trực tiếp Trang GH của bạn để xác minh trang web của bạn đang hoạt động. (Chuyển đến cài đặt của repo của bạn và tìm “Trang” trên bảng điều khiển bên trái)

3) Thiết lập GitHub Actions để xây dựng lại trang web của bạn dựa trên cam kết với nhánh chính

1. Để cho phép hành động GitHub cập nhật bản dựng của chúng tôi, hãy truy cập repo của bạn Cài đặt > Hành động > Chung > Quyền quy trình công việc để chọn Read and write permissionsvà nhấp vào “Lưu”. Thay đổi của chúng tôi sẽ cho phép hành động cập nhật bản dựng trong nhánh gh-page với mỗi lần đẩy tới nhánh chính.

# 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. Chạygit add .

5. Chạygit commit -m "add GH Action"

6. Chạygit push

7. Mở ứng dụng web Trang GitHub của bạn để xác minh rằng thay đổi của bạn đã được thực hiện. Bạn có thể theo dõi tiến trình bằng cách nhấp vào tab "Hành động" ở điều hướng trên cùng.

* Ngưỡng mộ và ăn mừng ứng dụng mới được triển khai của bạn!

Chihiro: Làm thế nào mà nó làm việc cho bạn?

Justin: Rất dễ dàng để triển khai và tiếp tục cập nhật trang web bằng đường dẫn CICD! Bây giờ tôi có thể dành nhiều thời gian hơn để giải quyết các vấn đề thực tế. Cảm ơn!

4) Tài nguyên

• Xem trang đã triển khai tại đây
• repo vite-to-gh-page trên GitHub

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

email: [email protected]