Упражнение. Написание кода для реализации веб-приложения

  • 5 мин

В этом уроке вы создадите код для начального веб-приложения с помощью средств разработчика.

Создание веб-проекта

В основе средств .NET CLI лежит программа командной строки dotnet. С помощью этой команды вы создадите новый веб-проект ASP.NET Core.

Выполните следующую команду, чтобы создать новое приложение ASP.NET Core Model-View Cotroller (MVC) с именем BestBikeApp:

dotnet new mvc --name BestBikeApp

Команда создает новую папку с именем BestBikeApp для хранения проекта.

Дополнительное тестирование веб-приложения

чтобы протестировать приложение локально в Azure. Для этого выполните следующие действия.

  1. Выполните следующие команды, чтобы создать и запустить веб-приложение в фоновом режиме:

    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. Выполните следующую команду, чтобы перейти к веб-приложению, заменив <порт портом> , указанным на последнем шаге.

    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>

Чтобы создать начальное веб-приложение, мы используем Maven, обычно используемое средство управления проектами и сборки для приложений Java. Мы используем maven-archetype-webapp шаблон для создания кода для нашего веб-приложения.

  1. Выполните следующие команды в Azure Cloud Shell, чтобы создать новое веб-приложение:

    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. После завершения выполнения команды выполните следующие команды, чтобы открыть целевой каталог и перечислить его содержимое:

    cd target
ls

Теперь у вас есть файл, который helloworld.war называется пакетом веб-приложения, который мы будем развертывать в Служба приложений.

Чтобы создать начальное веб-приложение Node.js, мы используем диспетчер пакетов узла (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

Дополнительное тестирование веб-приложения

При запуске веб-приложения helloworld можно проверить, выполняется ли оно локально, открыв второй сеанс командной оболочки.

  1. Откройте новую вкладку браузера и перейдите по URL-адресу https://shell.azure.com/.

  2. Из основного сеанса командной оболочки выполните следующие команды, чтобы запустить веб-приложение в фоновом режиме:

    cd ~/helloworld
npm start &

    Вы должны получить выходные данные, как показано в следующем примере:

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

Server running at http://localhost:1337

    В выходных данных запишите значение числа <>процесса.

  3. В том же сеансе Cloud Shell выполните следующую команду, чтобы перейти к веб-приложению.

    curl -kL http://localhost:1337/

    Вы должны увидеть следующие выходные данные:

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

  4. Используя <номер> процесса, который вы указали ранее, остановите узел:

    kill <process-number>

Чтобы создать начальное веб-приложение, мы используем платформу веб-приложений Flask.

  1. Выполните следующие команды в Azure Cloud Shell, чтобы настроить виртуальную среду и установить Flask в профиле:

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

  2. Выполните следующие команды, чтобы создать и переключиться в новый каталог веб-приложения:

    mkdir ~/BestBikeApp
cd ~/BestBikeApp

  3. Создайте файл с именем application.py с базовым HTML-ответом:

    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

Дополнительное тестирование веб-приложения

Вы можете протестировать приложение локально в Azure во время его работы.

  1. Выполните следующие команды, чтобы запустить веб-приложение в фоновом режиме:

    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. Выполните следующую команду, чтобы перейти к веб-приложению.

    curl -kL http://localhost:5000/

    Вы должны получить следующие выходные данные HTML:

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

  3. Используя <номер> процесса, который вы указали ранее, остановите Flask:

    kill <process-number>