Next.js アプリを GitHub ページに公開する必要があります

最近、2048 Game のオープン ソース バージョンを改良し、Next.js と React 18 に移行することにしました。既存のゲームはカスタム ドメインなしで GitHub Pages に公開されました。 Vercel への導入を検討していましたが、過去 3 年間に蓄積された Google からのオーガニック トラフィックが失われます。つまり、GitHub Pages へのデプロイを実験する必要があり、今日はその学んだことを共有します。

記事全体を読む前に最終結果を確認したい場合は、ここで確認してください。

簡単な紹介

ここでは、GitHub Actions と GitHub Pages という 2 つの GitHub 機能を使用します。聞いたことがない場合は、簡単に説明しましょう。

GitHub アクションは、プロジェクトでタスクを実行できる小さなワークフローのようなものです。これは、指示されたことを自動的に実行するヘルパーを持つようなものです。アクションを使用して、テストを実行したり、品質チェックを行ったり、アプリケーションを構築したりできます。私の場合、このワークフローを使用してデプロイ パイプラインを自動化しました。

GitHub ページとは何ですか?開発者やオープンソース プロジェクト向けの Web ホスティング オプションのようなものだと考えてください。 GitHub Pages を使用して、ポートフォリオを共有したり、オープンソース プロジェクトの Web サイトをホストしたり、私のようなお気に入りのプロジェクトを公開したりすることができます。

さあ始めましょう。

ステップ 1 – リポジトリの GitHub ページをアクティブ化する

Next.js アプリケーションを公開するには、プロジェクトのリポジトリに対して GitHub Pages をアクティブ化する必要がありました。 [設定] タブ (下の画像の 1) で、左側のメニューから[ページ]を選択し (2)、展開ソースを指定できるドロップダウン メニューを見つけます (3)。

ここで、デプロイメントソースをGitHub Actionsに変更する必要があります。

今後、あなたのプロジェクトには専用のページが作成されます。そこでコンテンツを公開するだけで済みます。

ステップ 2 – Next.js ビルド プロセスを構成する

Next.js アプリをデプロイする前に、ビルド出力を変更することが重要です。デフォルトでは、Next.js は Node.js を使用してアプリケーションを実行しますが、これは GitHub Pages と互換性がありません。

GitHub Pages は静的ファイルをホストするように設計されています。つまり、そこで公開できるのは HTML、CSS、JavaScript (およびその他の静的ファイル) のみです。したがって、Next.js で静的ページ生成を有効にする必要があります。

これを行うには、 next.config.js内でexportように出力モードを変更します。

 /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig;

next buildを実行すると、Next.js はアプリの静的アセットを含むoutフォルダーを生成します。次のステップでは、このディレクトリを取得して GitHub Pages にアップロードします。

ステップ 3 – 欠落している画像を修正する

ページはドメインのサブパスの下で公開され、プロジェクト名をサブパスとして受け取ります。紛らわしいですか？例として、私の 2048 ゲームの URL を覗いてみましょう:

 https://mateuszsokola.github.io/2048-in-react/

Github は、私のユーザーのためにmateuszsokola (私のユーザー名)という専用のサブドメインを作成しました。ただし、プロジェクトはサブパス (私の場合は/2048-in-reactで公開されます。残念ながら、これにより、画像やスタイルが欠落するという問題が発生します。

デフォルトでは、Next.js はすべての静的アセットをドメインにマップします。これは、 favicon.icoファイルがmateuszsokola.github.io/favicon.icoではなくmateuszsokola.github.io/2048-in-react/favicon.iconに解決されることを意味します。

これを修正するには、 next.config.jsファイル内にbasePathを追加してパス プレフィックスを設定します。

 /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig;

私の場合、プロジェクトの名前は 2048 /2048-in-react 2048-in-react react です。
プロジェクト ディレクトリの先頭に( / ) を忘れずに含めてください。

ステップ 4 – Github アクションの作成

Next.js は、GitHub Pages に公開できるデプロイメント アーティファクトを生成します。今度は、それらを公開するために Github Actions を設定します。再利用性を促進するために、デプロイメントを 2 つの別々のアクションに分割することにしました。

setup-nodeアクションは Node.js をセットアップし、すべての依存関係をインストールします。 Node.js セットアップ用のスタンドアロン アクションがあると、それを他のパイプラインで再利用できるようになります。たとえば、実行されるパイプラインがあります。コードリンターそしてテスト。おそらく、複数のアクションも必要になるでしょう。

publishアクションは、コードをmainブランチにマージするたびに Next.js アーティファクトをビルドし、GitHub Pages に公開します。

まず、 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

重要: このファイルはプロジェクトの.github/workflows/setup-nodeディレクトリに作成します。必ずaction.ymlという名前を付けてください。

このスニペットは何をするのでしょうか?

1. compositeアクションを作成します。 compositeアクションを使用すると、複数のワークフロー ステップを 1 つのアクションにバンドルできます。明確でない場合は、2 番目のアクションに入ると理解できるようになります。

2. Node.js 20 を使用して新しいビルド環境を作成し、プロジェクトの依存関係をインストールします。

これらは、 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

このファイルをプロジェクトの.github/workflowsディレクトリに作成します。ファイルには好きな名前を付けることができます。私は、 publish.yml名前を付けました。

それは何をするのでしょうか？

1. このアクションは、新しいコードがmainブランチにプッシュまたはマージされるたびにトリガーされます。

2. setup-nodeアクションを使用して環境をセットアップします。前のアクションで作成したcompositeアクション。これで、 compositeアクションを他のアクションに含める方法がわかりました。

3. このアクションには 2 つの段階があります。最初の段階では、Next.js アプリが構築されます。第 2 段階では、第 1 段階のアーティファクトが GitHub ページにアップロードされます。

これらは、展開パイプラインの最も重要な側面です。権限と同時実行の設定はすべての GitHub Pages デプロイメントで変更されないため、スキップしました。

これで、アクションを使用する準備が整いました。

コミットしてプッシュする

変更をコミットしてmainブランチにプッシュすると、GitHub は自動的に GitHub Pages へのデプロイメントをスピンアップします。

プロセスを検査するには、 [アクション]タブ (下の画像の 1) に移動し、左側のメニューから[publish-to-github-pages]アクションを選択します (2) 。すべてのデプロイメントが画面上に表示されます (これらはワークフローと呼ばれます)。

ここで、これらのワークフローの最初の 1 つを選択すると、2 段階の展開が表示されます。デプロイ段階では、GitHub Pages で Web サイトへのリンクを見つけることができます。

結論

Github Pages は、何百万ものビューがある Web サイトをホスティングするには十分ではありません。ただし、ポートフォリオやオープンソース プロジェクトの Web サイトをホストするには最適な選択です。

Vercel など、Web サイトをホストするための無料のオプションはたくさんありますが、代わりの方法を紹介したいと思います。 GitHub Pages は開発者向けに構築されており、すべての開発者がこれに精通している必要があると思います。

この記事が役に立った場合は、ソーシャル メディアで共有してください。

そして、アプリケーションをどこにデプロイするのでしょうか?いつもヴェルセルですか？

React 18 と Next.js を学ぶ

React や Next.js に強い気がしませんか? Udemyのオンラインコースに参加してください！完全に機能する 2048 ゲームを作成することで、React を使い始めるのをお手伝いします。ゲームを作成すると学習がさらに楽しくなり、友達に見せられる素晴らしいものができると思います。

👇👇👇👇

🧑‍🎓 参加するUdemyのReact 18とNext.jsコース– 今週限定で80％オフ。