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

  • 5 мин

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

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

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

Сначала давайте установим версию dotnet 8.0 в Cloud Shell. В этом упражнении мы будем использовать пакет SDK версии 3.1.102.

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

    wget https://dot.net/v1/dotnet-install.sh -O dotnet-install.sh
chmod +x ./dotnet-install.sh
./dotnet-install.sh --channel 8.0
export PATH="~/.dotnet:$PATH"
echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc

  2. Затем выполните следующую команду, чтобы создать новое приложение MVC для ASP.NET Core с именем BestBikeApp:

    dotnet new mvc --name BestBikeApp

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

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

Откройте второй сеанс командной оболочки, перейдя на https://shell.azure.com/ новую вкладку. Вы можете протестировать приложение локально в Azure. Для этого выполните следующие действия.

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

    cd BestBikeApp
dotnet run

    Вы должны получить выходные данные, как показано ниже.

    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:5022
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

    Выходные данные описывают ситуацию после запуска приложения: приложение выполняется и прослушивается через порт 5022.

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

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

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

  2. Теперь выполните эти команды, чтобы изменить каталог нового приложения helloworld и упаковать приложение для развертывания:

    cd helloworld
mvn package

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

    cd target
ls

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

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

    {
  "name": "helloworld",
  ...
  "scripts": {
    "start": "node index.js"
  },
  ...
}

  4. Сохраните файл, выбрав меню ..., или нажмите клавиши CTRL+S в Windows и Linux или Command+S в macOS.

    Внимание

    При редактировании файла в редакторе обязательно сохраните его, выбрав меню ... в правом верхнем углу редактора или нажав клавиши CTRL+S в Windows и Linux или Command+S в macOS. Чтобы выйти из редактора, нажмите клавиши CTRL+Q в Windows и Linux или щелкните правый верхний угол редактора и нажмите кнопку "Выйти " в MacOS.

  5. Переключитесь на файл index.js и добавьте в него следующее содержимое. Это простая программа Node.js, которая всегда отвечает "Hello World!" при отправке запроса GET к серверу.

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

  6. Сохраните файл и закройте редактор, выбрав значок ... в правом верхнем углу и выбрав "Сохранить и закрыть редактор" в контекстном меню или с помощью клавиш ctrl+S и CTRL+Q в Windows и Linux.

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

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

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

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

    cd ~/helloworld
npm start

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

    curl http://127.0.0.1:1337/

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

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

  4. В сеансе основной командной оболочки нажмите клавиши CTRL+C , чтобы выйти из веб-приложения, а затем закройте вторую вкладку браузера сеансов оболочки.

Чтобы создать начальное веб-приложение, мы будем использовать платформу веб-приложений 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 в интерактивном редакторе Python:

    code application.py

  4. Скопируйте и вставьте следующий код Python, чтобы создать основную функциональность веб-приложения:

    from flask import Flask
app = Flask(__name__)

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

  5. Сохраните файл и закройте редактор, выбрав меню ... в правом верхнем углу, а затем> нажмите клавиши CTRL+S и CTRL+Q в Windows и Linux.

  6. Чтобы развернуть приложение в Azure, необходимо сохранить список требований к приложениям в файле requirements.txt. Для этого выполните следующую команду:

    pip freeze > requirements.txt

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

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

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

  2. В основном сеансе командной оболочки (справа) выполните следующие команды, чтобы активировать виртуальную среду:

    cd ..
source venv/bin/activate

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

    cd ~/BestBikeApp
export FLASK_APP=application.py
flask run

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

    curl http://127.0.0.1:5000/

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

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

  5. В сеансе основной командной оболочки нажмите клавиши CTRL+C , чтобы выйти из веб-приложения, а затем закройте дополнительный azure Cloud Shell.