34
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ReactをGitHub Pagesにデプロイしよう〜Vite編〜

Last updated at Posted at 2023-02-12

今回の目的

以前にもReactをGitHub Pagesにデプロイしようと試みた記事( コチラ )を書いたが、以前の記事を書いてから時代が移り変わり、新たなビルドツール「Vite」で作成したReactプロジェクトをGitHub Pagesにデプロイしようと取り組んだ記事です。

前提条件

  • MacOS
  • GitHubアカウント取得済
  • Node.jsのバージョン:v16.15.0
  • yarnのバージョン:1.22.10

Viteとは

Vite(ヴィート)についての説明については引用元からの説明を貼っておきます。

Vite(ヴィート)は、2020年に1.0.0-rc.1がリリースされた、比較的新しいフロントエンドのビルドツールです。
Vueの開発者であるEvan You氏により開発されたものですが、Vue以外にもReact等、様々な環境で利用可能な汎用的なツールです。
ヴィートとはフランス語で「速い」を意味する言葉であり、その名の通りViteの最大の特徴は実行スピードの速さです。
引用:Viteとは?

Viteの特徴としては高速な起動・更新にあります。
これまでのビルドツールではビルドの際にプロジェクトに関わるすべてのファイルをビルドており、ひとまとめにして管理をしていました。
これはプロジェクトのサイズが大きくなるにつれてファイル数が多くなると、都度の起動・更新にかかるビルド処理が時間がかかってしまうことに問題がありました。
Viteでは依存関係と最低限必要箇所の読み込みのみを行い、リクエストされたタイミングで必要な箇所を読み込むため、高速に動作します。
Viteでは色々なテンプレートが用意されており、現在のフロントエンドの欠かせないTypeScriptのテンプレートも用意されています。

Viteで利用可能なテンプレート一覧

JavaScript TypeScript
vanilla vanilla-ts
vue vue-ts
react react-ts
preact preact-ts
lit lit-ts
svelte svelte-ts

引用:Viteテンプレート

この記事ではそんなViteで作成したプロジェクトをGithub Pageにデプロイする方法に関する記事になります。

流れ

  1. GitHubでリモートリポジトリ作成
  2. ローカル環境でViteを用いてReactプロジェクト作成
  3. GitHub Pages用のSettingsをプロジェクトに追記
  4. リモートリポジトリとローカルリポジトリの繋ぎこみ
  5. リモートリポジトリにpush
  6. リモートリポジトリでPagesの設定

0.事前の確認

まず、前提条件として書いている3つの設定が完了しているか確認してください。
もしまだ設定ができていないものがあれば下記の記事などを参考に済ませておいてください

  1. GitHubのアカウント作成方法
  2. Node.jsの始め方
  3. yarn getting started※知らんうちに日本語のdocsが404になってた

今回はyarnを使っている理由はこの後別の記事になりますが、TailwindCSSの設定もする際に使用しているからです。
yarnはNodeパッケージなのでnpmを使用できればインストールできます。

1.リモートリポジトリ作成

今回はリモートリポジトリは下記の名前で進めていきます
<REPO_NAME>:reactailwind
ここではリモートリポジトリでREADME.mdも作成しておきましょう。

スクリーンショット 2023-02-12 18.43.16.png

2.ViteでReactプロジェクト作成

まずは下記のコマンドを入力しましょう

terminal
yarn create vite reactailwind --template

すると、どんなプロジェクトを作成しますか?と聞かれるので、今回は「React」と「JavaScript」を選択しましょう。
フレームワーク選択画面
スクリーンショット 2023-02-12 18.50.19.png
言語選択画面
スクリーンショット 2023-02-12 18.50.30.png

すると

terminal
Done. Now run:

  cd reactailwind
  yarn
  yarn dev

とターミナルに表示されていれば成功です。
では、ブラウザにプロジェクトが表示されるか確認のため、上記のコマンド3つを上から順番にターミナルに入力してみましょう。

3つめのyarn devまで入力して、下記画面が表示されればOKです。
スクリーンショット 2023-02-12 18.56.58.png

localhostのURLにアクセスして下記の画面がブラウザに表示されていれば問題ないです。
スクリーンショット 2023-02-12 18.59.23.png

3.1 vite.config.jsを編集

vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
    base: process.env.GITHUB_PAGES  // この行を追加
        ? "reactailwind"            // この行を追加
        : "./",                     // この行を追加
    plugins: [react()],
});

ここでの reactailwind は<REPO_NAME>と同じとなりますので注意

3.2 package.jsonを編集

次にpackage.jsonを編集します

package.json
{
       ~略~
    "scripts": {
        "dev": "vite",
        "preview": "vite preview",
        "build": "vite build && cp -r dist docs",                   
        "rebuild": "vite build && rm -R docs && cp -r dist docs",
        "git": "git add . && git commit && git push origin main"
    },
    "dependencies": {
       ~略~
    },
    "devDependencies": {
       ~略~
    }
}

KeyがscriptsのValueの部分のみを編集します。devやpreviewは元からありますが、buildのValueを変更、rebuildとgitは新たに追記します。

4.GitHub Pagesで閲覧できる様にbuildファイルを作成

ここでターミナルで新しくコマンドを入力します。
もし、yarn devをしてサーバーが立ち上がっている場合は一旦、Ctrl+Cで停止するか別のターミナルを立てましょう。
別のターミナルを立てた場合は、ローカルリポジトリに作成したreactailwindのディレクトリにcd reactailwindで移動することをお忘れなく!

では、GitHub Pagesで閲覧できる様に下記コマンドでbuildしていきます。

terminal
yarn build

ビルドすると下記の画面の様にdistとdocsというディレクトリが新規作成されているかと思います。
スクリーンショット 2023-02-12 19.13.51.png
このdocsディレクトリがGitHub Pagesでデプロイするときに目印になってファイルがうまく動作するという流れになっています。

5.リモートリポジトリとローカルリポジトリを繋ぐ

terminal
# githubの初期設定フォルダを作成
git init

# ローカルリポジトリに紐づけるリモートリポジトリを設定
git remote add origin https://github.com/<ACCOUNT_NAME>/<REMOTE_REPO_NAME>.git

# ローカルリポジトリにリモートリポジトリのREADME.mdを引っ張ってくる
git pull origin main

今回の私の場合は上記の内容は下の通りです。
<ACCOUNT_NAME>:TatsuyaMaeta
<REMOTE_REPO_NAME>:reactailwind

皆さんはご自身のアカウント名とリポジトリ名を入力してください。

この3つのコマンドを入力するとローカルリポジトリにREADME.mdが追加されていると思います。
そうすればリモートリポジトリとの接続は完了です。

6.ローカルリポジトリのファイル群をリモートリポジトリにpushする

今回はscriptsに1回の入力でgitに関する処理をまとめて実行できるコマンドを作っています。
それが

terminal
yarn git

のコマンドです。
これを入力すれば、commitの文章だけターミナルで入力すればリモートリポジトリまでpushできます。
yarn gitの流れはこんな感じです。
output212.gif

その場合はターミナルでの入力モードから抜けて完了するというshellでのviコマンドを使う必要があるので、「viコマンド???」という方は、コチラの記事を読んでみてください。
一応書いておくと、commit文を書き終えたら、[ESCキー]→[:wq]と入れればOKです!!
なんか不安!!!だという方は、

terminal(yarn gitの代わり)
git add . 
git commit 'first commit'
git push origin main

と打ってください。

7. GitHub Pagesのdeployを設定、確認

githubのリモートリポジトリに戻ってきたらSettingsをクリックして移動スクリーンショット 2023-02-12 19.54.57.png

Settingsのページに移動したら
①. 左カラムの「Pages」をクリック
②.「None→main」 / 「root→docs」に変更
③.「Save」をクリック

スクリーンショット 2023-02-12 19.58.18.png

すると、下記の画面の様に変わると思います。
スクリーンショット 2023-02-12 20.02.03.png
ビルドとデプロイの処理のステータスがActionsというタブから確認できるのでクリックして移動しましょう。
するとpages build and deploymentのランプが下記図の左側の様に黄色だと思います。その際はデプロイ処理中なので待ちましょう。
右側の様に緑色ランプに変わったらデプロイ処理完了です。
クリックして確認してみましょう。

スクリーンショット 2023-02-12 20.20.10.png

すると、デプロイがされたURLが下記図の様に記載あります。それをクリックして無事表示されれば完了です!

スクリーンショット 2023-02-12 20.03.03.png

スクリーンショット 2023-02-12 20.03.08.png

GitHub Pagesでのデプロイお疲れ様でした!!

おまけ1.Viteのロゴが表示されない!!

ここまできたのにロゴがうまく表示されないの、なんだか気持ち悪いですよね。
これを解決していきます。
まず原因を確認しましょう。
「<REPO_NAME> > src > App.jsx」を見てみてください。スクリーンショット 2023-02-12 20.28.34.png
うまく表示されているReactのロゴとViteのロゴの違いはなんでしょうか?
そうです、Reactロゴはsrc > assetsにファイルが入っていて、それをimportしています。
一方、Viteロゴは相対パスで指定しています。
GitHub Pagesにデプロイする際にbuild処理を行いますが、この相対パスはうまく認識されません。
そのため、GitHub Pagesでの画面ではうまくパスが取得できておらず、非表示でした。
なので、このViteロゴを下記の様に変更します。

=変更内容=
1.vite.svgファイルをpublicフォルダからsrc > assetsに移動
2.App.jsxを下記の様に2箇所変更

src/App.jsx
import { useState } from 'react'
import reactLogo from "./assets/react.svg";
import viteLogo from "./assets/vite.svg";   //ここ追加
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo}             // ここ変更
               className="logo" 
               alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>

// ~以下のコードは省略~

変更が完了した時点でもう一度ビルドファイルを作成してGitHubにpushする必要があります。
変更を終えたら2回目以降はrebuildするのを忘れがちなのでご注意ください。

terminal
# rebuildの方なので注意!!
yarn rebuild     

yarn git
# ここでまたcommit文を入力して [ESC]→:wq です

GitHubにpushした時点でデプロイ作業がもう一度自動で走ります。
github topページ > Actionsからまたデプロイメントのステータスを確認して緑ランプに変わったらOKです!!

スクリーンショット 2023-02-12 20.42.31.png

無事ロゴがちゃんと反映されました。
よかったよかった。といった具合です。

皆さんも是非試してみてください。

今度はViteで作成したReactプロジェクトにTailwindCSSの設定を自動で実施してGitHub Pagesへも自動でデプロイする記事を書きたいなと思います。
この記事よかったな、という方はいいねいただけると励みになります。

ありがとうございました!!

参照記事:
React(+Vite)をGithub PageへDeploy
共通オプション

34
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?