Merhaba hoşgeldin! Biz, birlikte uygulama yapmaktan ve öğrenmekten keyif alan bir yazılım mühendisi çifti olan Chihiro ve Justin'iz. Chihiro bir ön uç uzmanı ve Justin bir AI uzmanıdır.

Bu makalede Chihiro, ayrıntılı bir adım adım kılavuzla Justin'in bir CICD ardışık düzeniyle React uygulamalarının nasıl oluşturulacağına ilişkin sorularını yanıtlayacaktır.

Justin: Epeyce React/TypeScript uygulaması kurmam gerekiyor. Bir CICD boru hattı kullanmak istiyorum. Ne tavsiye edersiniz?

Chihiro: Bunu başarmanın birçok yolu var, ancak projemi kurmak çok daha hızlı olduğu için Webpack veya CRA (Create React App) kullanmak yerine React uygulamamı kurmak için Vite kullanmaktan keyif alıyorum.

Bir CICD işlem hattı oluşturmaya gelince, yalnızca statik siteler oluşturuyorsanız GitHub Eylemleri ve GitHub sayfalarını kullanmanızı öneririm. Genel depolardaki standart GitHub tarafından barındırılan koşucular ve kendi kendine barındırılan koşucular için ücretsizdir. ( burada bununla ilgili daha fazla bilgi var )

Justin: Kulağa harika geliyor, nasıl başlayacağım konusunda bana yol gösterebilir misin?

Chihiro: Elbette! VS Kodunuzu (veya seçtiğiniz kod editörünü) ve terminali hazırlayın!

Uygulama Adımları

1) Web Uygulamasını Yerel Olarak Kurun

1. Repo dizininin olmasını istediğiniz dizine gidin.
2. ( Daha fazla bilgi için Vite belgelerininpm create vite@latest okuyun ) kullanarak sayfalar arası sayfalar oluşturun (veya proje adınızı)
3. Vite-to-gh-pages adını kullanın, React'i seçin ve TypeScript'i seçin.
4. Klasöre taşıcd vite-to-gh-pages
5. kullanarak yükleyin npm iveyanpm install
6. Uygulamayı test etmek ve görmek için uygulamayı çalıştırın npm run devve tarayıcınızda görüntüleyin

1. Koşmaknpm install gh-pages --save-dev
2. kullanarak yükleyinnpm i
3. Bir GitHub deposu oluşturun ve yerel depomuzla bağlantı kurun:

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Çalıştırarak deponuza klasör ekleyingit add dist -f

7. Çalıştırgit commit -m "Adding dist"

8. Çalıştırgit subtree push --prefix dist origin gh-pages

9. Sitenizin yayında olduğunu doğrulamak için GH Sayfaları canlı sayfanıza gidin. (Reponuzun ayarlarına gidin ve sol taraftaki panelde "Sayfalar"ı bulun)

3) Sitenizi ana şubeye bağlıyken yeniden oluşturmak için GitHub Eylemlerini kurun

1. GitHub eyleminin derlememizi güncellemesine izin vermek için deponuza gidin Ayarlar > Eylemler > Genel > İş akışı izinleri öğesini seçin Read and write permissionsve "Kaydet"i tıklayın. Yaptığımız değişiklik, eylemin ana şubeye her basışta gh-pages dalındaki yapıyı güncellemesine izin verecektir.

# 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. Çalıştırgit add .

5. Çalıştırgit commit -m "add GH Action"

6. Çalıştırgit push

7. Değişikliğinizin yapıldığını doğrulamak için GitHub Pages web uygulamanızı açın. Üst gezinme bölümündeki "Eylemler" sekmesine tıklayarak ilerlemeyi izleyebilirsiniz.

*Yeni dağıtılan uygulamanıza hayran kalın ve kutlayın!

Chihiro: Bu senin için nasıl oldu?

Justin: Bir CICD ardışık düzeni kullanarak siteyi dağıtmak ve güncellemeye devam etmek çok kolaydı! Artık gerçek sorunları çözmek için daha fazla zaman harcayabilirim. Teşekkür ederim!

4) Kaynaklar

• Dağıtılan sayfaya buradan bakın
• GitHub'da vite-to-gh-pages deposu

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

e-posta: [email protected]