练习 - 编写代码以实现 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 应用

打开第二个命令 shell 会话，例如通过浏览到 https://shell.azure.com/。可以在 Azure 上本地测试应用程序。为此，请按照以下步骤操作：

对于主命令 shell 会话，请运行以下命令以生成并运行 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 上运行并进行侦听。

对于第二个命令 shell 会话，请运行以下命令以浏览到 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>

在主命令 shell 会话中，按 Ctrl + C 退出 Web 应用。

我们将使用 Maven 来创建一个入门Web应用，它是一种适用于 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 的文件列出。这是我们将部署到应用服务的 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 上按 Command+Q。

切换到 index.js 文件，并向其添加以下内容。这是一个简单的 Node.js 程序，向服务器发出任何 GET 请求时，它总是以“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，在 macOS 上按 Command+S 和 Command+Q。

（可选）测试 Web 应用

运行 helloworld Web 应用时，可以通过打开另一个命令 shell 会话来验证它是否在本地运行。

在新的浏览器选项卡中，浏览到 https://shell.azure.com/。
对于主命令 shell 会话，请运行以下命令以启动 Web 应用程序：
```
cd ~/helloworld
npm start
```
对于第二个命令 shell 会话，请运行以下命令以浏览到 Web 应用程序：
```
curl http://127.0.0.1:1337/
```
你应获得以下输出：
```
<html><body><h1>Hello World!</h1></body></html>
```
在主命令 shell 会话中，按 Ctrl+C 以退出 Web 应用，然后关闭第二个 shell 会话浏览器选项卡。

为了创建入门 Web 应用程序，我们将使用 Web 应用程序框架 Flask。

运行以下命令，设置虚拟环境并在配置文件中安装 Flask：
```
python3 -m venv venv
source venv/bin/activate
pip install flask
```
在 Azure Cloud Shell 中运行以下命令以创建新 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，在 macOS 上按 Command+S 和 Command+Q。
要将应用程序部署到 Azure，需要将为其创建的应用程序要求列表保存在 requirements.txt 文件中。为此，请运行以下命令：
```
pip freeze > requirements.txt
```

（可选）测试 Web 应用

当应用程序运行时，可在 Azure 中本地测试它。

在新的浏览器标签页 https://shell.azure.com/ 中打开第二个命令 shell会话。
对于主命令 shell 会话（右侧），请运行以下命令以激活虚拟环境：
```
cd ..
source venv/bin/activate
```
对于主命令 shell 会话（右侧），请运行以下命令以启动 Web 应用程序：
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run
```
对于第二个命令 shell 会话，请运行以下命令以浏览到 Web 应用程序：
```
curl http://127.0.0.1:5000/
```
你应会获得以下 HTML 输出：
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
在主命令 shell 会话中，按 Ctrl+C 以退出 Web 应用，然后关闭辅助 Azure Cloud Shell。

继续