在 AWS Elastic Beanstalk 上部署 Web 應用程式
入門指南
單元 1:建置 Web 應用程式
在本單元中,我們將會建立 NodeJS Web 應用程式,並在本機上執行。
簡介
我們將會建立非容器化的應用程式,並部署至雲端。以此為例,我們將使用 NodeJS 建置 Web 應用程式。
該 Web 應用程式將會是簡單的 Web 應用程式伺服器,提供靜態 HTML 檔案,且也有 REST API 端點。本指南的重點並非有關建置 Web 應用程式的教學,因此歡迎您使用範例應用程式,或自行建置。雖然本指南的重點是使用 NodeJS,您也可以利用其他 Elastic Beanstalk 支援的程式語言 (Java、.NET、NodeJS、PHP、Ruby、Python、Go 及 Docker) 來建置相似的 Web 應用程式。
您可以在本機電腦或 AWS Cloud9 環境中實作。
您將學到的內容
- 開發簡單的 NodeJS Web 應用程式,提供 HTML 檔案並且有簡單的 REST API
- 在本機執行應用程式
完成時間
10 分鐘
單元先決條件
- 有管理員等級存取權限的 AWS 帳戶**
- 建議的瀏覽器:最新版的 Chrome 或 Firefox
[**]過去 24 小時內建立的帳戶可能尚未有權存取本教學課程所需的服務。
實作
建立用戶端應用程式
第一步是為應用程式建立新的目錄。
mkdir my_webapp
cd my_webapp
接著,初始化 NodeJS 專案。這會建立 package.json 檔案,其中包含 NodeJS 應用程式的所有定義。
npm init -y
建立 Express 應用程式
我們將會利用 Express 做為 Web 應用程式架構。若要使用它,必須在 NodeJS 專案中安裝 Express 做為相依項。
npm install express
執行此命令後,您將會看到該相依項出現在 package.json 檔案中。除此之外,也建立了 node_modules 目錄及 package-lock.json 檔案。
現在您可以建立名為 app.js 的新檔案。此檔案會包含 NodeJS Express 伺服器所在的商業邏輯。
我們現在可以開始新增一些程式碼。在本案例中,首先需要新增的是應用程式的相依項 Express,許可使用先前安裝的模組,接著再新增程式碼以啟動 Web 伺服器。我們將指定 Web 伺服器使用連接埠 8080,因為這是 Elastic Beanstalk 預設使用的連接埠。
var express = require('express');
var app = express();
var fs = require('fs');
var port = 8080;
app.listen(port, function() {
console.log('Server running at http://127.0.0.1:', port);
});
現在可以啟動應用程式,但是還不會執行任何動作,因為我們尚未定義任何處理請求的程式碼。
建立 REST API
我們現在可以新增程式碼,以提供 HTTP REST API 呼叫的回應。若要建立第一個 API 呼叫,請在連接埠定義之間以及啟動伺服器的地方新增下列程式碼。
var express = require('express');
var app = express();
var fs = require('fs');
var port = 8080;
// New code
app.get('/test', function (req, res) {
res.send('the REST endpoint test run!');
});
app.listen(port, function() {
console.log('Server running at http://127.0.0.1:%s', port);
});
這只是連接 /test 端點與程式碼的示範,您可以新增不同的回應,或有特定功能的程式碼,但這不在本指南的說明範圍之內。
提供 HTML 內容
我們的 Express NodeJS 應用程式也可以提供靜態 Web 頁面。我們需要建立 HTML 頁面作為使用範例,請建立一個稱為 index.html 的檔案。
在本檔案中,請新增下列 HTML 以及先前建立的 REST 端點連結,以表現連接至後端的方式。
<html>
<head>
<title>Elastic Beanstalk App</title>
</head>
<body>
<h1>Welcome to the demo for ElasticBeanstalk</h1>
<a href="/test">Call the test API</a>
</body>
</html>
若要從我們的 Express 伺服器提供此 HTML 頁面,需要新增更多程式碼,以在被呼叫時轉譯 / 路徑。若要這麼做,請在 /test 呼叫上方新增下列程式碼:
app.get('/', function (req, res) {
html = fs.readFileSync('index.html');
res.writeHead(200);
res.write(html);
res.end();
});
無論何時提出應用程式的根請求 (/),此程式碼都會提供 index.html 檔案。
在本機執行程式碼
現在我們可以執行應用程式,並測試是否能夠在本機執行。若要這麼做,我們將會用指令碼更新 package.json,讓它更易於執行。在 package.json 檔案中,用下列替換指令碼區段:
"scripts": {
"start": "node app.js"
},
現在可以前往終端並執行:
npm start
這會使用 URL http://127.0.0.1:8080 或 http://localhost:8080 啟動本機伺服器。
當您在瀏覽器中貼上此 URL 時,應可看到以下內容:

若要停止伺服器,請使用 ctrl + c 使執行 npm start 的終端程序停止。