AWS 入門

建立 React 應用程式

使用 AWS Amplify 建立簡單的 Web 應用程式

單元 1:部署和託管 React 應用程式

在本單元中,您將建立一個 React 應用程式,並使用 AWS Amplify 的 Web 託管服務將其部署到雲端。

簡介

AWS Amplify 提供使用無伺服器後端建立、部署和託管單一頁面 Web 應用程式或靜態網站的 Git 型 CI/CD 工作流程。連線至 Git 儲存庫後,Amplify 會確定前端框架,以及利用 Amplify CLI 設定的任何無伺服器後端資源兩者的建置設定,並在每次提交程式碼時自動部署更新。

在本單元中,我們首先建立新 React 應用程式,並將其推送至 GitHub 儲存庫。然後,我們將儲存庫連線至 AWS Amplify Web 託管,並將其部署到 mplifyapp.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 上。

接下來,我們將建立該應用程式的本機版本,以繼續開發和新增新功能。

這個單元對您是否有幫助?

感謝您
請告訴我們您喜歡的部分。
抱歉,讓您失望
是有內容過時、令人困擾,或不準確嗎? 請提供意見回饋,協助我們改進此教學課程。

初始化本機應用程式