안녕하세요 반갑습니다! 우리는 함께 응용 프로그램을 만들고 배우는 것을 즐기는 소프트웨어 엔지니어 부부인 Chihiro & Justin입니다. Chihiro는 프론트엔드 전문가이고 Justin은 AI 전문가입니다.

이 기사에서 Chihiro는 자세한 단계별 가이드와 함께 CICD 파이프라인으로 React 애플리케이션을 구축하는 방법에 대한 Justin의 질문에 답할 것입니다.

Justin: 꽤 많은 React/TypeScript 애플리케이션을 배포해야 합니다. CICD 파이프라인을 사용하고 싶습니다. 추천 메뉴가 무엇인가요?

치히로: 이를 달성하는 방법에는 여러 가지가 있지만 Webpack이나 CRA(Create React App)를 사용하는 대신 Vite를 사용하여 React 애플리케이션을 설정하는 것이 훨씬 더 빠르기 때문에 즐겨 사용하고 있습니다.

CICD 파이프라인을 생성하는 한 정적 사이트만 생성하는 경우 GitHub Actions 및 GitHub 페이지를 사용하는 것이 좋습니다. 공개 리포지토리의 표준 GitHub 호스팅 러너와 자체 호스팅 러너는 무료입니다. (자세한 내용은 여기 )

저스틴: 좋은 말씀이군요. 시작하는 방법을 안내해 주시겠어요?

치히로: 당연하지! VS Code(또는 선택한 코드 편집기) 및 터미널을 준비하세요!

구현 단계

1) 웹 앱을 로컬로 설정

1. repo 디렉토리가 있을 디렉토리로 이동하십시오.
2. ( 자세한 내용은 Vite 문서npm create vite@latest 참조 ) 를 사용하여 vite-to-gh-pages(또는 프로젝트 이름)를 만듭니다.
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. GitHub 리포지토리를 만들고 로컬 리포지토리와 연결합니다.

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다음을 실행하여 저장소에 폴더를 추가합니다.git add dist -f

7. 달리기git commit -m "Adding dist"

8. 달리기git subtree push --prefix dist origin gh-pages

9. GH Pages 라이브 페이지로 이동하여 사이트가 라이브인지 확인합니다. (저장소 설정으로 이동하여 왼쪽 패널에서 "페이지"를 찾으십시오.)

3) 메인 브랜치에 대한 커밋 시 사이트를 다시 빌드하도록 GitHub Actions 설정

1. GitHub 작업이 빌드를 업데이트하도록 허용하려면 리포지토리 설정 > 작업 > 일반 > 워크플로 권한으로 이동하여 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 웹 앱을 열어 변경 사항이 적용되었는지 확인합니다. 상단 탐색에서 "작업" 탭을 클릭하여 진행 상황을 모니터링할 수 있습니다.

*새로 배포된 앱을 칭찬하고 축하하세요!

치히로: 어떻게 됐어?

Justin: CICD 파이프라인을 사용하여 사이트를 배포하고 계속 업데이트하는 것은 매우 쉬웠습니다! 이제 실제 문제를 해결하는 데 더 많은 시간을 할애할 수 있습니다. 감사합니다!

4) 자원

• 여기에서 배포된 페이지를 참조하십시오.
• GitHub의 vite-to-gh-pages 저장소

• 저스틴 스나이더 // GitHub: @sniderjustin 링크드인: @sniderj
• 치히로 스나이더// GitHub: @cheesehero112 링크드인: @chihiro-snider

이메일: [email protected]