最近、2048 Game のオープン ソース バージョンを改良し、Next.js と React 18 に移行することにしました。既存のゲームはカスタム ドメインなしで GitHub Pages に公開されました。 Vercel への導入を検討していましたが、過去 3 年間に蓄積された Google からのオーガニック トラフィックが失われます。つまり、GitHub Pages へのデプロイを実験する必要があり、今日はその学んだことを共有します。 記事全体を読む前に最終結果を確認したい場合は、 。 ここで確認してください 簡単な紹介 ここでは、GitHub Actions と GitHub Pages という 2 つの GitHub 機能を使用します。聞いたことがない場合は、簡単に説明しましょう。 プロジェクトでタスクを実行できる小さなワークフローのようなものです。これは、指示されたことを自動的に実行するヘルパーを持つようなものです。アクションを使用して、テストを実行したり、品質チェックを行ったり、アプリケーションを構築したりできます。私の場合、このワークフローを使用してデプロイ パイプラインを自動化しました。 GitHub アクションは、 は何ですか?開発者やオープンソース プロジェクト向けの Web ホスティング オプションのようなものだと考えてください。 GitHub Pages を使用して、ポートフォリオを共有したり、オープンソース プロジェクトの Web サイトをホストしたり、私のようなお気に入りのプロジェクトを公開したりすることができます。 GitHub ページと さあ始めましょう。 ステップ 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.js はアプリの静的アセットを含む フォルダーを生成します。次のステップでは、このディレクトリを取得して GitHub Pages にアップロードします。 next build out ステップ 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 react です。 ) を忘れずに含めてください。 /2048-in-react 2048-in-react プロジェクト ディレクトリの先頭に ( / ステップ 4 – Github アクションの作成 Next.js は、GitHub Pages に公開できるデプロイメント アーティファクトを生成します。今度は、それらを公開するために Github Actions を設定します。再利用性を促進するために、デプロイメントを 2 つの別々のアクションに分割することにしました。 アクションは Node.js をセットアップし、すべての依存関係をインストールします。 Node.js セットアップ用のスタンドアロン アクションがあると、それを他のパイプラインで再利用できるようになります。たとえば、実行されるパイプラインがあります。 そして 。おそらく、複数のアクションも必要になるでしょう。 setup-node コードリンター テスト アクションは、コードを ブランチにマージするたびに Next.js アーティファクトをビルドし、GitHub Pages に公開します。 publish main まず、 アクションについて説明します。コードは次のとおりです。 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 つのアクションにバンドルできます。明確でない場合は、2 番目のアクションに入ると理解できるようになります。 composite composite 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 それは何をするのでしょうか？ このアクションは、新しいコードが ブランチにプッシュまたはマージされるたびにトリガーされます。 main アクションを使用して環境をセットアップします。前のアクションで作成した アクション。これで、 アクションを他のアクションに含める方法がわかりました。 setup-node composite composite このアクションには 2 つの段階があります。最初の段階では、Next.js アプリが構築されます。第 2 段階では、第 1 段階のアーティファクトが GitHub ページにアップロードされます。 これらは、展開パイプラインの最も重要な側面です。権限と同時実行の設定はすべての GitHub Pages デプロイメントで変更されないため、スキップしました。 これで、アクションを使用する準備が整いました。 コミットしてプッシュする 変更をコミットして ブランチにプッシュすると、GitHub は自動的に GitHub Pages へのデプロイメントをスピンアップします。 main プロセスを検査するには、 タブ (下の画像の 1) に移動し、左側のメニューから アクションを選択します (2) すべてのデプロイメントが画面上に表示されます (これらは と呼ばれます)。 [アクション] [publish-to-github-pages] 。 ワークフロー ここで、これらのワークフローの最初の 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％オフ。
