Gần đây, tôi đã cải tiến phiên bản mã nguồn mở của Trò chơi 2048 và quyết định chuyển nó sang Next.js và React 18. Trò chơi hiện tại đã được xuất bản lên Trang GitHub mà không có bất kỳ miền tùy chỉnh nào. Tôi đang cân nhắc triển khai lên Vercel nhưng nó sẽ làm mất lưu lượng truy cập không phải trả tiền từ Google vốn đã tích lũy trong 3 năm qua. Điều đó có nghĩa là tôi cần thử nghiệm việc triển khai lên Trang GitHub và hôm nay tôi sẽ chia sẻ những gì tôi đã học được. Nếu bạn muốn xem kết quả cuối cùng trước khi đọc toàn bộ bài viết, bạn có thể . kiểm tra nó ở đây Giới thiệu nhanh Tôi sẽ sử dụng hai tính năng GitHub – GitHub Actions và GitHub Pages. Nếu bạn chưa nghe nói về họ, hãy để tôi giải thích nhanh: giống như những quy trình làm việc nhỏ có thể thực hiện các tác vụ trong dự án của bạn. Giống như có một người trợ giúp tự động thực hiện những việc bạn bảo nó làm. Bạn có thể sử dụng Hành động để chạy thử nghiệm, kiểm tra chất lượng hoặc xây dựng ứng dụng của mình. Trong trường hợp của tôi, tôi đã sử dụng quy trình công việc này để tự động hóa quy trình triển khai. GitHub Actions là gì? Hãy coi chúng giống như một tùy chọn lưu trữ web dành cho các nhà phát triển và dự án nguồn mở. Bạn có thể sử dụng Trang GitHub để chia sẻ danh mục đầu tư của mình, lưu trữ trang web của các dự án nguồn mở hoặc chỉ xuất bản các dự án thú vị của bạn như của tôi. Trang GitHub Bây giờ, hãy bắt đâù. Bước 1 – Kích hoạt trang GitHub cho kho lưu trữ của bạn Để xuất bản ứng dụng Next.js của chúng tôi, tôi cần kích hoạt Trang GitHub cho kho lưu trữ của dự án. Bạn có thể tìm thấy trong tab Cài đặt (1 trong hình ảnh bên dưới), sau đó chọn từ menu bên trái (2) và tìm menu thả xuống cho phép chúng tôi chỉ định triển khai (3). Trang Nguồn Bây giờ bạn sẽ cần thay đổi triển khai thành . Nguồn GitHub Actions Từ giờ trở đi, dự án của bạn có một trang dành riêng. Bạn chỉ cần xuất bản nội dung ở đó. Bước 2 - Định cấu hình quy trình xây dựng Next.js Trước khi triển khai ứng dụng Next.js, điều quan trọng là phải thay đổi kết quả đầu ra của bản dựng. Theo mặc định, Next.js sử dụng Node.js để chạy ứng dụng và điều này không tương thích với Trang GitHub. Trang GitHub được thiết kế để lưu trữ các tệp tĩnh, có nghĩa là chúng tôi chỉ có thể xuất bản HTML, CSS, JavaScript (và các tệp tĩnh khác) ở đó. Vì vậy, chúng ta cần kích hoạt tính năng tạo trang tĩnh trong Next.js. Để làm như vậy, bạn sẽ thay đổi chế độ đầu ra thành bên trong : export next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig; Bây giờ sau khi chạy , Next.js sẽ tạo một thư mục chứa nội dung tĩnh cho ứng dụng của bạn. Trong các bước tiếp theo, chúng tôi sẽ lấy thư mục này và tải nó lên Trang GitHub. next build out Bước 3 – Sửa hình ảnh bị thiếu Các Trang được xuất bản dưới đường dẫn phụ của miền và lấy tên dự án làm đường dẫn phụ. Gây nhầm lẫn? Hãy lấy một URL của trò chơi năm 2048 của tôi làm ví dụ: https://mateuszsokola.github.io/2048-in-react/ Github đã tạo một tên miền phụ dành riêng cho người dùng của tôi có tên là . Nhưng dự án được xuất bản theo đường dẫn phụ, trong trường hợp của tôi là . Thật không may, điều này sẽ dẫn đến vấn đề thiếu hình ảnh và kiểu dáng. mateuszsokola (tên người dùng của tôi) /2048-in-react Theo mặc định, Next.js ánh xạ tất cả nội dung tĩnh vào miền. Điều này có nghĩa là tệp sẽ được phân giải thành thay vì . favicon.ico mateuszsokola.github.io/favicon.ico mateuszsokola.github.io/2048-in-react/favicon.icon Để khắc phục điều này, chúng ta có thể thiết lập tiền tố đường dẫn bằng cách thêm bên trong tệp : basePath next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig; Trong trường hợp của tôi, đó là vì dự án của tôi được gọi là . /2048-in-react 2048-in-react Hãy nhớ bao gồm ( / ) ở đầu thư mục dự án. Bước 4 – Tạo hành động Github Next.js đang sản xuất các tạo phẩm triển khai có thể được xuất bản lên Trang GitHub. Bây giờ là lúc thiết lập Github Actions để xuất bản chúng. Tôi quyết định triển khai thành hai hành động riêng biệt để thúc đẩy khả năng sử dụng lại: Hành động sẽ thiết lập Node.js và cài đặt tất cả các phần phụ thuộc. Việc có một hành động độc lập để thiết lập Node.js sẽ cho phép tôi sử dụng lại hành động đó cho các quy trình khác. Ví dụ: tôi có đường ống chạy Và . Có lẽ bạn cũng muốn có nhiều hơn một hành động. setup-node kẻ nói dối mã kiểm tra Hành động sẽ xây dựng các tạo phẩm Next.js và xuất bản chúng lên Trang GitHub mỗi khi chúng tôi hợp nhất mã vào nhánh . publish main Hãy để tôi bắt đầu bằng cách giải thích hành động . Đây là mã: 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 : Tạo tệp này trong thư mục trong dự án của bạn. Đảm bảo gọi nó là . Quan trọng .github/workflows/setup-node action.yml Đoạn mã này làm gì? Nó tạo ra một hành động . Hành động cho phép bạn gộp nhiều bước quy trình công việc thành một hành động duy nhất. Nếu chưa rõ thì bạn sẽ hiểu khi chúng ta bắt đầu hành động thứ hai. composite composite Nó tạo ra một môi trường xây dựng mới bằng Node.js 20 và cài đặt các phần phụ thuộc của dự án. Đây là những phần quan trọng nhất của hành động . Bây giờ, hãy chuyển sang hành động : 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 Tạo tệp này trong thư mục trong dự án của bạn. Bạn có thể đặt tên tệp theo ý muốn – Tôi gọi tệp của tôi là . .github/workflows publish.yml Những gì nó làm? Hành động này được kích hoạt mỗi khi mã mới được đẩy hoặc sáp nhập vào nhánh . main Nó sử dụng hành động để thiết lập môi trường. Hành động mà tôi đã tạo trong hành động trước đó. Bây giờ bạn đã biết cách đưa các hành động của mình vào các hành động khác. setup-node composite composite Hành động này có hai giai đoạn: trong giai đoạn đầu tiên, ứng dụng Next.js đang được xây dựng. Trong giai đoạn thứ hai, các tạo phẩm từ giai đoạn đầu tiên được tải lên Trang GitHub. Đây là những khía cạnh quan trọng nhất của quy trình triển khai. Tôi đã bỏ qua các quyền và thiết lập đồng thời vì chúng không thay đổi đối với tất cả các hoạt động triển khai Trang GitHub. Bây giờ, hành động đã sẵn sàng để sử dụng. Cam kết và đẩy Sau khi cam kết và đẩy các thay đổi của bạn lên nhánh , GitHub sẽ tự động triển khai lên Trang GitHub. main Để kiểm tra quy trình, hãy điều hướng đến tab (1 trong hình bên dưới) và chọn hành động từ menu ở phía bên trái (2) Bạn sẽ thấy tất cả các hoạt động triển khai của mình trên màn hình (chúng được gọi là ). Hành động xuất bản lên github-page . quy trình công việc Bây giờ hãy chọn quy trình đầu tiên trong số đó và bạn sẽ thấy quá trình triển khai gồm hai giai đoạn. Trong giai đoạn , bạn có thể tìm thấy liên kết đến trang web của mình trên Trang GitHub. triển khai Phần kết luận Trang Github không đủ để lưu trữ các trang web có hàng triệu lượt xem. Nhưng đó là một lựa chọn hoàn hảo để lưu trữ danh mục đầu tư hoặc trang web cho dự án nguồn mở của bạn. Có nhiều tùy chọn miễn phí để lưu trữ các trang web của chúng tôi như Vercel, nhưng tôi muốn giới thiệu cho bạn một giải pháp thay thế. Trang GitHub được xây dựng dành cho các nhà phát triển và tôi nghĩ mọi nhà phát triển đều quen thuộc với nó. Nếu bài viết này giúp ích cho bạn, hãy chia sẻ nó trên mạng xã hội của bạn. Và bạn triển khai ứng dụng của mình ở đâu? Có phải luôn là Vercel không? Tìm hiểu React 18 & Next.js Bạn không cảm thấy mạnh mẽ với React hoặc Next.js? Hãy tham gia khóa học trực tuyến của tôi trên Udemy! Tôi sẽ giúp bạn bắt đầu với React bằng cách tạo Trò chơi 2048 đầy đủ chức năng. Tôi tin rằng việc tạo ra trò chơi sẽ khiến việc học trở nên thú vị hơn và bạn sẽ có thứ gì đó thú vị để khoe với bạn bè. 👇👇👇👇 🧑🎓 Tham gia Khóa học React 18 và Next.js trên Udemy – GIẢM GIÁ 80% chỉ trong tuần này.
