将React应用程序构建并部署到Github Pages的方法

假设条件

• Node.jsとnpmがインストールされていること。

• GitHubアカウントがあること。

Gitがインストールされていること。

React应用程序开发步骤

创建代码仓库

我要在GitHub上创建一个新的存储库。

2. 在本地进行克隆

将代码库克隆到本地。

  git clone [リポジトリのURL]

3. React应用程序初始设置

 npx create-react-app .

4. 完成初期设置后，将代码推送到远程代码库。

git add .
git commit -m "Reactアプリセットアップ"
git push　origin main

5. 初期设置完成后，为了更容易理解差异，我们会分支开发应用程序。

将项目部署到GitHub Pages的步骤。

4. 安装 gh-pages 包

gh-pages パッケージを開発依存関係としてインストールします。Github Pages用の公開ディレクトリを別ブランチ上にコマンド一つで生成してくれるパッケージです。

gh-pagesという名前のブランチが作成されます。

gh-pagesはビルドしたファイルを自動的にgh-pagesブランチにデプロイすることができます。
npm install gh-pages –save-dev

5. 编辑 package.json

package.json ファイルに以下のフィールドを追加します。

Package.json
“homepage”: “http://GitHubユーザー名.github.io/リポジトリ名”

先程ど同様のpacage.json のscriptsセクションに以下を追加します。
これらはnpm run deploy を実行する前に自動的に呼び出されるスクリプトです。

pacakge.json
“scripts”: {
“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”,
//省略
}

“predeploy”: “npm run build” は、React アプリケーションをビルドして build/ ディレクトリに出力します。

“deploy”: “gh-pages -d build” はgh-pages パッケージを使用して、ビルドされたアプリケーション（build/ ディレクトリ内）を GitHub Pages にデプロイします。

6. 将代码推送到GitHub上。

git add .
git commit -m "ReactアプリをGitHub Pagesにデプロイするための設定"
git push origin [Reaｃｔアプリ実装したブランチ名 ]

7. 部署

执行以下命令进行部署。

  npm run deploy

通过访问此链接 http://GitHub用户名.github.io/仓库名称，您应该能够看到展示React应用的页面。

请注意：此URL还依赖于GitHub存储库的设置。请确保gh-pages分支已正确设置，并且可能需要几分钟来反映更改。

这些是基本步骤。