开始使用 AWS

构建 React 应用程序

使用 AWS Amplify 创建简单的 Web 应用程序

模块 1:部署并托管 React 应用程序

在本模块中,您将创建 React 应用程序并使用 AWS Amplify 的 Web 托管服务将它部署到云中。

简介

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

在本模块中,我们首先要创建一个新的 React 应用程序,并将其推送到 GitHub 代码库。然后,您将这个代码库连接到 AWS Amplify Web 托管并将其部署到 amplifyapp.com 域上托管的全球可用内容分发网络 (CDN)。接下来,我们将通过更改 React 应用程序并将新版本推送到可自动开始新部署的主分支,来演示连续部署功能。

您将学到的内容

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

重要概念

React 应用程序 – React 是一个 Web 应用程序框架,可使开发人员使用 JavaScript 快速构建高性能的单页应用程序。

Git – 允许开发人员存储文件,维护和更新文件与目录、版本和文件更改之间的关系的版本控制系统。

 完成时间

10 分钟

 使用的服务

实施

  • 创建新的 React 应用程序

    创建 React 应用程序的最简单方法是使用 create-react-app 命令。在命令提示符或终端中使用以下命令安装此软件包:

    npx create-react-app amplifyapp
    cd amplifyapp
    npm start
  • 初始化 GitHub 代码库

    在此步骤中,您将创建一个 GitHub 代码库并将代码提交到该代码库。您将需要一个 GitHub 账户来完成此步骤——如果您没有账户,请在此处注册

    a.为您的应用创建一个新的 GitHub 代码库(链接

    Front End GitHub Repository Module 1

    b.初始化 git 并将应用程序推送到新的 GitHub 代码库,在命令行界面中执行以下命令:

    git init
    git remote add origin git@github.com:username/reponame.git
    git add .
    git commit -m “initial commit”
    git push origin master
  • 登录 AWS 管理控制台

    在新浏览器窗口中打开 AWS 管理控制台,以便您可以将本分步指南保持打开状态。此屏幕加载后,请输入您的用户名和密码以便开始操作。在搜索栏中输入“Amplify”,然后选择 AWS Amplify 以便打开服务控制台。

    Front End AWS Console Find Amplify Module 1
  • 使用 AWS Amplify 部署您的应用程序

    在此步骤中,您会将刚刚创建的 GitHub 代码库连接到 AWS Amplify 服务。这将使您能够在 AWS 上构建、部署和托管应用程序。

    a.在 AWS Amplify 服务控制台中,在 Deploy(部署)下选择 "Get Started"(开始使用)。

    Front End Amplify Deploy Module 1

    b.选择 GitHub 作为代码库服务,然后选择 Continue(继续)。

    Front End Amplify GitHub Module 1.png

    c.完成 GitHub 的身份验证,然后返回到 Amplify 控制台。选择您之前创建的代码库和主分支,然后选择 Next(下一步)。

    Front End GitHub Add Repository Module 1.png

    d.受默认的构建设置并选择 Next(下一步)。

    Front End GitHub Add Repository2 Module 1.png

    e.检查最终细节并选择 Save and Deploy(保存并部署)。

    Front End GitHub Add Repository3 Module 1.png

    f.AWS Amplify 现在将在以下位置构建您的源代码并部署您的应用程序:https://...amplifyapp.com。

    Front End Amplify Deploy Source Module 1

    g.构建完成后,选择缩略图以查看您的 Web 应用程序是否已启动并上线运行。 

    Front End Initial App Module 1
  • 自动部署代码更改

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

    a.使用下面的代码编辑 src/App.js 并保存。

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1>Hello from V2</h1>
          </header>
        </div>
      );
    }
    
    export default App;

    b.在命令提示符 (Windows) 或终端 (macOS) 中将更改推送到 GitHub,以自动开始新构建: 

    git add .
    git commit -m “changes for v2”
    git push origin master

    c.构建完成后,请在 AWS Amplify 控制台上选择缩略图以查看更新后的应用程序。

    Front End HelloV2 App Module 1

结论

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

接下来,我们将创建应用程序的本地版本,以继续开发和添加新功能。

此模块有帮助吗?

谢谢
请告知我们您喜欢什么。
关闭
很抱歉让您失望了
是否存在过时、令人困惑或不准确的内容? 请向我们提供反馈,帮助我们改进本教程。
关闭

初始化本地应用程序