【gh-pages】Reactアプリを爆速でGitHub Pagesにデプロイする

フロントエンド

こんにちは、KENTEM第二開発部のM・Sです。

今回はgh-pagesを使ってReactを爆速でGitHub Pagesにデプロイする方法を爆速でお伝えしたいと思います！

事前準備

  • Viteを使ってReactアプリを作り、心行くまで開発する。

gh-pagesのインストール

まずはgh-pagesをnpmからインストールしてきます。

npm install gh-pages --save-dev

設定ファイルを修正

下記の設定ファイルを変更します。

package.json

{
  "scripts": {
    "predeploy": "npm run build", // 追加
    "deploy": "gh-pages -d dist"  // 追加
  }
}

vite.config.ts

export default defineConfig({
  plugins: [react()],
  base: '/リポジトリ名/', //追加
});
  • リポジトリを作ってない場合はこのタイミングで作りましょう。
  • リポジトリのアクセス制限がprivateだとデプロイできないのでpublicで作りましょう。

次に下記のコマンドを入力します。

npm run deploy

成功するとPublishedと表示されます。

GitHub Pagesの設定

Settings > Code and Automations > Pages > Build and deployment に移動

  • Source > Deploy from a Branch に変更

  • Branch > gh-pages /(root) に変更

  • Saveをクリック

設定完了するとActionsでworkflowが開始されます。

数分経ったらworkflowが終わり、URL先にコンテンツが表示されます。

以上です。爆速でしたよね？

まとめ

今回はGitHubにReactアプリをデプロイする方法をまとめてみました。

いくつか類似記事がありますが、このやり方が最短だと思われます。

コストもかからないので今後も積極的に利用したいですね！

KENTEMでは、様々な拠点でエンジニアを大募集しています！
建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。
recruit.kentem.jp career.kentem.jp