準備 Web 應用程式程式碼

3 分鐘

在此單元中，您會了解如何建立 Web 應用程式的程式碼，並將其整合到原始程式碼控制存放庫。

啟動載入 Web 應用程式

既然您已建立用來部署 Web 應用程式的資源，就必須準備要部署的程式碼。有許多方式可啟動載入新的 Web 應用程式，因此，我們會知道這裡看到的內容可能與您使用的不同。目標是快速為您提供一個起點來完成整個部署週期。

注意

此頁面上顯示的所有程式碼和命令僅供說明之用；您不需要執行任何動作。我們會在後續練習中加以使用。

dotnet 命令列工具為 .NET SDK 的一部分，可讓您直接為新的 Web 應用程式建立程式碼。特別是，您可以使用 dotnet new 命令來從範本產生新的應用程式：

dotnet new mvc --name <YourAppName>

此命令會在新的資料夾中，使用指定的名稱來建立新的 ASP.NET Core Model-View-Controller (MVC) 應用程式。

為了快速建立起始的 Web 應用程式，您可以使用 Java 生態系統中常用的 Maven (mvn) 命令列工具。特別是，Maven 包含稱為 archetype 的功能，其可以使用範本，針對不同類型的應用程式，快速建立起始程式碼。您可以使用 maven-archetype-webapp 範本來產生能在首頁顯示 "Hello World!" 之簡單 Web 應用程式的程式碼。

mvn archetype:generate -DgroupId=example.webapp -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.5

此命令會建立 helloworld 資料夾，以包含我們應用程式的原始程式碼。

您可以使用與 Node.js 配套的節點套件管理員 (npm) 命令列工具來建立新的應用程式。 init 命令會建立您應用程式所需的新 package.json：

npm init -y

如果您開啟已在目前資料夾上建立的 package.json 檔案，則可將 start 項目新增至 scripts 區段，以描述應該如何執行您的 Web 應用程式：

...
  "scripts": {
    "start": "node index.js"
  },
...

完成後，您即可在新的 index.js 檔案中撰寫 Web 應用程式的實際程式碼：

const http = require('http');
const port = process.env.PORT || 3000;

http.createServer(function(request, response) {
  response.writeHead(200, { 'Content-Type': 'text/plain' });
  response.end('Hello World!');
}).listen(port);

console.log(`Server running at http://localhost:${port}`);

此範例程式碼會建立伺服器來接聽您電腦的連接埠 3000，並使用 "Hello World!" 訊息來回覆每個要求。

若要使用數行程式碼來建立新的起始 Web 應用程式，您可以使用 Flask，這是常用的 Web 應用程式架構。您可以使用下列命令來安裝 Flask：

pip install flask

當 Flask 可在您的環境中使用之後，您可以使用下列程式碼來建立最基本的 Web 應用程式：

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!\n"

此範例程式碼會建立伺服器，以使用 "Hello World!" 訊息來回覆每個要求。

將程式碼新增至原始程式碼控制

在您的 Web 應用程式程式碼準備好之後，下一個步驟通常是將該程式碼放入原始程式碼控制存放庫，例如 Git。如果您的電腦上已安裝 Git，在您的原始程式碼資料夾上執行這些命令就會將存放庫初始化。

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

這些命令可讓您將本機 Git 存放庫初始化，並使用您的程式碼來建立第一個認可。您直接獲得的好處是使用認可來保存變更的歷程記錄。稍後，您可以同步本機存放庫與遠端存放庫；例如裝載於 GitHub 上。此同步處理可讓您設定持續整合與持續部署 (CI/CD)。雖然我們建議針對實際執行的應用程式使用原始程式碼控制存放庫，不過這並非將應用程式部署到 Azure App Service 的必要條件。

注意

使用持續整合與持續傳遞，即可透過將每個程式碼變更的組建、測試及部署自動化處理，以可靠的方式提供更頻繁的程式碼部署。其可讓您更快速且更有效率地為應用程式提供新功能與錯誤 (Bug) 修正。

準備 Web 應用程式程式碼

啟動載入 Web 應用程式

將程式碼新增至原始程式碼控制

意見反應