如何在3分钟内将React应用程序轻松部署到Github Pages
我能创建React应用程序，但我应该怎样部署（发布）呢？
本次我们将介绍在GitHub提供的GitHub Pages服务中将用React创建的应用程序部署到GitHub Pages的步骤。
必需品（前提条件）
-
- Node.jsとnpmがインストールされた開発環境
-
- GitHubアカウント
- GitHub PagesにデプロイしたいReactアプリ
步骤
创建一个Github远程仓库
首先，创建一个用于保存React应用的GitHub远程存储库。请将该存储库设置为公开（Public）。
安装 gh-pages
您需要安装与GitHub Pages配合使用的gh-pages软件包。
请执行以下命令进行安装。
npm install gh-pages --save-dev
更新package.json
然后，在package.json文件中添加homepage字段。这将成为公开URL。
在这里，请将[your-github-username]替换为您的GitHub用户名，
将[github-repo-name]替换为GitHub仓库名称。
"homepage": "http://[your-github-username].github.io/[github-repo-name]"
-
- 在package.json文件中更新脚本
- 在package.json文件的”scripts”部分中添加以下的两行代码。
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
// 既存コード
}
当运行 npm run deploy 命令时，首先会进行构建操作，然后将构建生成的文件推送到 gh-pages 分支上。
部署
执行以下命令以部署应用程序。
npm run deploy
在GitHub存储库中进行设置
最后，进行GitHub仓库的设置。转到GitHub仓库并打开设置(Settings)选项卡。
向下滚动至”GitHub Pages”部分，并将源分支设置为gh-pages。然后保存设置。
可以按照以上的步骤将React应用部署到GitHub Pages。然后，您可以通过设置的URL来查看React应用。
请留意
GitHub Pages专注于托管静态网站。因此，建议考虑其他托管平台，如Netlify或Vercel，对于需要服务器端渲染或与API进行交互等需要在服务器端进行动态处理的React应用程序。
总结起来
在这篇文章中，我们介绍了将用React创建的应用程序部署到GitHub Pages的步骤。这些步骤本身相对简单，是公开您的React应用程序的最佳方法之一。请尝试这种方法，将您自己创建的React应用程序发布到全世界。
请参照以下内容。
阅读官方文档可以更加深入地理解。
https://create-react-app.dev/docs/deployment/
