第一單元- 在AWS 上建立基本Web 應用程式
文章推薦指數: 80 %
您的所有靜態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內容:
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。
進一步了解 知道了
延伸文章資訊
- 1Web 託管
Amazon Web Services 的雲端Web 託管解決方案可為企業、非營利組織和政府組織提供成本低廉的方式來交付網站和Web 應用程式。無論您正在尋找行銷、豐富的媒體或電子商務 ...
- 2託管靜態網站 - Amazon AWS
在AWS 主控台中使用AWS Amplify 託管靜態網站。AWS Amplify 針對靜態網站和Web 應用程式提供全受管託管。Amplify 的託管解決方案利用Amazon CloudFro...
- 3建置免費的網站和Web 應用程式 - Amazon AWS
產品優勢. Amazon Web Services 的雲端Web 託管解決方案可為企業、非營利組織和政府組織提供成本低廉的方式來交付網站 ...
- 4如何免費用AWS、Wordpress在10分鐘內自架你的部落格網站
接下來就進入正題吧! lightsail. 這次是要用AWS的LightSail服務來架設我們自己的網站,對雲端或是AWS不了解的 ...
- 5AWS 入門課程:以架設網站角度一步步建立AWS 常見服務
現成的教學都還是舊的AWS 畫面嗎? AWS 上許多的服務也持續在更改介面當中,在這個課程裡面,規劃了給初學架設網站的人,所需要目前 ...