= 如何使用 AWS Amplify 部署 React 应用程序 =
== 使用 AWS Amplify 部署 React 应用程序的指南 ==
自从我开始担任软件工程师咨询以来，我一直想建立一个投资组合网站，展示
我从事的个人和专业项目。这个寒假，我花时间设计、开发和部署我的投资组合网站，在本文中，我将向您介绍我如何使用 AWS Amplify 部署它。您可以在 dan-murphy.com 查看网站和 GitHub 上的代码。
= 简要背景 =
我的大部分专业工作都涉及构建数据驱动的应用程序和简化数据管道。为了完成这些任务，我经常使用 Python 和 Ruby，并将 JavaScript 用于任何前端工作。为了更加熟悉 React，我决定使用该框架来构建我的投资组合网站。
= 设置应用程序 =
我采取的第一步是决定如何构建应用程序。我利用
create-react-app 作为我的目录的基本模板，然后用一些额外的文件夹重新构建应用程序。最终设置如下所示：
来源
成分
Ø 存档
额外内容
一个数据
头像
页数
内容
一个数据
样式
测试
固定装置
一些显着的变化是
**成分**
， 和
**页面**
目录。
**样式**
,
：这是我存储应用程序所有组件的地方。通过将组件存储在一个集中的文件夹中，可以更轻松地重用和重构我的代码，也可以更直观地让其他人理解。构成我的投资组合网站的一些组件是
成分
标头，
页脚和
项目边栏。
：这是我为应用程序构建不同页面的地方。我从
页数
文件夹，然后聚合它们以设计页面。这是我如何为
组件主页：
：这是我为应用程序定义全局 CSS 样式的地方。我喜欢用
样式
styled-components 用于单个组件，但我还发现构建每个页面可用的全局样式很有用。
最后，为了将请求映射到正确的页面，我们使用
反应路由器域。路由定义在
App.js文件如下图：
这将映射
主页，
/项目请求
项目页面，
/关于请求
关于页面，和
/书架请求
书页。现在应用程序的开发已经完成，我们需要部署它以便其他人可以使用它！
/请求
= 使用 AWS Amplify 部署 =
== 概述 ==
部署 React 网站有多种方法，但我发现最简单的方法之一是使用
**AWS Amplify Amplify 被描述为“构建可扩展的移动和 Web 应用程序的最快、最简单的方法”。为实现这一目标， AWS 推断出设置服务器、安装依赖项和创建网站生产构建的所有复杂情况，让您可以专注于构建直观的用户体验。要详细了解 AWS Amplify 为数据驱动应用程序提供的功能（具体来说，具有**前端**和**后端的网站，请查看其文档。
== 连接你的存储库 ==
要在 AWS Amplify 上托管您的 Web 应用程序，您首先需要连接包含您的源代码的存储库。为此，您可以导航到
*AWS Amplify* *入门* **托管我的 Web 应用程序并单击 **连接应用程序存储库 *页面，滚动到*页面，滚动到 
然后，您将被重定向到一个单独的页面，您可以在其中连接包含源代码的存储库。对于此示例，我将选择 GitHub，但 AWS Amplify 还支持 BitBucket、GitLab、AWS CodeCommit，甚至可以在没有 Git 提供商的情况下进行部署。
成功授权后，您可以选择要部署的存储库，并选择 AWS Amplify 应该用于生产构建的分支。
之后，单击
**下一步** AWS 将要求您配置*构建* 和*测试* 设置。 AWS 提供的基本模板如下所示。
版本：1
前端：
阶段：
预构建：
命令：
- npm 安装构建：
命令：
- npm 运行构建
工件：
基本目录：构建
文件：
-
缓存：
路径：
- 节点模块
此外，根据
**高级设置** 切换，您可以设置环境变量和自定义构建容器。
最后，在查看您的应用程序的设置后，单击
**保存并部署**，**AWS 将开始配置和部署您的应用程序。当 AWS 完成部署后，您可以导航到 Amplify 主页并查看新部署的应用程序AWS 将开始配置和部署您的应用程序。当 AWS 完成部署后，您可以导航到 Amplify 主页并查看新部署的应用程序。
现在，让我们自定义 URL，使用
**AWS Amplify 域管理
== 添加自定义域 ==
要开始添加自定义域，请导航至左侧边栏并选择
**域管理！[](httpsmiro.medium.com/max/1400/1*fo8ZsKK7c3QvAwpjzMXcWg.png)
**域管理**设置。
然后，选择
**添加域 **配置域 **输入您的域名（如下图），然后点击**输入您的域名（如下图），然后点击 
在此之后，您可以设置您的域所需的任何重定向。例如，在以下示例中，我创建了从 httpsdan-murphy.com 到 httpswww.dan-murphy.com 的重定向。
最后，在你的自定义域配置正确后，AWS 会为你提供一个
**验证证书 您还可以在 AWS Certificate Manager 控制台中查看此证书。
== 添加 CNAME 记录 ==
配置自定义域的最后一步是添加 CNAME 记录。在以下示例中，我使用 Google Domains，但基本概念在不同的域注册商中保持不变。
首先，向下滚动到
Google Domains 中的**自定义资源记录**。创建将所有子域指向 AWS Amplify 域的 *CNAME *记录： 名称：输入子域名。如果子域是 www.domain.com，请输入 .如果是www app.domain.com，输入app。数据：在域管理页面，单击操作，然后选择查看 DNS 记录。然后，在配置 DNS 提供商下输入可用的 AWS Amplify 域。 
**域管理**页面，选择**操作**查看 DNS 记录**
总之，自定义资源记录将如下所示：
接下来，再添加一个
*CNAME* 记录指向 AWS Certificate Manager 验证服务器。经过验证的 AWS Certificate Manager 会为您的应用程序处理 TLS：名称：输入验证服务器的子域。如果用于验证域所有权的 DNS 记录是 _1234.example.com，则仅输入 _1234。数据：输入 ACM 验证证书。如果验证服务器是 _1234.abcdefg.acm-validations.aws.，则输入 _1234.abcdefg.acm-validations.aws。
您的验证证书的所有信息都可以在 AWS Certificate Manager 控制台中找到。第二个之后
*CNAME* 已添加，您的自定义记录应如下所示：
最后，让我们添加一个
**综合记录**设置子域转发：子域：输入域URL：www。 
= 总结 =
总的来说，在本文中，我们学习了如何构建 React 应用程序并使用 AWS Amplify 部署它们。首先，我们讨论了如何将 React 应用程序模块化为
*组件* *页面* 文件夹。然后，我们了解了 **AWS Amplify** 以及如何使用它部署静态和数据驱动的应用程序。最后，我们了解了如何使用 **AWS Amplify Domain Management** 和 **Google Domains ** 来自定义我们应用程序的域。 **和**和
如果您对本文或我的投资组合网站有任何问题、疑虑或反馈，请随时发表评论或给我发送电子邮件至
*
[email protected]*。谢谢阅读！
SHARED网络托管#7
