第一單元- 在AWS 上建立基本Web 應用程式

文章推薦指數: 80 %
投票人數:10人

您的所有靜態Web 內容(包括HTML、CSS、JavaScript、映像和其他檔案) 將由AWS Amplify 託管。

我們選擇Amplify 服務是因為它讓託管和部署靜態網站變得容易。

您的最終使用者將 ... AWS入門 建立基本Web應用程式 部署Web應用程式,以API和資料庫新增互動性 簡介 建立Web應用程式 建置無伺服器功能 連結無伺服器功能至Web應用程式 建立資料表 新增互動性至Web應用程式 單元1:建立Web應用程式 在本單元中,您將使用AWSAmplify主控台為Web應用程式部署靜態資源。

簡介 在本單元中,您將使用AWSAmplify主控台為Web應用程式部署靜態資源。

在後續單元中,您會使用AWSLambda和AmazonAPIGateway呼叫遠端RESTfulAPI,將動態功能新增至這些頁面。

(REST意指「表現層狀態轉換」,是建立Web服務用的架構模式。

API代表應用程式界面。

因此,是由RESTfulAPI實作該架構模式。

) 您的所有靜態Web內容(包括HTML、CSS、JavaScript、映像和其他檔案)將由AWSAmplify託管。

我們選擇Amplify服務是因為它讓託管和部署靜態網站變得容易。

您的最終使用者將使用Amplify公開的URL存取您的網站。

若您因為使用這麼多新事物而緊張,不必擔心!您現在不會使用其他AWS服務,也不需要執行任何Web伺服器!(「伺服器」是接受和回應透過網路發出的請求之軟體或硬體裝置,以讓您的網站可用。

) 此網站會是極度簡單的"HelloWorld"網頁,我們會在後續的單元中加進更多功能。

對於大部分真正的應用程式,您將使用自訂網域來託管您的網站。

「自訂網域」是識別網站的唯一品牌名稱,例如www.amazon.com。

如果您對此感興趣,Amplify還提供對自訂網域的支援。

您將學到的內容 如何建立Amplify應用程式 如何直接將網站檔案上傳到Amplify 如何使用Amplify部署網頁的新版本 主要概念 靜態網站靜態網站有固定的內容,不像動態網站。

靜態網站是最基本的網站類型,也最容易建立。

只需要建立幾張HTML網頁,發佈到Web伺服器即可! Web託管:提供讓您的網站在網際網路上供人觀看所需的技術/服務。

AWS區域:AWS用來放置基礎設施的分立地理區。

分散於全世界,以便客戶能為了託管雲端基礎設施,選擇最近的區域。

 完成時間 5分鐘  使用的服務 AWSAmplify主控台  單元先決條件 文字編輯器。

以下是我們喜愛的幾種免費選擇(依字母順序排列): Atom Notepad++ Sublime Vim VisualStudio程式碼 實作 使用Amplify主控台建立Web應用程式 在電腦上開啟您愛用的文字編輯器。

建立新的檔案,貼上以下HTML內容:

HelloWorld HelloWorld 2.將檔案儲存為index.html。

3.僅ZIP(壓縮)HTML檔案。

4.在新的瀏覽器視窗中,登入到Amplify主控台。

注意:本教學將使用奧勒岡(us-west-2)區域。

5.在Deploy(部署)下,按一下橙色的GetStarted(開始使用)按鈕。

6.選擇DeploywithoutGitprovider(不使用Git提供者進行部署)。

您應該可以在螢幕上看到以下內容: 7.按一下橙色的Continue(繼續)按鈕。

8.在AppName(應用程式名稱)欄位中,輸入GettingStarted。

9.對於Environment(環境),輸入dev。

10.選擇Draganddrop(拖放)方法。

您應該可以在螢幕上看到以下內容: 11.按一下Choosefiles(選擇檔案)按鈕。

12.選擇在步驟3中建立的ZIP檔案。

13.按一下橙色的Saveanddeploy(儲存並部署)按鈕。

14.幾秒鐘後,您應該可以看到訊息Deploymentsuccessfullycompleted(部署成功完成)。

測試您的Web應用程式 按一下Domain(網域)下的連結。

您的Web應用程式將加載到新的瀏覽器標籤中,並呈現"HelloWorld"。

恭喜您! 應用程式架構 以下是我們的架構目前大致的樣子: 因為我們現在只使用AWSAmplify主控台,暫且相當精簡。

現在,我們有使用者可以與之互動的線上Web應用程式。

接下來,我們將會建立Lambda函數。

這個單元對您是否有幫助? 是 否  意見回饋 感謝您 請告訴我們您喜歡的部分。

 意見回饋 關閉 抱歉,讓您失望 是有內容過時、令人困擾,或不準確嗎?請提供意見回饋,協助我們改進此教學課程。

 意見回饋 關閉 開始第二單元 建置無伺服器功能 結束對InternetExplorer的支援 知道了 AWS對InternetExplorer的支援將於07/31/2022結束。

支援的瀏覽器包括Chrome、Firefox、Edge和Safari。

進一步了解 知道了


請為這篇文章評分?