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 是一種 JavaScript Web 應用程式庫,使開發人員能夠快速建置高效能的單一頁面應用程式。

Git – 一種版本控制系統,允許開發人員儲存檔案,以及維護和更新檔案與目錄、版本和檔案變更之間的關係。

 完成時間

10 分鐘

 使用的服務

實作

  • 建立 React 應用程式最簡單的方法是使用命令 create-react-app。在命令提示字元或終端機中使用以下命令安裝此軟體包:

    npx create-react-app amplifyapp
    cd amplifyapp
    npm start
  • 在此步驟中,您將建立一個 GitHub 儲存器,並將程式碼提交至該儲存器。您將需要一個 GitHub 帳戶來完成此步驟,若您沒有帳戶,請在這裡註冊。

    a.為您的應用程式建立新的 GitHub 儲存器

    b.開啟新的終端並導覽返回應用程式的根資料夾,例如 amplifyapp

    c.使用 create-react-app 會自動初始化 git 儲存器並進行初始遞交。如果您嘗試部署未初始化 git 的現有 React 應用程式,請確保輸入下列命令再繼續:

    git init
    git add .
    git commit -m "initial commit"

    d.如果您從未在電腦上使用 GitHub,請遵循以下步驟操作,再繼續允許連線至您的帳戶。

    在命令列介面執行以下命令將應用程式推送至新的 GitHub 儲存器:

    git remote add origin [email protected]:username/reponame.git
    git branch -M main
    git push -u origin main
  • 在新的瀏覽器視窗中,開啟 AWS 管理主控台,讓此逐步指南保持開啟狀態。當畫面載入時,請輸入您的使用者名稱和密碼以開始使用。然後在搜尋列中輸入 Amplify,並選取 AWS Amplify 以開啟服務主控台。

  • 在此步驟中,您會將剛剛建立的 GitHub 儲存器連線至 AWS Amplify 服務。這讓您能夠在 AWS 上建置、部署和託管應用程式。

    a.在 AWS Amplify 服務主控台中,在 Amplify 託管下選取開始使用

    b.選取 GitHub 作為儲存庫服務,然後選取 Continue (繼續)。

    c.使用 GitHub 進行身份驗證,然後返回至 Amplify 主控台。選擇您之前建立的儲存器和主要分支,然後選取 Next (下一步)。

    d.接受預設的建置設定,然後選取 Next (下一步)。

    e.檢閱最終詳細資訊,然後選擇儲存並部署

    f.AWS Amplify 主控台現在將在 https://...amplifyapp.com 建立您的源代碼並部署您的應用程式。

    g.建置完成後,選取縮略圖以查看您的 Web 應用程式是否啟動並即時執行。 

  • 在此步驟中,您將使用文字編輯器對程式碼做出一些變更,並將變更推送至應用程式的主要分支。

    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 main

    c.建置完成後,請在 AWS Amplify 主控台上選取縮圖,以檢視更新的應用程式。

結論

您已經透過整合 GitHub 並使用 AWS Amplify,在 AWS 雲端部署了 React 應用程式。藉助 AWS Amplify,您可以在雲端持續部署應用程式,並將其託管在全球可用的 CDN 上。

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

本頁對您是否有幫助?

初始化本機應用程式