Criar um aplicativo Web do Node.js no AzureCreate a Node.js web app in Azure

Introdução ao Serviço de Aplicativo do Azure com a criação de um aplicativo Node.js/Express localmente usando o Visual Studio Code e, em seguida, a implantação do aplicativo na nuvem.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. Como você usa uma Camada gratuita do Serviço de Aplicativo, não é gerado nenhum custo para a conclusão deste início rápido.Because you use a free App Service tier, you incur no costs to complete this quickstart.

Pré-requisitosPrerequisites

Clonar e executar um aplicativo Node.js localClone and run a local Node.js application

  1. No computador local, abra um terminal e clone o repositório de exemplo:On your local computer, open a terminal and clone the sample repository:

    git clone https://github.com/Azure-Samples/nodejs-docs-hello-world
    
  2. Navegue até a nova pasta do aplicativo:Navigate into the new app folder:

    cd nodejs-docs-hello-world
    
  3. Inicie o aplicativo para testá-lo localmente:Start the app to test it locally:

    npm start
    
  4. Abra o navegador e navegue até http://localhost:1337.Open your browser and navigate to http://localhost:1337. O navegador deverá exibir "Olá, Mundo!".The browser should display "Hello World!".

  5. Selecione CTRL+C no terminal para interromper o servidor.Press Ctrl+C in the terminal to stop the server.

Implantar o aplicativo no AzureDeploy the app to Azure

Nesta seção, você implantará o aplicativo Node.js no Azure usando o VS Code e a extensão do Serviço de Aplicativo do Azure.In this section, you deploy your Node.js app to Azure using VS Code and the Azure App Service extension.

  1. No terminal, verifique se você está na pasta nodejs-docs-hello-world e, em seguida, inicie o Visual Studio Code com o seguinte comando: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. Na barra de atividade do VS Code, selecione o logotipo do Azure para mostrar o gerenciador do SERVIÇO DE APLICATIVO DO AZURE.In the VS Code activity bar, select the Azure logo to show the AZURE APP SERVICE explorer. Selecione Entrar no Azure... e siga as instruções.Select Sign in to Azure... and follow the instructions. (Confira Solução de problemas de entrada no Azure abaixo em caso de erros.) Após a conexão, o gerenciador deverá mostrar o nome da sua assinatura do 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.

    Entrar no Azure

  3. No gerenciador do SERVIÇO DE APLICATIVO DO AZURE do VS Code, selecione o ícone de seta azul para cima para implantar o aplicativo no Azure.In the AZURE APP SERVICE explorer of VS Code, select the blue up arrow icon to deploy your app to Azure. (Invoque também o mesmo comando na paleta de comandos (CTRL+Shift+P) digitando 'implantar no aplicativo Web' e escolhendo Serviço de Aplicativo do Azure: Implantar no Aplicativo Web).(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).

    Captura de tela do serviço de Aplicativo do Azure no VS Code que mostra o ícone de seta azul selecionado.

  4. Escolha a pasta nodejs-docs-hello-world.Choose the nodejs-docs-hello-world folder.

  5. Escolha uma opção de criação com base no sistema operacional no qual você deseja implantar:Choose a creation option based on the operating system to which you want to deploy:

    • Linux: Escolha Criar Aplicativo WebLinux: Choose Create new Web App
    • Windows: Escolha Criar Aplicativo Web... AvançadoWindows: Choose Create new Web App... Advanced
  6. Digite um nome global exclusivo para o aplicativo Web e selecione Enter.Type a globally unique name for your web app and press Enter. O nome precisa ser exclusivo em todo o Azure e usar somente caracteres alfanuméricos ('A-Z', 'a-z' e '0-9') e hifens ('-').The name must be unique across all of Azure and use only alphanumeric characters ('A-Z', 'a-z', and '0-9') and hyphens ('-').

  7. Se estiver direcionando para o Linux, selecione uma versão do Node.js quando solicitado.If targeting Linux, select a Node.js version when prompted. Uma versão LTS é recomendada.An LTS version is recommended.

  8. Se o destino for o Windows, siga os avisos adicionais:If targeting Windows, follow the additional prompts:

    1. Selecione Criar um grupo de recursos e, em seguida, insira um nome para o grupo de recursos, como AppServiceQS-rg.Select Create a new resource group, then enter a name for the resource group, such as AppServiceQS-rg.
    2. Para o sistema operacional, selecione Windows.Select Windows for the operating system.
    3. Selecione Criar Plano do Serviço de Aplicativo, insira um nome para o plano (como AppServiceQS-plan) e, em seguida, selecione F1 Gratuito como o tipo de preço.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. Escolha Ignorar por enquanto o Application Insights for solicitado.Choose Skip for now when prompted about Application Insights.
    5. Escolha uma região perto de você ou perto dos recursos que deseja acessar.Choose a region near you or near resources you wish to access.
  9. Depois de responder a todos os avisos, o VS Code mostrará os recursos do Azure que estão sendo criados para o aplicativo no pop-up de notificação.After you respond to all the prompts, VS Code shows the Azure resources that are being created for your app in its notification popup.

    Na implantação no Linux, selecione Sim quando precisar atualizar a configuração para executar npm install no servidor Linux de destino.When deploying to Linux, select Yes when prompted to update your configuration to run npm install on the target Linux server.

    Aviso para atualizar a configuração no servidor Linux de destino

  10. Selecione Sim quando for exibido o aviso Sempre implantar o workspace "nodejs-docs-hello-world" em (nome do aplicativo)" .Select Yes when prompted with Always deploy the workspace "nodejs-docs-hello-world" to (app name)". A seleção da opção Sim instrui o VS Code a ter automaticamente como destino o mesmo aplicativo Web do Serviço de Aplicativo com as implantações seguintes.Selecting Yes tells VS Code to automatically target the same App Service Web App with subsequent deployments.

  11. Na implantação no Linux, selecione Procurar no Site no aviso para ver o aplicativo Web recém-implantado após a conclusão da implantação.If deploying to Linux, select Browse Website in the prompt to view your freshly deployed web app once deployment is complete. O navegador deverá exibir "Olá, Mundo!"The browser should display "Hello World!"

  12. Se estiver fazendo a implantação no Windows, primeiro, você precisará definir o número de versão do Node.js para o aplicativo Web:If deploying to Windows, you must first set the Node.js version number for the web app:

    1. No VS Code, expanda o nó do novo serviço de aplicativo, clique com o botão direito do mouse em Configurações de Aplicativo e selecione Adicionar Nova Configuração... :In VS Code, expand the node for the new app service, right-click Application Settings, and select Add New Setting...:

      Comando Adicionar configuração de aplicativo

    2. Insira WEBSITE_NODE_DEFAULT_VERSION para a chave de configuração.Enter WEBSITE_NODE_DEFAULT_VERSION for the setting key.

    3. Insira 10.15.2 para o valor da configuração.Enter 10.15.2 for the setting value.

    4. Clique com o botão direito do mouse no nó do serviço de aplicativo e selecione ReiniciarRight-click the node for the app service and select Restart

      Comando Reiniciar serviço de aplicativo

    5. Clique com o botão direito do mouse no nó do serviço de aplicativo mais uma vez e selecione Procurar no Site.Right-click the node for the app service once more and select Browse Website.

Solução de problemas de entrada no AzureTroubleshooting Azure sign-in

Se for exibido o erro "Não é possível encontrar a assinatura com o nome [ID da assinatura]" quando você entrar no Azure, isso poderá ocorrer porque talvez você esteja atrás de um proxy e não consiga acessar a API do 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. Configure as variáveis de ambiente HTTP_PROXY e HTTPS_PROXY com suas informações de proxy no seu terminal usando o 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

Se a configuração das variáveis de ambiente não corrigir o problema, entre em contato conosco selecionando o botão Encontrei um problema acima.If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button above.

Atualizar o aplicativoUpdate the app

Você pode implantar alterações nesse aplicativo fazendo edições no VS Code, salvando os arquivos e, em seguida, usando o mesmo processo que antes, escolhendo apenas o aplicativo existente, em vez de criar outro.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.

Exibir logsViewing Logs

Veja a saída de log (chamadas a console.log) no aplicativo diretamente na Janela de Saída do VS Code.You can view log output (calls to console.log) from the app directly in the VS Code output window.

  1. No gerenciador do SERVIÇO DE APLICATIVO DO AZURE, clique com o botão direito do mouse no nó do aplicativo e escolha Iniciar Streaming de Logs.In the AZURE APP SERVICE explorer, right-click the app node and choose Start Streaming Logs.

    Iniciar Streaming de Logs

  2. Quando solicitado, escolha habilitar o registro em log e reinicie o aplicativo.When prompted, choose to enable logging and restart the application. Depois que o aplicativo for reiniciado, a janela de saída do VS Code será aberta com uma conexão com o fluxo de log.Once the app is restarted, the VS Code output window opens with a connection to the log stream.

    Captura de tela do prompt do Visual Studio Code para habilitar o registro em log e reiniciar o aplicativo com o botão Sim selecionado.

  3. Após alguns segundos, a Janela de Saída mostrará uma mensagem indicando que você está conectado ao serviço de streaming de log.After a few seconds, the output window shows a message indicating that you're connected to the log-streaming service. Gere mais atividades de saída atualizando a página no navegador.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).
     

Próximas etapasNext steps

Parabéns, você concluiu com êxito este início rápido!Congratulations, you've successfully completed this quickstart!

Confira as outras extensões do Azure.Check out the other Azure extensions.

Ou obtenha todas elas instalando o pacote de extensão Pacote de Nós para Azure.Or get them all by installing the Node Pack for Azure extension pack.

Pré-requisitosPrerequisites

Se você não tiver uma conta do Azure, inscreva-se hoje mesmo para obter uma conta gratuita com US$ 200 em créditos do Azure para experimentar uma combinação de serviços.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.

É preciso que o Visual Studio Code esteja instalado junto com Node.js e npm, o gerenciador de pacotes do Node.js.You need Visual Studio Code installed along with Node.js and npm, the Node.js package manager.

Será necessário instalar a extensão do Serviço de Aplicativo do Azure, que você pode usar para criar, gerenciar e implantar Aplicativos Web Linux na PaaS (Plataforma como Serviço) do Azure.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).

EntrarSign in

Depois que a extensão for instalada, faça logon em sua conta do Azure.Once the extension is installed, log into your Azure account. Na Barra de Atividades, clique no logotipo do Azure para mostrar o explorador SERVIÇO DE APLICATIVO DO AZURE.In the Activity Bar, select the Azure logo to show the AZURE APP SERVICE explorer. Selecione Entrar no Azure... e siga as instruções.Select Sign in to Azure... and follow the instructions.

entrar no Azure

Solução de problemasTroubleshooting

Se você vir o erro "Não é possível encontrar a assinatura com o nome [ID da assinatura]" , talvez seja porque você está atrás de um proxy e não consegue acessar a API do 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. Configure as variáveis de ambiente HTTP_PROXY e HTTPS_PROXY com suas informações de proxy no seu terminal usando o 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

Se a configuração das variáveis de ambiente não corrigir o problema, contate-nos selecionando o botão Encontrei um problema abaixo.If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button below.

Verificação de pré-requisitosPrerequisite check

Antes de continuar, verifique se você tem todos os pré-requisitos instalados e configurados.Before you continue, ensure that you have all the prerequisites installed and configured.

No VS Code, você deverá ver o endereço de email do Azure na Barra de Status e sua assinatura no explorador SERVIÇO DE APLICATIVO DO AZURE.In VS Code, you should see your Azure email address in the Status Bar and your subscription in the AZURE APP SERVICE explorer.

Crie seu aplicativo Node.jsCreate your Node.js application

Em seguida, crie um aplicativo Node.js que possa ser implantado na nuvem.Next, create a Node.js application that can be deployed to the Cloud. Este início rápido usa um gerador de aplicativos para realizar scaffold rapidamente do aplicativo de um terminal.This quickstart uses an application generator to quickly scaffold out the application from a terminal.

Dica

Se você já tiver concluído o tutorial do Node.js, poderá pular para Implantar no Azure.If you have already completed the Node.js tutorial, you can skip ahead to Deploy to Azure.

Crie uma plataforma para um novo aplicativo com o Gerador ExpressScaffold a new application with the Express Generator

Express é uma estrutura popular para criar e executar aplicativos Node.js.Express is a popular framework for building and running Node.js applications. Você pode realizar scaffold (criar) de um novo aplicativo Express usando a ferramenta Gerador Express.You can scaffold (create) a new Express application using the Express Generator tool. O Gerador Express é enviado como um módulo npm e pode ser executado diretamente (sem instalação) usando a ferramenta de linha de comando 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

Os parâmetros --view pug --git instruem o gerador a usar o mecanismo de modelo pug (anteriormente conhecido como jade) e a criar um arquivo .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.

Para instalar todas as dependências do aplicativo, vá para a nova pasta e execute npm install.To install all of the application's dependencies, go to the new folder and run npm install.

cd myExpressApp
npm install

Executar o aplicativoRun the application

Em seguida, verifique se o aplicativo é executado.Next, ensure that the application runs. No terminal, inicie o aplicativo usando o comando npm start para iniciar o servidor.From the terminal, start the application using the npm start command to start the server.

npm start

Agora, abra o navegador e navegue até http://localhost:3000, em que você verá algo assim:Now, open your browser and navigate to http://localhost:3000, where you should see something like this:

Executar aplicativo Express

Implantar no AzureDeploy to Azure

Nesta seção, você implantará seu aplicativo do Node.js usando o VS Code e a extensão do Serviço de Aplicativo do Azure.In this section, you deploy your Node.js app using VS Code and the Azure App Service extension. Este guia de início rápido usa o modelo de implantação mais básico em que seu aplicativo é compactado e implantado em um aplicativo Web do Azure no Linux.This quickstart uses the most basic deployment model where your app is zipped and deployed to an Azure Web App on Linux.

Implantar usando o Serviço de Aplicativo do AzureDeploy using Azure App Service

Primeiro, abra a pasta do aplicativo no VS Code.First, open your application folder in VS Code.

code .

No explorador SERVIÇO DE APLICATIVO DO AZURE, selecione o ícone de seta azul para cima para implantar seu aplicativo no Azure.In the AZURE APP SERVICE explorer, select the blue up arrow icon to deploy your app to Azure.

Captura de tela do menu do Serviço de Aplicativo do Azure no Visual Studio Code com a seta de implantação azul selecionada.

Dica

Você também pode implantar na Paleta de Comandos (CTRL + SHIFT + P) digitando “implantar no aplicativo Web” e executando o comando Serviço de Aplicativo do Azure: Implantar no comando do aplicativo Web.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. Escolha o diretório que está aberto no momento, myExpressApp.Choose the directory that you currently have open, myExpressApp.

  2. Escolha Criar aplicativo Web, que é implantado no Serviço de Aplicativo no Linux por padrão.Choose Create new Web App, which deploys to App Service on Linux by default.

  3. Digite um nome globalmente exclusivo para seu Aplicativo Web e pressione ENTER.Type a globally unique name for your Web App and press ENTER. Os caracteres válidos para um nome de aplicativo são “a-z”, “0-9” e “-”.Valid characters for an app name are 'a-z', '0-9', and '-'.

  4. Escolha a versão do Node.js; LTS é recomendado.Choose your Node.js version, LTS is recommended.

    O canal de notificação mostra os recursos do Azure que estão sendo criados para seu aplicativo.The notification channel shows the Azure resources that are being created for your app.

  5. Selecione Sim quando solicitado a atualizar sua configuração para ser executar npm install no servidor de destino.Select Yes when prompted to update your configuration to run npm install on the target server. Seu aplicativo será implantado.Your app is then deployed.

    Captura de tela do prompt para atualizar a sua configuração no servidor de destino com o botão Sim selecionado.

  6. Quando a implantação é iniciada, você deve atualizar o workspace para que futuras implantações direcionem automaticamente o mesmo Aplicativo Web do Serviço de Aplicativo.When the deployment starts, you're prompted to update your workspace so that later deployments will automatically target the same App Service Web App. Escolha Sim para que suas alterações sejam implantadas no aplicativo correto.Choose Yes to ensure your changes are deployed to the correct app.

    Captura de tela do prompt para atualizar o seu workspace com o botão Sim selecionado.

Dica

Verifique se seu aplicativo está escutando na porta fornecida pela variável de ambiente PORT: process.env.PORT.Be sure that your application is listening on the port provided by the PORT environment variable: process.env.PORT.

Procurar o aplicativo no AzureBrowse the app in Azure

Quando a implantação for concluída, selecione Procurar no Site no prompt para exibir seu aplicativo Web implantado recentemente.Once the deployment completes, select Browse Website in the prompt to view your freshly deployed web app.

Solução de problemasTroubleshooting

Se você vir o erro "Você não tem permissão para exibir este diretório ou página." , o aplicativo provavelmente terá falhado em iniciar corretamente.If you see the error "You do not have permission to view this directory or page.", then the application probably failed to start correctly. Passe para a próxima seção e exiba a saída do log para localizar e corrigir o erro.Head to the next section and view the log output to find and fix the error. Se você não conseguir corrigi-lo, contate-nos selecionando o botão Encontrei um problema abaixo.If you aren't able to fix it, contact us by selecting the I ran into an issue button below. Temos o prazer de ajudar!We're happy to help!

Atualizar o aplicativoUpdate the app

Você pode implantar alterações nesse aplicativo usando o mesmo processo e escolhendo o aplicativo existente em vez de criar um.You can deploy changes to this app by using the same process and choosing the existing app rather than creating a new one.

Exibir logsViewing Logs

Nesta seção, você aprenderá a exibir (ou “seguir”) os logs do aplicativo do Serviço de Aplicativo em execução.In this section, you learn how to view (or "tail") the logs from the running App Service app. Chamadas a console.log no aplicativo são exibidas na Janela de Saída no Visual Studio Code.Any calls to console.log in the app are displayed in the output window in Visual Studio Code.

Localize o aplicativo no explorador SERVIÇO DE APLICATIVO DO AZURE, clique com o botão direito do mouse no aplicativo e escolha Exibir logs de streaming.Find the app in the AZURE APP SERVICE explorer, right-click the app, and choose View Streaming Logs.

A Janela de Saída do VS Code será aberta com uma conexão com o fluxo de log.The VS Code output window opens with a connection to the log stream.

Exibir logs de streaming

Captura de tela do prompt do VS Code para habilitar o registro em log do arquivo e reiniciar o aplicativo Web, com o botão Sim selecionado.

Após alguns segundos, vocês verá uma mensagem indicando que você está conectado ao serviço de streaming de log.After a few seconds, you'll see a message indicating that you're connected to the log-streaming service. Atualize a página algumas vezes para ver mais atividades.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

Próximas etapasNext steps

Parabéns, você concluiu com êxito este início rápido!Congratulations, you've successfully completed this quickstart!

Em seguida, confira as outras extensões do Azure.Next, check out the other Azure extensions.

Ou obtenha todas elas instalando o pacote de extensão Pacote de Nós para Azure.Or get them all by installing the Node Pack for Azure extension pack.