Предыдущий

Следующая

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

Завершено

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

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

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

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

1. Выполните следующие команды в 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
   

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

   dotnet new mvc --name BestBikeApp
   

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

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

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

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

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

   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>
   

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.

Продолжить