Создание веб-приложений Node.js в AzureCreate a Node.js web app in Azure

Чтобы начать работу со Службой приложений Azure, создайте локально приложение Node.js/Express с помощью Visual Studio Code, а затем разверните его в облаке.Get started with Azure App Service by creating a Node.js/Express app locally using Visual Studio Code and then deploying the app to the cloud. Так как вы используете бесплатный уровень Службы приложений, для прохождения этого краткого руководства никакие затраты не требуются.Because you use a free App Service tier, you incur no costs to complete this quickstart.

Предварительные требованияPrerequisites

Клонирование и запуск локального приложения Node.jsClone and run a local Node.js application

  1. На локальном компьютере откройте терминал и выполните клонирование примера репозитория:On your local computer, open a terminal and clone the sample repository:

    git clone https://github.com/Azure-Samples/nodejs-docs-hello-world
    
  2. Перейдите в папку нового приложения:Navigate into the new app folder:

    cd nodejs-docs-hello-world
    
  3. Запустите приложение, чтобы проверить его локально:Start the app to test it locally:

    npm start
    
  4. Откройте веб-браузер и перейдите по адресу http://localhost:1337.Open your browser and navigate to http://localhost:1337. В браузере должно отобразиться сообщение "Hello World!".The browser should display "Hello World!".

  5. Нажмите Ctrl+C в терминале, чтобы остановить работу сервера.Press Ctrl+C in the terminal to stop the server.

Развертывание приложения в AzureDeploy the app to Azure

В этом разделе вы развернете приложение Node.js в Azure с помощью VS Code и расширения Службы приложений Azure.In this section, you deploy your Node.js app to Azure using VS Code and the Azure App Service extension.

  1. В окне терминала убедитесь, что вы находитесь в папке nodejs-docs-hello-world , а затем запустите Visual Studio Code с помощью следующей команды:In the terminal, make sure you're in the nodejs-docs-hello-world folder, then start Visual Studio Code with the following command:

    code .
    
  2. На панели действий VS Code выберите эмблему Azure, чтобы отобразить обозреватель СЛУЖБА ПРИЛОЖЕНИЙ AZURE.In the VS Code activity bar, select the Azure logo to show the AZURE APP SERVICE explorer. Выберите Войти в Azure... и следуйте инструкциям.Select Sign in to Azure... and follow the instructions. (Если произойдут ошибки, см. раздел Устранение неполадок со входом в Azure ниже.) После входа в обозревателе должно отобразиться имя вашей подписки Azure.(See Troubleshooting Azure sign-in below if you run into errors.) Once signed in, the explorer should show the name of your Azure subscription.

    Вход в Azure

  3. В обозревателе СЛУЖБА ПРИЛОЖЕНИЙ AZURE в VS Code щелкните значок с направленной вверх синей стрелкой, чтобы развернуть приложение в Azure.In the AZURE APP SERVICE explorer of VS Code, select the blue up arrow icon to deploy your app to Azure. (Ту же команду можно также вызвать из палитры команд ( Ctrl+Shift+P ). Для этого следует ввести "развернуть в веб-приложении" и выбрать пункт Служба приложений Azure: развертывание в веб-приложении ).(You can also invoke the same command from the Command Palette ( Ctrl+Shift+P ) by typing 'deploy to web app' and choosing Azure App Service: Deploy to Web App ).

    Снимок экрана Службы приложений Azure в VS Code с выбранным синим значком со стрелкой.

  4. Выберите папку nodejs-docs-hello-world.Choose the nodejs-docs-hello-world folder.

  5. Выберите вариант создания на основе операционной системы, на которую требуется развернуть:Choose a creation option based on the operating system to which you want to deploy:

    • Linux: Щелкните Создание нового веб-приложенияLinux: Choose Create new Web App
    • Windows: Щелкните Создание нового веб-приложения... ДополнительноWindows: Choose Create new Web App... Advanced
  6. Введите глобально уникальное имя веб-приложения и нажмите клавишу ВВОД.Type a globally unique name for your web app and press Enter. Имя должно быть уникальным во всех системах Azure и состоять только из буквенно-цифровых символов ("A-Z", "a-z" и "0-9") и дефисов ("-").The name must be unique across all of Azure and use only alphanumeric characters ('A-Z', 'a-z', and '0-9') and hyphens ('-').

  7. Если вы намерены использовать Linux, выберите версию Node.js при появлении соответствующего запроса.If targeting Linux, select a Node.js version when prompted. Рекомендуется использовать версию LTS.An LTS version is recommended.

  8. Если вы намерены использовать Windows, следуйте дополнительным запросам:If targeting Windows, follow the additional prompts:

    1. Выберите Создать группу ресурсов , а затем введите имя для группы ресурсов, например AppServiceQS-rg.Select Create a new resource group , then enter a name for the resource group, such as AppServiceQS-rg.
    2. Выберите Windows в поле операционной системы.Select Windows for the operating system.
    3. Выберите Создать новый план службы приложений , введите имя плана (например, AppServiceQS-plan), а затем выберите F1 Free для ценовой категории.Select Create new App Service plan , then enter a name for the plan (such as AppServiceQS-plan), then select F1 Free for the pricing tier.
    4. Выберите Пропустить при появлении запроса о Application Insights.Choose Skip for now when prompted about Application Insights.
    5. Выберите регион, расположенный рядом с вами или рядом с ресурсами, к которым вы хотите получить доступ.Choose a region near you or near resources you wish to access.
  9. После ответа на все запросы, в VS Code отображаются ресурсы Azure, созданные для вашего приложения.After you respond to all the prompts, VS Code shows the Azure resources that are being created for your app in its notification popup.

    При развертывании в Linux, нажмите Да , когда появится запрос на обновление конфигурации, чтобы выполнить npm install на целевом сервере Linux.When deploying to Linux, select Yes when prompted to update your configuration to run npm install on the target Linux server.

    Запрос на обновление конфигурации на целевом сервере Linux

  10. Выберите Да при появлении запроса Always deploy the workspace "nodejs-docs-hello-world" to (app name)" (Всегда развертывайте рабочую область "nodejs-docs-hello-world" в (имя приложения)).Select Yes when prompted with Always deploy the workspace "nodejs-docs-hello-world" to (app name)". Если выбрать Да , VS Code будет в дальнейшем автоматически выполнять развертывания в то же веб-приложение Службы приложений.Selecting Yes tells VS Code to automatically target the same App Service Web App with subsequent deployments.

  11. При развертывании в Linux выберите Обзор веб-сайта в командной строке, чтобы просмотреть новое развернутое веб-приложение после завершения развертывания.If deploying to Linux, select Browse Website in the prompt to view your freshly deployed web app once deployment is complete. В браузере должно отобразиться сообщение "Hello World!".The browser should display "Hello World!"

  12. При развертывании в Windows необходимо сначала задать номер версии Node.js для веб-приложения:If deploying to Windows, you must first set the Node.js version number for the web app:

    1. В VS Code разверните узел для новой службы приложений, щелкните правой кнопкой мыши Параметры приложения и выберите Добавить новый параметр... :In VS Code, expand the node for the new app service, right-click Application Settings , and select Add New Setting... :

      Команда добавления параметра приложения

    2. Введите WEBSITE_NODE_DEFAULT_VERSION для ключа параметра.Enter WEBSITE_NODE_DEFAULT_VERSION for the setting key.

    3. Введите 10.15.2 для значения параметра.Enter 10.15.2 for the setting value.

    4. Щелкните правой кнопкой мыши узел службы приложений и выберите Перезапустить.Right-click the node for the app service and select Restart

      Команда перезапуска службы приложений

    5. Еще раз щелкните правой кнопкой мыши узел для службы приложений и выберите Обзор веб-сайта.Right-click the node for the app service once more and select Browse Website.

Устранение неполадок со входом в AzureTroubleshooting Azure sign-in

Если при входе в Azure отображается сообщение об ошибке "Не удается найти подписку с именем [идентификатор подписки]" , возможно, вы находитесь за прокси-сервером и не можете связаться с API Azure.If you see the error "Cannot find subscription with name [subscription ID]" when signing into Azure, it might be because you're behind a proxy and unable to reach the Azure API. Укажите в переменных среды HTTP_PROXY и HTTPS_PROXY параметры прокси-сервера, используя команду терминала export.Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal using export.

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

Если настройка переменных среды не устранит проблему, свяжитесь с нами, нажав кнопку I ran into an issue (У меня есть проблема) выше.If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button above.

Обновление приложенияUpdate the app

Вы можете развернуть изменения в это приложение. Для этого внесите изменения в VS Code, сохраните файлы, а затем повторите тот же процесс, но выберите существующее приложение вместо создания нового.You can deploy changes to this app by making edits in VS Code, saving your files, and then using the same process as before only choosing the existing app rather than creating a new one.

Просмотр журналовViewing Logs

Выходные данные журнала (вызовы console.log) из приложения непосредственно в окне вывода VS Code.You can view log output (calls to console.log) from the app directly in the VS Code output window.

  1. В обозревателе СЛУЖБЫ ПРИЛОЖЕНИЙ AZURE щелкните узел приложения правой кнопкой мыши и выберите Start Streaming Logs (Начать потоковую передачу журналов).In the AZURE APP SERVICE explorer, right-click the app node and choose Start Streaming Logs.

    Запуск потоковой передачи журналов

  2. В запросе подтвердите намерение включить ведение журнала и перезапустить приложение.When prompted, choose to enable logging and restart the application. После перезапуска приложения откроется окно выходных данных VS Code, подключенное к потоку журнала.Once the app is restarted, the VS Code output window opens with a connection to the log stream.

    Снимок экрана с запросом Visual Studio Code на включение ведения журнала и перезапуск приложения с выбранной кнопкой _OL_QUOTE_PLACEHOLDER_Да_OL_QUOTE_PLACEHOLDER_.

  3. Через несколько секунд в окне вывода появится сообщение о том, что вы подключены к службе потоковой передачи журналов.After a few seconds, the output window shows a message indicating that you're connected to the log-streaming service. Обновив страницу в браузере, можно создать дополнительные действия вывода.You can generate more output activity by refreshing the page in the browser.

     Connecting to log stream...
     2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
     Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
     

Дальнейшие действияNext steps

Поздравляем, вы успешно завершили работу с этим руководством!Congratulations, you've successfully completed this quickstart!

Ознакомьтесь с другими расширениями Azure.Check out the other Azure extensions.

Вы можете установить их все сразу в составе пакета расширений для узла Azure.Or get them all by installing the Node Pack for Azure extension pack.

Предварительные требованияPrerequisites

Если у вас нет учетной записи Azure , зарегистрируйтесь сегодня и получите бесплатную учетную запись с кредитами Azure на сумму $200, которые позволят проверить любое сочетание служб.If you don't have an Azure account, sign up today for a free account with $200 in Azure credits to try out any combination of services.

Вам нужно установить Visual Studio Code, а также Node.js и npm, диспетчер пакетов для Node.js.You need Visual Studio Code installed along with Node.js and npm, the Node.js package manager.

Кроме того, потребуется расширение Службы приложений Azure, которое позволяет создавать, администрировать и развертывать веб-приложения Linux в Azure в режиме PaaS (платформа как услуга).You will also need to install the Azure App Service extension, which you can use to create, manage, and deploy Linux Web Apps on the Azure Platform as a Service (PaaS).

ВходSign in

После установки расширения войдите в учетную запись Azure.Once the extension is installed, log into your Azure account. На панели действий выберите эмблему Azure, чтобы отобразить обозреватель Служба приложений Azure.In the Activity Bar, select the Azure logo to show the AZURE APP SERVICE explorer. Выберите Войти в Azure... и следуйте инструкциям.Select Sign in to Azure... and follow the instructions.

Вход в Azure

Устранение неполадокTroubleshooting

Если отображается сообщение об ошибке "Не удается найти подписку с именем [идентификатор подписки]" , возможно вы находитесь за прокси-сервером и не можете связаться с API Azure.If you see the error "Cannot find subscription with name [subscription ID]" , it might be because you're behind a proxy and unable to reach the Azure API. Укажите в переменных среды HTTP_PROXY и HTTPS_PROXY параметры прокси-сервера, используя команду терминала export.Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal using export.

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

Если настройка переменных среды не устранит проблему, свяжитесь с нами, нажав кнопку I ran into an issue (У меня есть проблема) ниже.If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button below.

Проверка предварительных условийPrerequisite check

Прежде чем продолжить, проверьте наличие и правильность настройки всех обязательных компонентов.Before you continue, ensure that you have all the prerequisites installed and configured.

В VS Code должна отображаться следующая информация: адрес электронной почты Azure в строке состояния и подписка в обозревателе Службы приложений Azure.In VS Code, you should see your Azure email address in the Status Bar and your subscription in the AZURE APP SERVICE explorer.

Создание приложения Node.jsCreate your Node.js application

Теперь создайте приложение Node. js, которое можно развернуть в облаке.Next, create a Node.js application that can be deployed to the Cloud. В этом кратком руководстве используется генератор приложений для быстрого создания шаблона приложения с помощью терминала.This quickstart uses an application generator to quickly scaffold out the application from a terminal.

Совет

Если вы уже завершили работу с учебником по Node.js, можно сразу перейти к разделу о развертывании в Azure.If you have already completed the Node.js tutorial, you can skip ahead to Deploy to Azure.

Подготовка нового приложения с помощью генератора ExpressScaffold a new application with the Express Generator

Express — это популярная платформа для создания и запуска приложений Node. js.Express is a popular framework for building and running Node.js applications. Вы можете создать новое приложение Express с помощью средства Генератор Express.You can scaffold (create) a new Express application using the Express Generator tool. Генератор Express поставляется как модуль npm, и его можно непосредственно запустить (без установки) с помощью программы командной строки npm npx.The Express Generator is shipped as an npm module and can be run directly (without installation) by using the npm command-line tool npx.

npx express-generator myExpressApp --view pug --git

Параметры --view pug --git сообщают генератору, что он должен использовать обработчик шаблонов pug (ранее известный под именем jade) и создать файл с именем .gitignore.The --view pug --git parameters tell the generator to use the pug template engine (formerly known as jade) and to create a .gitignore file.

Чтобы установить все зависимости приложения, перейдите в новую папку и выполните команду npm install.To install all of the application's dependencies, go to the new folder and run npm install.

cd myExpressApp
npm install

Выполнение приложенияRun the application

Теперь убедитесь, что приложение успешно выполняется.Next, ensure that the application runs. Запустите приложение из терминала с помощью команды npm start, чтобы начать работу сервера.From the terminal, start the application using the npm start command to start the server.

npm start

Теперь откройте в браузере страницу http://localhost:3000, которая должна выглядеть примерно так:Now, open your browser and navigate to http://localhost:3000, where you should see something like this:

Выполнение приложения Express

Развертывание в AzureDeploy to Azure

В этом разделе вы развернете приложение Node.js с помощью VS Code и расширения Службы приложений Azure.In this section, you deploy your Node.js app using VS Code and the Azure App Service extension. В этом кратком руководстве используется самая простая модель развертывания: приложение в сжатом виде развертывается как веб-приложение Azure на платформе Linux.This quickstart uses the most basic deployment model where your app is zipped and deployed to an Azure Web App on Linux.

Развертывание с помощью Службы приложений AzureDeploy using Azure App Service

Сначала откройте папку приложения в VS Code.First, open your application folder in VS Code.

code .

В обозревателе Служба приложений Azure щелкните значок с направленной вверх синей стрелкой, чтобы развернуть приложение в Azure.In the AZURE APP SERVICE explorer, select the blue up arrow icon to deploy your app to Azure.

Снимок экрана меню Службы приложений Azure в Visual Studio Code с выбранной синей стрелкой развертывания.

Совет

Также развертывание можно выполнить из Палитры команд (Ctrl+Shift+P), введя строку "Deploy to Web App" (развернуть в веб-приложение) и выполнив команду Службы приложений Azure Azure App Service: Deploy to Web App (Служба приложений Azure. Развертывание в виде веб-приложения).You can also deploy from the Command Palette (CTRL + SHIFT + P) by typing 'deploy to web app' and running the Azure App Service: Deploy to Web App command.

  1. Выберите каталог myExpressApp, который у вас уже открыт.Choose the directory that you currently have open, myExpressApp.

  2. Выберите Create new Web App (Создать веб-приложение), которое по умолчанию развертывается в Службе приложений в Linux.Choose Create new Web App , which deploys to App Service on Linux by default.

  3. Введите глобально уникальное имя веб-приложения и нажмите клавишу ВВОД.Type a globally unique name for your Web App and press ENTER. В имени приложения допускаются символы 'a-z', '0-9' и '-'.Valid characters for an app name are 'a-z', '0-9', and '-'.

  4. Выберите версию Node.js. Мы рекомендуем использовать LTS.Choose your Node.js version , LTS is recommended.

    В канале уведомлений отображаются ресурсы Azure, которые создаются для вашего приложения.The notification channel shows the Azure resources that are being created for your app.

  5. Щелкните Да , когда появится запрос на обновление конфигурации, чтобы выполнить npm install на целевом сервере.Select Yes when prompted to update your configuration to run npm install on the target server. Затем приложение развертывается.Your app is then deployed.

    Снимок экрана с запросом на обновление конфигурации на целевом сервере с выбранной кнопкой _OL_QUOTE_PLACEHOLDER_Да_OL_QUOTE_PLACEHOLDER_.

  6. При запуске развертывания вам будет предложено обновить рабочую область, чтобы последующие развертывания автоматически нацеливались на то же веб-приложение Службы приложений.When the deployment starts, you're prompted to update your workspace so that later deployments will automatically target the same App Service Web App. Выберите Да , чтобы все изменения правильно применялись к приложению.Choose Yes to ensure your changes are deployed to the correct app.

    Снимок экрана с запросом на обновление рабочей области с выбранной кнопкой _OL_QUOTE_PLACEHOLDER_Да_OL_QUOTE_PLACEHOLDER_.

Совет

Убедитесь, что приложение прослушивает порт, указанный в переменной среды PORT: process.env.PORT.Be sure that your application is listening on the port provided by the PORT environment variable: process.env.PORT.

Просмотр приложения в AzureBrowse the app in Azure

По завершении развертывания щелкните Обзор веб-сайта в диалоговом окне с предложением просмотреть только что развернутое веб-приложение.Once the deployment completes, select Browse Website in the prompt to view your freshly deployed web app.

Устранение неполадокTroubleshooting

Если отображается сообщение об ошибке Вы не имеете разрешения на просмотр этого каталога пли страницы. , значит приложение не может нормально запуститься.If you see the error "You do not have permission to view this directory or page." , then the application probably failed to start correctly. Перейдите к следующему разделу и проверьте выходные данные журнала, чтобы найти и исправить ошибку.Head to the next section and view the log output to find and fix the error. Если устранить ее не удается, свяжитесь с нами, нажав кнопку I ran into an issue (У меня есть проблема) ниже.If you aren't able to fix it, contact us by selecting the I ran into an issue button below. Мы всегда рады помочь.We're happy to help!

Обновление приложенияUpdate the app

Вы можете развернуть изменения в это приложение, повторив тот же процесс и выбрав существующее приложение вместо создания нового.You can deploy changes to this app by using the same process and choosing the existing app rather than creating a new one.

Просмотр журналовViewing Logs

В этом разделе вы узнаете, как просматривать журналы (или последние записи журнала) работающего приложения Службы приложений.In this section, you learn how to view (or "tail") the logs from the running App Service app. Все вызовы console.log в этом приложении отображаются в окне выходных данных в Visual Studio Code.Any calls to console.log in the app are displayed in the output window in Visual Studio Code.

Найдите приложение в обозревателе Службы приложений Azure , щелкните его правой кнопкой мыши и выберите действие Просмотреть журналы потоковой передачи.Find the app in the AZURE APP SERVICE explorer, right-click the app, and choose View Streaming Logs.

Откроется окно выходных данных VS Code, подключенное к потоку журнала.The VS Code output window opens with a connection to the log stream.

Просмотр журналов потоковой передачи

Снимок экрана запроса Visual Studio Code на включение ведения журнала и перезапуск веб-приложения с выбранной кнопкой _OL_QUOTE_PLACEHOLDER_Да_OL_QUOTE_PLACEHOLDER_.

Через несколько секунд появится сообщение о том, что вы подключены к службе потоковой передачи журналов.After a few seconds, you'll see a message indicating that you're connected to the log-streaming service. Обновите страницу несколько раз, чтобы отобразить больше действий.Refresh the page a few times to see more activity.

2019-09-20 20:37:39.574 INFO  - Initiating warmup request to container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node
2019-09-20 20:37:55.011 INFO  - Waiting for response to warmup request for container msdocs-vscode-node_2_00ac292a. Elapsed time = 15.4373071 sec
2019-09-20 20:38:08.233 INFO  - Container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node initialized successfully and is ready to serve requests.
2019-09-20T20:38:21  Startup Request, url: /Default.cshtml, method: GET, type: request, pid: 61,1,7, SCM_SKIP_SSL_VALIDATION: 0, SCM_BIN_PATH: /opt/Kudu/bin, ScmType: None

Дальнейшие действияNext steps

Поздравляем, вы успешно завершили работу с этим руководством!Congratulations, you've successfully completed this quickstart!

Теперь ознакомьтесь с другими расширениями Azure.Next, check out the other Azure extensions.

Вы можете установить их все сразу в составе пакета расширений для узла Azure.Or get them all by installing the Node Pack for Azure extension pack.