使用自定义域名将 React 应用部署到 GitHub Pages
介绍
展示您的项目和应用的最佳方式就是拥有已部署的版本。其中一种方法是使用 GitHub Pages，它直接从您的项目存储库托管您的应用。它是免费的，并且易于使用和维护。使用Create React App引导的 React 项目使用 GitHub 页面部署起来更加容易。
使用 GitHub Pages 部署的应用程序具有默认 URL，如 {username}.github.io/{repository-name}，但如果您想更改域名怎么办？在本指南中，您将学习如何向使用 GitHub Pages 托管的 React 应用程序添加自定义域。
本指南假设您已经使用 GitHub Pages 部署了 React 应用并购买了自定义域。您可以在此处了解如何在 GitHub Pages 上部署 React 应用。
在 GitHub 中设置域名
第一步是在 GitHub 项目设置中设置您的自定义域。转到您的 GitHub 存储库的设置。在自定义域下添加您的自定义域并单击保存。这将在项目发布源的根目录中创建一个CNAME文件。不要删除它。
CNAME代表规范名称，用于将一个域名别名为另一个域名。与 A 记录不同，CNAME 记录指向另一个域名，而不是直接指向 IP 服务器。
如果您的自定义域名是 example.com，那么您的 CNAME 文件将如下所示：
example.com
此 CNAME 文件只能包含一个域名，并且应该是您的 URL 的最小值，例如 www.example.com 或 example.com，而不是 https://example.com。
配置 DNS 记录
现在下一步是配置您的域名注册商（如 Namecheap、Domain.com、Google Domains 等）。您只需要设置 A 和 CNAME 记录。
记录
记录代表地址记录，它将您的域名与您的网站在服务器上所在的实际 IP 地址连接起来。
对于A记录集，以下所有内容：
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
根据您的 DNS 提供商，可能会要求您提供记录的名称。将其设置为 @。
CNAME 记录
创建一个 CNAME 记录，将您的子域指向您网站的默认域。
例如，要将 www 子域 (www.example.com) 重定向到原始域，请添加一条 CNAME 记录，其值为项目的默认 URL，末尾带有句点。如果系统询问，请将记录的名称设置为“www”，并将 TTL 设置为“小时或更短”。
例如，如果您的用户名是“ezio”，您的项目存储库名为“react-photo-search-app”，则默认情况下您的应用将发布到https://ezio.github.io/react-photo-search-app/。为此，您需要的 CNAME 记录是
ezio.github.io/react-photo-search-app.
注意：此 CNAME 与在项目 repo 中创建的 CNAME 不同。
强制实施 HTTPS
成功添加和配置记录后，您可以通过选中存储库设置中的自定义域设置下的强制 HTTPS来添加额外的加密层。
结论
就这样，自定义域名现已添加到您的 React 应用中。根据您的 DNS 提供商，可能需要最多 24 到 48 小时才能反映这些更改，因此只需坐下来等待即可。
如果您遇到错误，有关对自定义域和 GitHub Pages 进行故障排除的此资源可能会有所帮助。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~