在 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 時,應可看到以下內容:

gsg_build_elb_1

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

結論

在本第一單元,我們建置了非常基本的 NodeJS 應用程式,並於本機執行,以確保運作正常。在下一單元中,我們將會學習如何使用 AWS CDK 建立基礎設施,以在 AWS Elastic Beanstalk 上執行。

下一步:建立基礎設施

讓我們知道我們表現如何。

感謝您的意見回饋
我們很高興此頁面對您有所幫助。您願意分享更多詳細資訊以協助我們繼續改進嗎?
關閉
感謝您的意見回饋
很抱歉此頁面沒有幫助到您。您願意分享更多詳細資訊以協助我們繼續改進嗎?
關閉