我最近使用CreateReactApp入门模板创建了一个网站，以演示我开发的npm包。我认为使用GitHubPages部署这个站点会非常简单，但是，我错了。经过反复试验，我设法解决了这个问题。本文的目的是重现该场景并引导您完成解决我们在此过程中遇到的每个问题的过程。1.起点让我们从一个共同点开始。我们首先使用CreateReactApp工具创建一个React应用程序，并将代码添加到GitHub存储库。我使用以下命令生成此示例React应用程序。npxcreate-react-app--templatetypescript此时，您的项目目录应该如下图所示。我没有添加或修改任何东西——这些是我们运行上面的npx命令时开箱即用的文件和文件夹。我只是通过运行npmrunstart命令确保它在本地工作，仅此而已。我已将这些更改推送到我的GitHub存储库，如果您正在关注，也可以这样做。如果你想比较，这里是我的存储库在这个阶段的样子。2.部署到GitHubPages当我们运行npmrunbuild命令时，CreateReactApp会将生产文件放入build目录。但是，如果您查看.gitignore文件，您会看到构建目录已添加到此列表中，因此，您无法将此文件夹的内容提交到GitHub。那么，我们如何发布我们的应用程序呢？GitHubActions让GitHubActions来救援！我们需要在每次代码提交时构建我们的应用程序，这就是GitHubActions所做的。在应用程序的.github/workflows目录中创建一个名为build-deploy.yml的文件。将以下内容粘贴到此YAML文件中。这是我的GitHub存储库在这个阶段的样子。name:Build&deployon:push:branches:-mainpull_request:branches:-mainjobs:build:name:Buildruns-on:ubuntu-lateststeps:-name:Checkoutcodeuses:actions/checkout@v2-name:InstallNode.jsuses:actions/setup-node@v1with:node-version:13.x-name:InstallNPMpackagesrun:npmci-name:Buildprojectrun:npmrunbuild-name:Runtestsrun:npmruntest-name:Uploadproduction-readybuildfilesuses:actions/upload-artifact@v2with:name:production-filespath:。/builddeploy:name:Deployneeds:buildruns-on:ubuntu-latestif:github.ref=='refs/heads/main'steps:-name:Downloadartifactuses:actions/download-artifact@v2with:name:production-filespath:./build-name:Deploytogh-pagesuses:peaceiris/actions-gh-pages@v3with:github_token:${{secrets.GITHUB_TOKEN}}publish_dir:./build最近写了这篇解释GitHubActions基础的文章，这里不多说了说。总而言之，此YAML文件定义了GitHubActions中的工作流程。每次将更改推送到master分支或创建拉取请求以将更改合并到master分支时都会触发此工作流，它将构建React应用程序并将构建目录的内容部署到gh-pages分支。关于${{secrets.GITHUB_TOKEN}}的快速说明——GitHub会自动创建一个GITHUB_TOKEN秘密以在您的工作流程中使用。因此，它具有对存储库的写入权限，因此，您可以更新gh-pages分支。如果您仍在学习，请将此文件提交到存储库。马上，您会注意到GitHubPages现在将根据您在工作流文件中的内容进行构建。如果您转到GitHub中的Actions选项卡，您将看到您的工作流程正在执行，并有望在一段时间后被标记为成功。随意点击UI并探索GitHub存储库的这个区域。假设状态显示为成功，此操作还将创建一个名为gh-pages的新分支，其中将部署生产就绪代码。很简单，不是吗？GitHubPages现在我们在不同的分支中有了我们的构建文件，让我们继续并启用GitHubPages。单击菜单中的设置并向下滚动到GitHub页面部分。这里我们将配置网站内容的位置。由于我们的构建文件被推送到gh-pages分支，请从下拉列表中进行选择。单击保存按钮，页面将刷新，当您向下滚动到此部分时，您将看到一个URL。单击URL以查看该网站。等等，怎么了？我看不到React应用程序的输出，可以吗？您可能会看到一个空白屏幕，如果您打开控制台，您会看到很多错误。提示：如果您看到的不是空白屏幕，而是GitHub404消息，请等待几分钟，尝试使用其他浏览器，最后尝试清除缓存。由于这将是您第一次访问该网站，它可能还没有在后台更新内容。请注意，它正在尝试获取JavaScript和CSS文件的URL——它使用的是基本URL，而不是路径create-react-app-ghpages-demo。显然，由于基本URL中不存在JavaScript或CSS文件，我们收到了404错误。只有当你的项目站点使用GitHubPages，即格式为https://.github.io//时，才会出现这个错误。如果你的仓库以.github.io格式命名，启用GitHubPages后可能不会出现上述错误。这是因为你的网站不再部署在根目录，而是部署在更深层次的https://.github.io//。那么，我们如何解决这个问题呢？让我们找出来。3、设置首页值打开本应用源码，在package.json文件中添加这个键值对，并适当替换下面URL中的部分。“homepage”：“https://.github.io//”，在我的实例中，这是我必须添加的内容：“homepage”：“https://clydedz.github.io/create-react-app-ghpages-demo/”，修改后推送到GitHub。这将触发构建和部署。等一两分钟，然后再次访问该网站。您现在应该可以看到您的React应用程序已启动并正在运行。万岁！4、添加ReactRouter下面我们来看看在React应用中添加Router的常见场景。它会无缝运行吗？或者你会再次遇到错误吗？让我们找出来。我将使用ReactRouter来完成这项任务，我将输入以下命令来安装这个npm包。npminstall--savereact-router-dom我按照基本示例添加了三个路由。这三个路由指向三个独立的React组件。这是添加了ReactRouter后我的GitHub存储库的样子。如果你运行npmrunstart命令，你将能够观察到一个非常奇怪的行为。它以http://localhost:3000/create-react-app-ghpages-demo开头，但页面仅包含导航链接，没有其他内容。单击“关于”链接将URL更新为http://localhost:3000/about，现在应该会显示一些内容。但是，由于create-react-app-ghpages-demo值已从URL中完全删除，我们不再位于正确的站点上（硬刷新URL会引发错误）。无论如何将这些更改提交到GitHub（您可能还需要更新单元测试）。成功部署后，您应该也能够在线复制此行为。这显然不理想。5.解决路由错误出现这种奇怪行为的原因是路由器现在认为该网站是从根目录提供服务的。这是不正确的——演示应用程序是从子目录提供的——因此不匹配。要解决此问题，请更新以下代码行：到process.env.PUBLIC_URL的值将为/。basename属性允许我们指定路由的实际基址URL，在本例中为子目录。现在剩下的就是让我们测试演示站点并确认它工作正常。就是这样！谢谢阅读。本文转载自微信公众号“前端全栈开发者”，可通过以下二维码关注。转载本文请联系前端全栈开发公众号。
