Bạn nên xuất bản ứng dụng Next.js của mình lên trang GitHub

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:

GitHub Actions 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.

Trang GitHub 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.

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 Trang từ menu bên trái (2) và tìm menu thả xuống cho phép chúng tôi chỉ định Nguồn triển khai (3).

Bây giờ bạn sẽ cần thay đổi Nguồn triển khai thành 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 export bên trong 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 build , Next.js sẽ tạo một thư mục out 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.

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à mateuszsokola (tên người dùng của tôi) . Nhưng dự án được xuất bản theo đường dẫn phụ, trong trường hợp của tôi là /2048-in-react . 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.

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 favicon.ico sẽ được phân giải thành mateuszsokola.github.io/favicon.ico thay vì 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 basePath bên trong tệp 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à /2048-in-react vì dự án của tôi được gọi là 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 setup-node 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 kẻ nói dối mã Và kiểm tra . Có lẽ bạn cũng muốn có nhiều hơn một hành động.

Hành động publish 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 main .

Hãy để tôi bắt đầu bằng cách giải thích hành động setup-node . Đây là mã:

 # 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

Quan trọng : Tạo tệp này trong thư mục .github/workflows/setup-node trong dự án của bạn. Đảm bảo gọi nó là action.yml .

Đoạn mã này làm gì?

1. Nó tạo ra một hành động composite . Hành động composite 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.

2. 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 setup-node . Bây giờ, hãy chuyển sang hành động 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 .github/workflows 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à publish.yml .

Những gì nó làm?

1. 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 .

2. Nó sử dụng hành động setup-node để thiết lập môi trường. Hành động composite 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 composite của mình vào các hành động khác.

3. 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 main , GitHub sẽ tự động triển khai lên Trang GitHub.

Để kiểm tra quy trình, hãy điều hướng đến tab Hành động (1 trong hình bên dưới) và chọn hành động xuất bản lên github-page 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à 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 triển khai , bạn có thể tìm thấy liên kết đến trang web của mình trên Trang GitHub.

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.