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

5 分鐘

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

建立新 Web 專案

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

首先，讓我們將 dotnet 的適當版本安裝到 Cloud Shell。針對本練習，我們將會使用 SDK 版本 3.1.102。

在右側的 Azure Cloud Shell 中執行下列命令，以下載並安裝 dotnet：

wget -q -O - https://dotnet.microsoft.com/download/dotnet/scripts/v1/dotnet-install.sh | bash -s -- --version 6.0.404
export PATH="~/.dotnet:$PATH"
echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc

接下來，執行下列命令以建立名為 "BestBikeApp" 的新 ASP.NET Core MVC 應用程式：
```
dotnet new mvc --name BestBikeApp
```

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

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

瀏覽至新索引標籤中的 https://shell.azure.com/，以開啟次要命令殼層工作階段。您可以在 Azure 本機上測試您的應用程式。若要這樣做，請使用下列步驟：

從您的主要命令殼層工作階段，執行下列命令以建置並執行 Web 應用程式：

cd BestBikeApp
dotnet run

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

info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
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/user/BestBikeApp

輸出會描述啟動應用程式後的情況：應用程式正在執行，且正在接聽連接埠 5000。

從次要命令殼層工作階段，請執行下列命令以瀏覽至您的 Web 應用程式：

curl -kL http://127.0.0.1:5000/

您應該會看到一些 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 class="border-top footer text-muted">
         <div class="container">
             &copy; 2021 - 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=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>

 </body>
 </html>

從主要命令殼層工作階段，按 Ctrl+C 結束您的 Web 應用程式。

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

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

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

現在請執行這些命令以變更至新的 "helloworld" 應用程式目錄，並將應用程式封裝以進行部署：
```
cd helloworld
mvn package
```
當命令執行完成時，執行下列命令以開啟 target 目錄並列出其內容：
```
cd target
ls
```

有個名為 helloworld.war 的檔案將會列出。這是我們將部署至 App Service 的 Web 應用程式套件。

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

在 Azure Cloud Shell 中執行下列命令以建立新的 package.json，其將描述我們的 Node.js 應用程式：
```
cd ~
mkdir helloworld
cd helloworld
npm init -y
```

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

在終端機中執行下列命令，以建立檔案：
```
touch index.js
```
我們現在必須對這兩個檔案進行一些編輯。在終端機中執行下列命令，以開啟互動式編輯器：
```
code .
```
選取 package.json 檔案並對 scripts 區段進行下列編輯，以使用 Node.js 來啟動 Web 應用程式：
```
{
  "name": "helloworld",
  ...
  "scripts": {
    "start": "node index.js"
  },
  ...
}
```
選取 [...] 功能表以儲存檔案，或在 Windows 和 Linux 上按 Ctrl+S，或在 macOS 上按 Command+S。

重要

每當您在編輯器中編輯檔案，請務必隨後選取編輯器右上方的 [...] 功能表以進行儲存，或在 Windows 和 Linux 上按 Ctrl+S，或在 macOS 上按 Command+S。若要結束編輯器，請在 Windows 和 Linux 上按 Ctrl+Q，或在 MacOS 上按一下編輯器右上角，然後選取 [結束]。

切換至 index.js 檔案，並在其中新增下列內容。在對伺服器發出任何 GET 要求時，這個小型的 Node.js 程式一律會回以 "Hello World!"。

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}`);

儲存檔案並結束編輯器，方法是選取右上方的 ... 圖示，然後從捷徑功能表選取 [儲存] [關閉編輯器]；或者，在 Windows 和 Linux 上使用快速鍵 Ctrl+S 和 Ctrl+Q。

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

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

從新的瀏覽器索引標籤，瀏覽至 https://shell.azure.com/。
從主要命令殼層工作階段，請執行下列命令以啟動您的 Web 應用程式：
```
cd ~/helloworld
npm start
```
從次要命令殼層工作階段，請執行下列命令以瀏覽至您的 Web 應用程式：
```
curl http://127.0.0.1:1337/
```
您應該會取得下列輸出：
```
<html><body><h1>Hello World!</h1></body></html>
```
從您的主要命令殼層工作階段，按 Ctrl+C 結束 Web 應用程式，然後關閉第二個殼層工作階段瀏覽器索引標籤。

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

在 Azure Cloud Shell 中執行下列命令以設定虛擬環境，並在您的設定檔中安裝 Flask：
```
python3 -m venv venv
source venv/bin/activate
pip install flask
```
執行下列命令以建立並切換至新的 Web 應用程式目錄：
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```
在 Python 互動式編輯器中開啟「application.py」，為您的 Web 應用程式建立新的檔案：
```
code application.py
```

複製並貼上下列 Python 程式碼，以建立主要的 Web 應用程式功能：

from flask import Flask
app = Flask(__name__)

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

儲存檔案並結束編輯器，方法是選取右上方的 [...] 功能表，然後選取 [儲存] > [關閉編輯器]，或在 Windows 和 Linux 上按 Ctrl+S 和 Ctrl+Q。
若要將您的應用程式部署至 Azure，您必須在 requirements.txt 檔案中儲存為其建立的應用程式需求清單。若要這樣做，請執行下列命令：
```
pip freeze > requirements.txt
```

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

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

在新的瀏覽器索引標籤 https://shell.azure.com/ 中開啟第二個命令殼層工作階段。
從主要命令殼層工作階段 (右側) 執行下列命令以啟動虛擬環境：
```
cd ..
source venv/bin/activate
```
從主要命令殼層工作階段 (右側) 執行下列命令以啟動您的 Web 應用程式：
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run
```
從次要命令殼層工作階段，請執行下列命令以瀏覽至您的 Web 應用程式：
```
curl http://127.0.0.1:5000/
```
您應該會取得下列 HTML 輸出：
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
從您的主要命令殼層工作階段，按 Ctrl+C 結束 Web 應用程式，然後關閉次要 Azure Cloud Shell。

繼續

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

建立新 Web 專案

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

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

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

意見反應