Criar uma aplicação Web Node.js no AzureCreate a Node.js web app in Azure

Começa com o Azure App Service criando uma aplicação Node.js/Express localmente usando o Código do Estúdio Visual e, em seguida, implementando a app para a 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 utiliza um nível de Serviço de Aplicações gratuito, não tem custos para completar este arranque rápido.Because you use a free App Service tier, you incur no costs to complete this quickstart.

Pré-requisitosPrerequisites

Clone e executar uma aplicação de Node.js localClone and run a local Node.js application

  1. No seu computador local, abra um terminal e clone o repositório de amostras: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 na nova pasta de aplicações:Navigate into the new app folder:

    cd nodejs-docs-hello-world
    
  3. Inicie a aplicação para testá-la localmente:Start the app to test it locally:

    npm start
    
  4. Abra o seu navegador e navegue para http://localhost:1337 .Open your browser and navigate to http://localhost:1337. O navegador deve exibir "Hello World!".The browser should display "Hello World!".

  5. Pressione ctrl + C no terminal para parar o servidor.Press Ctrl+C in the terminal to stop the server.

Implementar a aplicação no AzureDeploy the app to Azure

Nesta secção, implementa a sua aplicação Node.js para o Azure utilizando o Código VS e a extensão do Serviço de Aplicações Azure.In this section, you deploy your Node.js app to Azure using VS Code and the Azure App Service extension.

  1. No terminal, certifique-se de que está na pasta nodejs-docs-hello-world e, em seguida, inicie o Código do Estúdio Visual 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 Código VS, selecione o logótipo Azure para mostrar o explorador do Serviço app AZURE.In the VS Code activity bar, select the Azure logo to show the AZURE APP SERVICE explorer. Selecione Iniciar súm em Azure... e siga as instruções.Select Sign in to Azure... and follow the instructions. (Ver resolução de problemas Azure abaixo se encontrar erros.) Uma vez assinado, o explorador deve mostrar o nome da sua subscrição 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.

    Iniciar sessão no Azure

  3. No explorador de SERVIÇO DE APLICAÇÃO AZURE do Código VS, selecione o ícone de seta azul para cima para implementar a sua aplicação para o Azure.In the AZURE APP SERVICE explorer of VS Code, select the blue up arrow icon to deploy your app to Azure. (Também pode invocar o mesmo comando a partir da Paleta de Comando (Ctrl + Shift + P) digitando 'implementar para a web app' e escolhendo o Serviço de Aplicações Azure: Implementar para a Web App).(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).

    Implementar para web app

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

  5. Escolha uma opção de criação baseada no sistema operativo para o qual pretende implementar:Choose a creation option based on the operating system to which you want to deploy:

    • Linux: Escolha Criar nova Aplicação WebLinux: Choose Create new Web App
    • Windows: Escolha Criar nova Aplicação Web... AvançadoWindows: Choose Create new Web App... Advanced
  6. Digite um nome globalmente único para a sua aplicação web e prima Enter.Type a globally unique name for your web app and press Enter. O nome deve ser único em toda a Azure e usar apenas caracteres alfanuméricos ('A-Z', 'a-z', e '0-9') e hífenes ('-').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 apontar para o Linux, selecione uma versão Node.js quando solicitado.If targeting Linux, select a Node.js version when prompted. Recomenda-se uma versão LTS.An LTS version is recommended.

  8. Se direcionar o Windows, siga as indicações adicionais:If targeting Windows, follow the additional prompts:

    1. Selecione Criar um novo grupo de recursose, 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. Selecione Windows para o sistema operativo.Select Windows for the operating system.
    3. Selecione Crie um novo plano de Serviço de Aplicaçõese, em seguida, insira um nome para o plano (como), AppServiceQS-plan em seguida, selecione F1 Grátis para o nível de preços.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 Skip por agora quando solicitado sobre Insights de Aplicação.Choose Skip for now when prompted about Application Insights.
    5. Escolha uma região perto de si ou perto de recursos a que deseje aceder.Choose a region near you or near resources you wish to access.
  9. Depois de responder a todas as solicitações, o CÓDIGO VS mostra os recursos Azure que estão a ser criados para a sua aplicação 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.

    Ao implementar para o Linux, selecione Sim quando solicitado para atualizar a sua configuração para executar npm install no servidor Linux alvo.When deploying to Linux, select Yes when prompted to update your configuration to run npm install on the target Linux server.

    Solicitação para atualizar a configuração no servidor Linux alvo

  10. Selecione Sim quando solicitado com Sempre implemente o espaço de trabalho "nodejs-docs-hello-world" para (nome da aplicação)".Select Yes when prompted with Always deploy the workspace "nodejs-docs-hello-world" to (app name)". Selecionar Sim diz ao Código VS para direcionar automaticamente a mesma App Service Web App com implementações subsequentes.Selecting Yes tells VS Code to automatically target the same App Service Web App with subsequent deployments.

  11. Se implementar para o Linux, selecione Browse Website na solicitação para ver a sua aplicação web recentemente implantada uma vez concluída a implementação.If deploying to Linux, select Browse Website in the prompt to view your freshly deployed web app once deployment is complete. O navegador deve exibir "Hello World!"The browser should display "Hello World!"

  12. Se implementar para o Windows, deve primeiro definir o número de versão Node.js para a aplicação web:If deploying to Windows, you must first set the Node.js version number for the web app:

    1. No Código VS, expanda o nó para o novo serviço de aplicações, clique com o botão direito Definições de aplicaçãoe selecione Adicionar Nova Definição...In VS Code, expand the node for the new app service, right-click Application Settings, and select Add New Setting...:

      Adicionar comando de definição de aplicativos

    2. Introduza WEBSITE_NODE_DEFAULT_VERSION para a tecla de definição.Enter WEBSITE_NODE_DEFAULT_VERSION for the setting key.

    3. Introduza 10.15.2 o valor de definição.Enter 10.15.2 for the setting value.

    4. Clique no nó para o serviço de aplicações e selecione RestartRight-click the node for the app service and select Restart

      Reiniciar o comando de serviço de aplicações

    5. Clique no nó para o serviço de aplicações mais uma vez e selecione Browse Website.Right-click the node for the app service once more and select Browse Website.

Resolução de problemas Azure sign-inTroubleshooting Azure sign-in

Se vir o erro "Não é possível encontrar subscrição com nome [ID de subscrição]" ao iniciar sessão no Azure, pode ser porque está por detrás de um representante e não consegue chegar à 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. Configure HTTP_PROXY HTTPS_PROXY variáveis e ambientais com a sua informação de procuração no seu terminal utilizando 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 definição das variáveis ambientais não corrigir o problema, contacte-nos selecionando o I deparar-se com um botão de 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 a aplicaçãoUpdate the app

Pode implementar alterações nesta aplicação, fazendo edições no Código VS, guardando os seus ficheiros e, em seguida, usando o mesmo processo que antes apenas de escolher a app existente em vez de criar uma nova.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.

Visualização de registosViewing Logs

Pode visualizar a saída de registo (chamadas console.log para) a partir da aplicação diretamente na janela de saída do Código VS.You can view log output (calls to console.log) from the app directly in the VS Code output window.

  1. No explorador do Serviço de APLICAÇÕES AZURE, clique com o nó da aplicação e escolha Iniciar Registos de Streaming.In the AZURE APP SERVICE explorer, right-click the app node and choose Start Streaming Logs.

    Iniciar registos de streaming

  2. Quando solicitado, opte por ativar a registo e reiniciar a aplicação.When prompted, choose to enable logging and restart the application. Uma vez reiniciada a aplicação, a janela de saída do Código VS abre-se com uma ligação ao fluxo de registo.Once the app is restarted, the VS Code output window opens with a connection to the log stream.

    Ativar o registo e o reinício

  3. Após alguns segundos, a janela de saída mostra uma mensagem indicando que está ligado ao serviço de streaming de registos.After a few seconds, the output window shows a message indicating that you're connected to the log-streaming service. Pode gerar mais atividade de saída refrescando 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).    
     

Passos seguintesNext steps

Parabéns, conseguiste completar esta rapidinha!Congratulations, you've successfully completed this quickstart!

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

Ou obtenha-os todos instalando o pacote de extensões Node para Azure.Or get them all by installing the Node Pack for Azure extension pack.