Yakın zamanda 2048 Game'in açık kaynaklı sürümünü yeniledim ve onu Next.js ve React 18'e taşımaya karar verdim. Mevcut oyun herhangi bir özel alan adı olmadan GitHub Pages'da yayınlandı. Vercel'e dağıtım yapmayı düşünüyordum ancak son 3 yılda Google'dan gelen organik trafiği kaybedecekti. Bu, GitHub Pages'a dağıtımı denemem gerektiği anlamına geliyor ve bugün öğrendiklerimi paylaşacağım. Yazının tamamını okumadan önce sonucunu görmek istiyorsanız, . burayı kontrol et Hızlı Giriş İki GitHub özelliğini kullanacağım – GitHub Eylemleri ve GitHub Sayfaları. Eğer duymadıysanız hemen açıklayayım: projelerinizde görevleri yerine getirebilecek küçük iş akışları gibidir. Bu, yapmasını söylediğiniz şeyleri otomatik olarak yapan bir yardımcının olması gibidir. Testleri çalıştırmak, kalite kontrolleri yapmak veya uygulamanızı oluşturmak için Eylemler'i kullanabilirsiniz. Benim durumumda, dağıtım hattını otomatikleştirmek için bu iş akışlarını kullandım. GitHub Eylemleri, nedir? Bunları geliştiriciler ve açık kaynaklı projeler için bir web barındırma seçeneği olarak düşünün. Portföylerinizi paylaşmak, açık kaynaklı projelerinizin web sitelerini barındırmak veya benimki gibi evcil hayvan projelerinizi yayınlamak için GitHub Sayfalarını kullanabilirsiniz. GitHub Sayfaları Şimdi başlayalım. Adım 1 – Deponuz için GitHub Sayfalarını Etkinleştirin Next.js uygulamamızı yayınlamak için projenin deposu için GitHub Sayfalarını etkinleştirmem gerekiyordu. Ayarlar sekmesinde (aşağıdaki resimde 1) bulabilir, ardından sol taraftaki menüden (2) seçebilir ve dağıtım (3) belirtmemize olanak tanıyan açılır menüyü bulabilirsiniz. Sayfalar'ı Kaynağını Artık dağıtım olarak değiştirmeniz gerekecek. Kaynağını GitHub Actions Artık projenizin özel bir sayfası var. Orada yalnızca içerik yayınlamanız yeterlidir. Adım 2 – Next.js Derleme İşlemini Yapılandırın Next.js uygulamasını dağıtmadan önce derleme çıktısını değiştirmek önemlidir. Next.js, uygulamayı çalıştırmak için varsayılan olarak Node.js'yi kullanır ve bu, GitHub Pages ile uyumlu değildir. GitHub Sayfaları statik dosyaları barındıracak şekilde tasarlanmıştır; bu, orada yalnızca HTML, CSS, JavaScript (ve diğer statik dosyaları) yayınlayabileceğimiz anlamına gelir. Bu nedenle Next.js'de statik sayfa oluşturmayı etkinleştirmemiz gerekecek. Bunu yapmak için çıktı modunu içinde şekilde değiştireceksiniz: next.config.js export /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig; Artık çalıştırdıktan sonra Next.js, uygulamanız için statik varlıkları içeren bir klasörü oluşturacaktır. Sonraki adımlarda bu dizini alıp GitHub Pages’a yükleyeceğiz. next build out Adım 3 – Eksik Görselleri Onarın Sayfalar bir alan adının alt yolu altında yayınlanır ve proje adını alt yol olarak alır. Kafa karıştırıcı? Örnek olarak 2048 oyunumun URL'sine kısa bir göz atalım: https://mateuszsokola.github.io/2048-in-react/ Github, kullanıcım için adında özel bir alt alan adı oluşturdu. Ancak proje benim durumumda olan alt yol altında yayınlandı. Ne yazık ki bu, eksik görseller ve stillerle ilgili sorunlara yol açacaktır. mateuszsokola (kullanıcı adım) /2048-in-react Varsayılan olarak Next.js, etki alanındaki tüm statik varlıkları eşler. Bu, dosyasının yerine olarak çözümleneceği anlamına gelir. favicon.ico mateuszsokola.github.io/favicon.ico mateuszsokola.github.io/2048-in-react/favicon.icon Bunu düzeltmek için dosyasının içine ekleyerek bir yol öneki ayarlayabiliriz: next.config.js basePath /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig; Benim durumumda, projemin adı olduğu için . ( ) . 2048-in-react /2048-in-react Proje dizininin başına / işaretini eklemeyi unutmayın Adım 4 – Github Eylemleri Oluşturun Next.js, GitHub Sayfalarında yayınlanabilecek dağıtım yapıtları üretiyor. Artık bunları yayınlamak için Github Eylemlerini ayarlamanın zamanı geldi. Yeniden kullanılabilirliği teşvik etmek için dağıtımı iki ayrı eyleme ayırmaya karar verdim: eylemi, Node.js'yi kuracak ve tüm bağımlılıkları yükleyecektir. Node.js kurulumu için bağımsız bir eyleme sahip olmak, onu diğer işlem hatları için yeniden kullanmama olanak tanıyacak. Örneğin, çalışan boru hatlarım var Ve . Muhtemelen siz de birden fazla eyleme sahip olmak istiyorsunuz. setup-node kod linter testler eylemi, Next.js yapıtlarını oluşturacak ve kodu dalda her birleştirdiğimizde bunları GitHub Sayfalarında yayınlayacaktır. publish main eylemini açıklayarak başlayayım. İşte kod: setup-node # File: .github/workflows/setup-node/action.yml name: setup-node description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧" runs: using: "composite" steps: - name: Setup Node.js ⚙️ uses: actions/setup-node@v4 with: node-version: 20 - name: Cache dependencies ⚡ id: cache_dependencies uses: actions/cache@v3 with: path: node_modules key: node-modules-${{ hashFiles('package-lock.json') }} - name: Install dependencies 🔧 shell: bash if: steps.cache_dependencies.outputs.cache-hit != 'true' run: npm ci : Bu dosyayı projenizdeki dizininde oluşturun. Bunu adlandırdığınızdan emin olun. Önemli .github/workflows/setup-node action.yml Bu parçacık ne işe yarıyor? bir eylem yaratır. eylem, birden fazla iş akışı adımını tek bir eylemde birleştirmenize olanak tanır. Eğer net değilse ikinci aksiyona geçtiğimizde anlayacaksınız. composite composite Node.js 20'yi kullanarak yeni bir yapı ortamı oluşturur ve proje bağımlılıklarını yükler. Bunlar eyleminin en önemli parçalarıdır. Şimdi işlemine geçelim: setup-node publish # File: .github/workflows/publish.yml name: publish-to-github-pages on: push: branches: - main permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: actions/checkout@v4 - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧 uses: ./.github/workflows/setup-node - name: Setup Pages ⚙️ uses: actions/configure-pages@v4 with: static_site_generator: next - name: Build with Next.js 🏗️ run: npx next build - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Publish to GitHub Pages 🚀 id: deployment uses: actions/deploy-pages@v4 Bu dosyayı projenizdeki dizininde oluşturun. Dosyayı istediğiniz gibi adlandırabilirsiniz; ben benimkini olarak adlandırdım. .github/workflows publish.yml Bu ne yapar? Bu eylem, yeni kodun dala aktarıldığı veya birleştirildiği her seferde tetiklenir. main Ortamı ayarlamak için eylemini kullanır. Önceki eylemde oluşturduğum eylem. Artık eylemlerinizi diğer eylemlere nasıl dahil edeceğinizi biliyorsunuz. setup-node composite composite Eylemin iki aşaması var: İlk aşamada Next.js uygulaması oluşturuluyor. İkinci aşamada ise ilk aşamadaki eserler GitHub Sayfalarına yüklenir. Bunlar dağıtım hattının en önemli yönleridir. Tüm GitHub Sayfaları dağıtımları için değişmeden kaldıkları için izinleri ve eşzamanlılık kurulumunu atladım. Artık aksiyon kullanıma hazır. Taahhüt Et ve İt Değişikliklerinizi şubeye aktardıktan ve gönderdikten sonra GitHub, dağıtımı GitHub Sayfalarına otomatik olarak hızlandıracaktır. main Süreci incelemek için sekmesine gidin (aşağıdaki resimde 1) ve sol taraftaki menüden (2) eylemini seçin Ekranda tüm dağıtımlarınızı göreceksiniz (bunlara denir). Eylemler github sayfalarında yayınla . iş akışları Şimdi bu iş akışlarından ilkini seçtiğinizde iki aşamalı bir dağıtım göreceksiniz. aşamasında GitHub Sayfalarında web sitenize giden bir bağlantı bulabilirsiniz. Dağıtım Çözüm Milyonlarca görüntülemeye sahip web sitelerini barındırmak için Github Sayfaları yeterli değildir. Ancak açık kaynak projeniz için portföyünüzü veya web sitenizi barındırmak mükemmel bir seçimdir. Web sitelerimizi barındırmak için Vercel gibi birçok ücretsiz seçenek mevcut ancak ben size bir alternatif göstermek istedim. GitHub Pages, geliştiriciler için tasarlandı ve her geliştiricinin buna aşina olması gerektiğini düşünüyorum. Bu makale size yardımcı olduysa lütfen sosyal medyanızda paylaşın. Peki uygulamanızı nerede dağıtacaksınız? Her zaman Vercel mi? React 18 ve Next.js'yi öğrenin React veya Next.js ile kendinizi güçlü hissetmiyor musunuz? Udemy'deki çevrimiçi kursuma katılın! Tamamen işlevsel bir 2048 Oyunu oluşturarak React'ı kullanmaya başlamanıza yardımcı olacağım. Oyun oluşturmanın öğrenmeyi daha eğlenceli hale getirdiğine ve arkadaşlarınıza gösterecek harika bir şeyiniz olacağına inanıyorum. 👇👇👇👇 🧑🎓 Katıl Udemy'de React 18 ve Next.js kursu – Sadece bu haftaya özel %80 İNDİRİM.
