練習 - 撰寫程式碼以實作 Web 應用程式

  • 5 分鐘

在此單元中，您將使用開發人員工具來建立入門 Web 應用程式的程式碼。

建立新 Web 專案

.NET CLI 工具的核心是 dotnet 命令列工具。 您將使用這個命令來建立新 ASP.NET Core Web 專案。

執行下列命令以建立名為 "BestBikeApp" 的新 ASP.NET Core Model-View-Controller (MVC) 應用程式：

dotnet new mvc --name BestBikeApp

該命令會建立名為 "BestBikeApp" 的新資料夾來保存您的專案。

選擇性地測試您的 Web 應用程式

您可以在 Azure 本機上測試您的應用程式。 若要這樣做，請使用下列步驟：

  1. 執行下列命令以建置並在背景執行您的 Web 應用程式：

    cd BestBikeApp
dotnet run &

    您應該會取得類似下列範例的輸出：

    [1] <process-number>
<username> [ ~/BestBikeApp ]$ Building...
warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]
      No XML encryptor configured. Key {b4a2970c-215c-4eb2-92b4-c28d021158c6} may be persisted to storage in unencrypted form.
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:<port>
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /home/cephas_lin/BestBikeApp

    在輸出中，記下<流程編號>和<連接埠>的值。

  2. 執行下列命令，以瀏覽至您的 Web 應用程式，並將<連接埠>取代為您在上一個步驟中記下的連接埠。

    curl -kL http://localhost:<port>/

    您應該會看到一些 HTML 出現，結尾為下列幾行：

    <div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

        </main>
    </div>

    <footer b-b5g3qljvtd class="border-top footer text-muted">
        <div b-b5g3qljvtd class="container">
            &copy; 2024 - BestBikeApp - <a href="/Home/Privacy">Privacy</a>
        </div>
    </footer>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js?v=hRQyftXiu1lLX2P9Ly9xa4gHJgLeR1uGN5qegUobtGo"></script>

</body>
</html>

  3. 使用您稍早記下的<流程編號>，停止 dotnet:

    kill <process-number>

為了建立入門的 Web 應用程式，我們會使用 Maven，這是適用於 Java 應用程式的熱門專案管理及建置工具。 我們會使用 maven-archetype-webapp 範本來產生 Web 應用程式的程式碼。

  1. 現在在 Azure Cloud Shell 中執行下列命令，以建立新的 Web 應用程式：

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

  2. 現在請執行這些命令以變更至新的 "helloworld" 應用程式目錄，並將應用程式封裝以進行部署：

    cd helloworld
mvn package

  3. 當命令執行完成時，執行下列命令以開啟 target 目錄並列出其內容：

    cd target
ls

您現在有名為 helloworld.war 的檔案，也就是我們要部署至 App Service 的 Web 應用程式套件。

為了建立起始的 Node.js Web 應用程式，我們會使用節點套件管理員 (npm)，搭配一些 JavaScript 程式碼來執行實際的網頁處理。

  1. 在終端機中執行下列命令，以建立描述 Node.js 應用程式的新 package.json 檔案：

    cd ~
mkdir helloworld
cd helloworld
cat >package.json <<EOL
{
  "name": "helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  }
}
EOL

會在目前的資料夾中建立新的 package.json 檔案。 如果您在終端視窗中輸入 ls，應該會在目前的資料夾中找到此檔案。 我們需要 JavaScript 檔案以執行網站邏輯。 在此基本範例中，我們只需要一個檔案：index.js。

  1. 在終端機中執行下列命令來建立檔案：

    cat >index.js <<EOL
const http = require('http');

const server = http.createServer(function(request, response) { 
    response.writeHead(200, { "Content-Type": "text/html" });
    response.end("<html><body><h1>Hello World!</h1></body></html>");
});

const port = process.env.PORT || 1337;
server.listen(port);

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

選擇性地測試您的 Web 應用程式

當您執行 helloworld Web 應用程式時，您可以開啟第二個命令殼層工作階段，以確認該應用程式正在本機執行。

  1. 從新的瀏覽器索引標籤，瀏覽至 https://shell.azure.com/。

  2. 從主要命令殼層工作階段，執行下列命令以在背景啟動您的 Web 應用程式：

    cd ~/helloworld
npm start &

    您應該會取得類似下列範例的輸出：

    [1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337

    在輸出中，記下<流程編號>的值。

  3. 在同一個 Cloud Shell 工作階段中，執行下列命令以瀏覽至您的 Web 應用程式。

    curl -kL http://localhost:1337/

    您應該會取得下列輸出：

    <html><body><h1>Hello World!</h1></body></html>

  4. 使用您稍早記下的<流程編號>，停止節點:

    kill <process-number>

為了建立起始的 Web 應用程式，我們會使用 Flask 這個 Web 應用程式架構。

  1. 在 Azure Cloud Shell 中執行下列命令以設定虛擬環境，並在您的設定檔中安裝 Flask：

    python3 -m venv venv
source venv/bin/activate
pip install flask

  2. 執行下列命令以建立並切換至新的 Web 應用程式目錄：

    mkdir ~/BestBikeApp
cd ~/BestBikeApp

  3. 使用基本 HTML 回應建立名為 application.py 的新檔案:

    cat >application.py <<EOL
from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"
EOL

  4. 若要將您的應用程式部署至 Azure，您必須在 requirements.txt 檔案中儲存為其建立的應用程式需求清單。 若要這樣做，請執行下列命令：

    pip freeze > requirements.txt

選擇性地測試您的 Web 應用程式

當應用程式執行時，您可以在本機 Azure 中對應用程式進行測試。

  1. 執行下列命令以在背景啟動 Web 應用程式:

    cd ~/BestBikeApp
export FLASK_APP=application.py
flask run &

    您應該會取得類似下列範例的輸出：

    [1] <process-number>
 * Serving Flask app 'application.py'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit

    在輸出中，記下<流程編號>的值。 由於流程是在背景中執行，因此您無法使用 CTRL+C 結束。 您必須使用其流程編號來加以停止。

  2. 執行下列命令以瀏覽至您的 Web 應用程式。

    curl -kL http://localhost:5000/

    您應該會取得下列 HTML 輸出：

    <html><body><h1>Hello Best Bike App!</h1></body></html>

  3. 使用您稍記下的<流程編號>，停止 Flask:

    kill <process-number>