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

  • 5 分钟

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

创建新的 Web 项目

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

运行以下命令，创建一个名为“BestBikeApp”的新 ASP.NET Core 模型-视图-控制器 (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

    在输出中，记下 <process-number> 和 <port> 的值。

  2. 运行以下命令以浏览到你的 Web 应用程序，将 <port> 替换为上一步中记录的端口。

    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. 使用前面记下的 <process-number>，停止 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 的文件，该文件是我们要部署到应用服务的 Web 应用程序包。

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

  1. 在终端中运行以下命令来创建新的 package.json 文件，该文件用于描述我们的 Node.js 应用程序：

    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 应用时，可以通过打开另一个命令 shell 会话来验证它是否在本地运行。

  1. 在新的浏览器选项卡中，浏览到 https://shell.azure.com/。

  2. 在你的主命令 shell 会话中，在后台运行以下命令以启动你的 Web 应用程序：

    cd ~/helloworld
npm start &

    你应该获得类似以下示例的输出：

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

Server running at http://localhost:1337

    在输出中，记下 <process-number> 的值。

  3. 在同一个 Cloud Shell 会话中，运行以下命令以浏览到你的 Web 应用程序。

    curl -kL http://localhost:1337/

    应会收到以下输出：

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

  4. 使用前面记下的 <process-number>，停止 node：

    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

    在输出中，记下 <process-number> 的值。 由于进程在后台运行，因此无法使用 CTRL+C 退出。 你需要使用它的进程编号来停止它。

  2. 运行以下命令以浏览到你的 Web 应用程序。

    curl -kL http://localhost:5000/

    你应会获得以下 HTML 输出：

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

  3. 使用前面记下的 <process-number>，停止 Flask：

    kill <process-number>