练习 - 编写代码以实现 Web 应用

已完成

本单元将使用开发人员工具为入门 Web 应用创建代码。

创建新的 Web 项目

.NET CLI 工具的核心是 dotnet 命令行工具。 使用此命令创建新的 ASP.NET Core Web 项目。

首先,让我们将 dotnet 的适当版本安装到 Cloud Shell 中。 在本练习中,我们将使用 SDK 版本 3.1.102。

  1. 在右侧的 Azure Cloud Shell 中运行以下命令进行安装。

    wget -q -O - https://dot.net/v1/dotnet-install.sh | bash -s -- --version 3.1.102
    export PATH="~/.dotnet:$PATH"
    echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc
    
  2. 接下来,运行以下命令来新建一个名为“BestBikeApp”的 ASP.NET Core MVC 应用程序。

    dotnet new mvc --name BestBikeApp
    

此命令会新建一个名为“BestBikeApp”的新文件夹来存储你的项目。

(可选)测试 Web 应用

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

  1. 对于主命令 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 上运行并进行侦听。

  2. 对于第二个命令 shell 会话,请运行以下命令以浏览到 Web 应用程序。

    curl -kL http://127.0.0.1:5000/
    

    应可看到显示了一些 HTML。

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

为了创建入门 Web 应用,我们使用 Maven,它是一种适用于 Java 应用的常用项目管理和生成工具。 我们将使用 maven-archetype-webapp 模板生成 Web 应用程序代码。

  1. 立即在 Cloud Shell 中运行以下命令以创建新的 Web 应用。

    cd ~
    mvn archetype:generate -DgroupId=example.demo -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp
    
  2. 接下来,请运行这些命令来更改为新的“helloworld”应用程序目录,并打包应用程序进行部署:

    cd helloworld
    mvn package
    
  3. 命令完成运行后,运行下述命令以打开“target”目录并列出其内容。

    cd target
    ls
    

你将看到一个名为 helloworld.war 的文件列出。 这是我们将部署到应用服务的 Web 应用程序包。

为了创建入门 Node.js Web 应用,我们使用节点包管理器 (npm) 和一些 JavaScript 代码来运行实际的网页处理。

  1. 在 Azure Cloud Shell 中运行以下命令来创建新的 package.json,用于描述我们的 Node.js 应用程序。

    cd ~
    mkdir helloworld
    cd helloworld
    npm init -y
    

这将在当前文件夹中创建新的 package.json 文件。 如果在终端窗口中输入 ls,应可在当前文件夹中看到它。 我们需要一个 JavaScript 文件来运行网站逻辑。 由于这只是一个基本示例,所以我们只需要一个文件,即 index.js

  1. 在终端中运行以下命令以创建该文件。

    touch index.js
    
  2. 现在我们必须对这两个文件进行少量编辑。 在终端中运行以下命令以打开交互式编辑器。

    code .
    
  3. 选择 package.json 文件并对 scripts 部分进行以下编辑,以便使用 Node.js 启动 Web 应用。

    {
      "name": "helloworld",
      ...
      "scripts": {
        "start": "node index.js"
      },
      ...
    }
    
  4. 通过选择“...”菜单或按快捷键(Windows 和 Linux 上为 Ctrl+S,macOS 上为 Command+S)保存文件。

重要

每次在编辑器中将代码粘贴到文件或更改文件中的代码后,请务必通过选择“...”菜单或按快捷键(Windows 和 Linux 上为 Ctrl+S;macOS 上为 Command+S)进行保存。 若要退出编辑器,请在 Windows Linux 上按 Ctrl+Q,在 macOS 上按 Command+Q

  1. 切换到 index.js 文件,并向其添加以下内容。 这是一个小型 Node.js 程序,它始终使用“Hello World!”进行响应 总是以“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}`);
    
  2. 保存文件并退出编辑器。 通过选择右上角的“...”菜单,然后选择“保存” > “关闭编辑器”来保存文件并退出编辑器,另一种方法是在 Windows 和 Linux 上按 Ctrl+SCtrl+Q,在 macOS 上按 Command+SCommand+Q

(可选)测试 Web 应用

如果打开第二个命令 shell 会话(例如浏览到 https://shell.azure.com/),则可在 Azure 中本地测试应用程序。 为此,请执行下列步骤。

  1. 对于主命令 shell 会话,请运行以下命令以启动 Web 应用程序。

    cd ~/helloworld
    npm start
    
  2. 对于第二个命令 shell 会话,请运行以下命令以浏览到 Web 应用程序。

    curl http://127.0.0.1:1337/
    

    应看到以下内容。

    <html><body><h1>Hello World!</h1></body></html>
    
  3. 在主命令 shell 会话中,按 Ctrl + C 退出 Web 应用。

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

  1. 运行以下命令来设置虚拟环境,并在配置文件中安装 Flask。

    python3 -m venv venv
    source venv/bin/activate
    pip install flask
    
  2. 在 Azure Cloud Shell 中运行以下命令以创建新 Web 应用的目录。

    mkdir ~/BestBikeApp
    cd ~/BestBikeApp
    
  3. 打开交互式编辑器,为 Web 应用创建和编辑 application.py。

    code application.py
    
  4. 复制并粘贴以下 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"
    
  5. 保存文件并退出编辑器。 通过选择右上角的“...”菜单,然后选择“保存” > “关闭编辑器”来保存文件并退出编辑器,另一种方法是在 Windows 和 Linux 上按 Ctrl+SCtrl+Q,在 macOS 上按 Command+SCommand+Q

  6. 要将应用程序部署到 Azure,需要将应用程序要求列表保存在 requirements.txt 文件中。 为此,请运行以下命令。

    pip freeze > requirements.txt
    

(可选)测试 Web 应用

如果打开第二个命令 shell 会话(例如浏览到 https://shell.azure.com/),则可在 Azure 中本地测试应用程序。 为此,请执行下列步骤。

  1. 对于主命令 shell 会话,请运行以下命令以启动 Web 应用程序。

    cd ~/BestBikeApp
    export FLASK_APP=application.py
    flask run
    
  2. 对于第二个命令 shell 会话,请运行以下命令以浏览到 Web 应用程序。

    curl http://127.0.0.1:5000/
    

    你应会看到显示了以下行。

    <html><body><h1>Hello Best Bike App!</h1></body></html>
    
  3. 在主命令 shell 会话中,按 Ctrl + C 退出 Web 应用。