Упражнение. Написание кода для реализации веб-приложения
В этом уроке вы создадите код для начального веб-приложения с помощью средств разработчика.
Создание веб-проекта
В основе средств .NET CLI лежит программа командной строки dotnet
. С помощью этой команды вы создадите веб-проект ASP.NET Core.
Сначала давайте установим версию dotnet
8.0 в Cloud Shell. В этом упражнении мы будем использовать пакет SDK версии 3.1.102.
Выполните следующие команды справа, чтобы скачать и установить 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
Затем выполните следующую команду, чтобы создать новое приложение MVC для ASP.NET Core с именем BestBikeApp:
dotnet new mvc --name BestBikeApp
Команда создаст папку с именем BestBikeApp для хранения проекта.
Дополнительное тестирование веб-приложения
Откройте второй сеанс командной оболочки, перейдя на https://shell.azure.com/ новую вкладку. Вы можете протестировать приложение локально в Azure. Для этого выполните следующие действия.
В основном сеансе командной оболочки выполните следующие команды, чтобы собрать и запустить веб-приложение:
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.
В другом сеансе 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://video2.skills-academy.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"> © 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>
В основном сеансе командной оболочки нажмите клавиши CTRL+C , чтобы выйти из веб-приложения.
Чтобы создать начальное веб-приложение, мы будем использовать Maven, обычно используемое средство управления проектами и сборки для приложений Java. Мы будем использовать шаблон maven-archetype-webapp
для создания кода для веб-приложения.
Выполните следующие команды в Azure Cloud Shell, чтобы создать новое веб-приложение:
cd ~ mvn archetype:generate -DgroupId=example.demo -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4
Теперь выполните эти команды, чтобы изменить каталог нового приложения helloworld и упаковать приложение для развертывания:
cd helloworld mvn package
После завершения выполнения команды выполните следующие команды, чтобы открыть целевой каталог и перечислить его содержимое:
cd target ls
У вас будет указанный helloworld.war
файл. Это пакет веб-приложения, которое мы развернем в службе приложений.
Для создания начального веб-приложения Node.js мы будем использовать диспетчер пакетов Node (npm
) вместе с кодом JavaScript для запуска обработки фактической веб-страницы.
Выполните следующие команды в Azure Cloud Shell, чтобы создать новое
package.json
приложение Node.js:cd ~ mkdir helloworld cd helloworld npm init -y
При этом создается новый package.json
файл в текущей папке. При вводе ls
в окно терминала его следует найти в текущей папке. Нам понадобится файл JavaScript для выполнения логики нашего веб-сайта. Так как это просто базовый пример, нам потребуется только один файл: index.js
Выполните следующую команду в терминале, чтобы создать файл:
touch index.js
Теперь нужно внести несколько изменений в оба файла. Выполните следующую команду в терминале, чтобы открыть интерактивный редактор:
code .
package.json
Выберите файл и внесите следующие измененияscripts
в раздел, чтобы использовать Node.js для запуска веб-приложения:{ "name": "helloworld", ... "scripts": { "start": "node index.js" }, ... }
Сохраните файл, выбрав меню ..., или нажмите клавиши CTRL+S в Windows и Linux или Command+S в macOS.
Внимание
При редактировании файла в редакторе обязательно сохраните его, выбрав меню ... в правом верхнем углу редактора или нажав клавиши CTRL+S в Windows и Linux или Command+S в macOS. Чтобы выйти из редактора, нажмите клавиши CTRL+Q в Windows и Linux или щелкните правый верхний угол редактора и нажмите кнопку "Выйти " в MacOS.
Переключитесь на файл
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}`);
Сохраните файл и закройте редактор, выбрав значок ... в правом верхнем углу и выбрав "Сохранить и закрыть редактор" в контекстном меню или с помощью клавиш ctrl+S и CTRL+Q в Windows и Linux.
Дополнительное тестирование веб-приложения
При запуске веб-приложения helloworld можно проверить, выполняется ли оно локально, открыв второй сеанс командной оболочки.
Откройте новую вкладку браузера и перейдите по URL-адресу https://shell.azure.com/.
В основном сеансе командной оболочки выполните следующие команды, чтобы запустить веб-приложение:
cd ~/helloworld npm start
В дополнительном сеансе командной оболочки выполните следующую команду, чтобы перейти к веб-приложению:
curl http://127.0.0.1:1337/
Вы должны увидеть следующие выходные данные:
<html><body><h1>Hello World!</h1></body></html>
В сеансе основной командной оболочки нажмите клавиши CTRL+C , чтобы выйти из веб-приложения, а затем закройте вторую вкладку браузера сеансов оболочки.
Чтобы создать начальное веб-приложение, мы будем использовать платформу веб-приложений Flask.
Выполните следующие команды в Azure Cloud Shell, чтобы настроить виртуальную среду и установить Flask в профиле:
python3 -m venv venv source venv/bin/activate pip install flask
Выполните следующие команды, чтобы создать и переключиться в новый каталог веб-приложения:
mkdir ~/BestBikeApp cd ~/BestBikeApp
Создайте новый файл для веб-приложения, открыв application.py в интерактивном редакторе Python:
code application.py
Скопируйте и вставьте следующий код Python, чтобы создать основную функциональность веб-приложения:
from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"
Сохраните файл и закройте редактор, выбрав меню ... в правом верхнем углу, а затем> нажмите клавиши CTRL+S и CTRL+Q в Windows и Linux.
Чтобы развернуть приложение в Azure, необходимо сохранить список требований к приложениям в файле requirements.txt. Для этого выполните следующую команду:
pip freeze > requirements.txt
Дополнительное тестирование веб-приложения
Вы можете протестировать приложение локально в Azure во время его работы.
Откройте второй сеанс командной оболочки в новой вкладке браузера https://shell.azure.com/.
В основном сеансе командной оболочки (справа) выполните следующие команды, чтобы активировать виртуальную среду:
cd .. source venv/bin/activate
Из основного сеанса командной оболочки (справа) выполните следующие команды, чтобы запустить веб-приложение:
cd ~/BestBikeApp export FLASK_APP=application.py flask run
В дополнительном сеансе командной оболочки выполните следующую команду, чтобы перейти к веб-приложению:
curl http://127.0.0.1:5000/
Вы должны получить следующие выходные данные HTML:
<html><body><h1>Hello Best Bike App!</h1></body></html>
В сеансе основной командной оболочки нажмите клавиши CTRL+C , чтобы выйти из веб-приложения, а затем закройте дополнительный azure Cloud Shell.