Tutorial: Implantar um aplicativo ASP.NET no Azure com o Banco de Dados SQL do Azure

O Serviço de Aplicativo do Azure fornece um serviço de hospedagem na Web altamente escalonável e com aplicação automática de patches. Este tutorial mostra como implantar um aplicativo ASP.NET controlado por dados no Serviço de Aplicativo e conectá-lo ao Banco de Dados SQL do Azure. Quando terminar, você terá um aplicativo ASP.NET em execução no Azure e conectado ao Banco de Dados SQL.

Published ASP.NET application in Azure App Service

Neste tutorial, você aprenderá a:

  • Criar um banco de dados no Banco de Dados SQL do Azure
  • Conectar um aplicativo ASP.NET ao Banco de Dados SQL
  • Implantar o aplicativo no Azure
  • Atualizar o modelo de dados e reimplantar o aplicativo
  • Transmitir logs do Azure para seu terminal

Caso você não tenha uma assinatura do Azure, crie uma conta gratuita do Azure antes de começar.

Pré-requisitos

Para concluir este tutorial:

Instale o Visual Studio 2022 com as cargas de trabalho de desenvolvimento do ASP.NET e para a Web e desenvolvimento do Azure.

Se você já instalou o Visual Studio, adicione as cargas de trabalho no Visual Studio clicando em Ferramentas>Obter Ferramentas e Recursos.

Baixar o exemplo

  1. Baixar o projeto de exemplo.

  2. Extraia (descompacte) o arquivo dotnet-sqldb-tutorial-master.zip.

Esse projeto de exemplo contém um aplicativo CRUD (criar-ler-atualizar-excluir) básico do ASP.NET MVC usando o Entity Framework Code First.

Executar o aplicativo

  1. Abra o arquivo dotnet-sqldb-tutorial-master/DotNetAppSqlDb.sln no Visual Studio.

  2. Digite F5 para executar o aplicativo. O aplicativo é exibido no navegador padrão.

    Observação

    Se você instalou apenas o Visual Studio e os pré-requisitos, talvez precise instalar pacotes ausentes por meio do NuGet.

  3. Selecione o link Criar novo e crie alguns itens de tarefas.

    New ASP.NET Project dialog box

  4. Teste os links Editar, Detalhes e Excluir.

O aplicativo usa um contexto de banco de dados para se conectar com o banco de dados. Neste exemplo, o contexto do banco de dados usa uma cadeia de conexão chamada MyDbConnection. Essa cadeia de conexão é definida no arquivo Web. config e é referenciada no arquivo Models/MyDatabaseContext.cs. O nome da cadeia de conexão é usado mais adiante no tutorial para conectar o aplicativo do Azure a um Banco de Dados SQL do Azure.

Publicar um aplicativo ASP.NET no Azure

  1. No Gerenciador de Soluções, clique com botão direito no projeto DotNetAppSqlD e selecione Publicar.

    Publish from Solution Explorer

  2. Selecione Azure como o destino e clique em Avançar.

  3. Verifique se o Serviço de Aplicativo do Azure (Windows) está selecionado e clique em Avançar.

Entrar e adicionar um aplicativo

  1. Na caixa de diálogo Publicar, clique em Entrar.

  2. Entre na sua assinatura do Azure. Se você já entrou em uma conta da Microsoft, verifique se a conta tem sua assinatura do Azure. Se a conta da Microsoft conectada não tiver sua assinatura do Azure, clique nela para adicionar a conta correta.

  3. No painel Instâncias do Serviço de Aplicativo, clique em +.

    Sign in to Azure

Configurar o nome do aplicativo Web

Você pode manter o nome do aplicativo Web gerado ou alterá-lo para outro nome exclusivo (caracteres válidos são a-z, 0-9 e -). O nome do aplicativo Web é usado como parte da URL padrão para seu aplicativo (<app_name>.azurewebsites.net, onde <app_name> é o nome do aplicativo Web). O nome do aplicativo Web precisa ser exclusivo em todos os aplicativos no Azure.

Observação

Ainda não selecione Criar.

Create app service dialog

Criar um grupo de recursos

Um grupo de recursos é um contêiner lógico no qual os recursos do Azure, como aplicativos Web, bancos de dados e contas de armazenamento, são implantados e gerenciados. Por exemplo, é possível excluir posteriormente todo o grupo de recursos com uma única etapa simples.

  1. Ao lado de Grupo de Recursos, clique em Novo.

    Next to Resource Group, click New.

  2. Nomeie o grupo de recursos myResourceGroup.

Criar um plano de Serviço de Aplicativo

Um plano do Serviço de Aplicativo especifica o local, tamanho e recursos do farm de servidores Web que hospeda o aplicativo. É possível economizar dinheiro ao hospedar vários aplicativos configurando os aplicativos Web para compartilhar um plano do Serviço de Aplicativo.

Os Planos do Serviço de Aplicativo definem:

  • Região (por exemplo: Norte da Europa, Leste dos EUA ou Sudeste Asiático)
  • Tamanho da instância (pequena, média ou grande)
  • Contagem da escala (1 a 20 instâncias)
  • SKU (Gratuito, Compartilhado, Básico, Standard ou Premium)
  1. Ao lado de Plano de Hospedagem, clique em Novo.

  2. Na caixa de diálogo Configurar Plano do Serviço de Aplicativo, configure o novo plano do Serviço de Aplicativo com as seguintes definições e clique em OK:

    Configuração Valor sugerido Para obter mais informações
    Plano do Serviço de Aplicativo myAppServicePlan Planos do Serviço de Aplicativo
    Localidade Europa Ocidental Regiões do Azure
    Tamanho Grátis Tipos de preço

    Create App Service plan

  3. Clique em Criar e aguarde até que os recursos do Azure sejam criados.

  4. A caixa de diálogo Publicar mostrará os recursos que você configurou. Clique em Concluir.

    the resources you've created

Criar um servidor e um banco de dados

Antes de criar um banco de dados, você precisará ter um servidor SQL lógico. Um servidor SQL lógico é um constructo lógico que contém um grupo de bancos de dados gerenciados como um grupo.

  1. Na caixa de diálogo Publicar, role para baixo até a seção Dependências de Serviço. Ao lado de Banco de Dados do SQL Server, clique em Configurar.

    Observação

    Configure o Banco de Dados SQL da página Publicar em vez da página Serviços Conectados.

    Configure SQL Database dependency

  2. Selecione o Banco de Dados SQL do Azure e clique em Avançar.

  3. Na caixa de diálogo Configurar Banco de Dados SQL do Azure, clique em +.

  4. Ao lado de Servidor de banco de dados, clique em Novo.

    Esse nome do servidor é usado como parte da URL padrão do servidor, <server_name>.database.windows.net. Ele precisa ser exclusivo em todos os servidores do SQL do Azure. Altere o nome do servidor para um valor desejado.

  5. Adicione um nome de usuário administrador e a senha. Para requisitos de complexidade de senha, consulte Política de Senha.

    Lembre desse nome de usuário e senha. Você precisará deles para gerenciar o servidor mais tarde.

    Create server

    Importante

    Mesmo que a senha nas cadeias de conexão esteja mascarada (no Visual Studio e também no Serviço de Aplicativo), o fato de que ela foi mantida em algum lugar aumenta a superfície de ataque do seu aplicativo. O Serviço de Aplicativo pode usar identidades de serviço gerenciadas para eliminar esse risco removendo a necessidade de manter os segredos na configuração de aplicativo ou no código. Para saber mais, confira as Próximas etapas.

  6. Clique em OK.

  7. Na caixa de diálogo Banco de Dados SQL do Azure, mantenha o Nome de Banco de Dados padrão gerado. Selecione Criar e aguarde até que os recursos de banco de dados sejam criados.

    Configure database

Configurar a conexão de banco de dados

  1. Quando o assistente terminar de criar os recursos de banco de dados, clique em Avançar.

  2. Em Nome da cadeia de conexão de banco de dados, digite MyDbConnection. Esse nome deve corresponder à cadeia de conexão que está referenciada em Models/MyDatabaseContext.cs.

  3. Em Nome de usuário da conexão de banco de dados e Senha de conexão de banco de dados, digite o nome de usuário e a senha do administrador usados em Criar um servidor.

  4. Verifique se a opção Configurações do Aplicativo Azure está selecionada e clique em Concluir.

    Observação

    Se você vir Arquivos de segredos do usuário local, deverá ter configurado o Banco de Dados SQL na página Serviços Conectados em vez da página Publicar.

    Configure database connection string

  5. Aguarde até que o assistente de configuração seja concluído e clique em Fechar.

Implantar o aplicativo ASP.NET

  1. Na guia Publicar, role de volta para cima e clique em Publicar. Após o aplicativo ASP.NET ser implantado no Azure. Seu navegador padrão é iniciado com a URL para o aplicativo implantado.

  2. Adicione alguns itens de tarefas.

    Published ASP.NET application in Azure app

    Parabéns! Seu aplicativo ASP.NET controlado por dados está em execução em tempo real no Serviço de Aplicativo do Azure.

Acessar o banco de dados localmente

O Visual Studio permite que você explore e gerencie seu novo banco de dados no Azure com facilidade no Pesquisador de Objetos do SQL Server. O novo banco de dados já abriu seu firewall para o aplicativo do Serviço de Aplicativo que você criou. Mas para acessá-lo do seu computador local (por exemplo, do Visual Studio), você precisa abrir um firewall para o endereço IP público do computador local. Se o seu provedor de serviços de Internet alterar seu endereço IP público, você precisará reconfigurar o firewall para acessar o banco de dados do Azure novamente.

Criar uma conexão de banco de dados

  1. No menu Visualizar, selecione Pesquisador de objetos do SQL Server.

  2. Na parte superior do Pesquisador de Objetos do SQL Server, clique no botão Adicionar SQL Server.

Configurar a conexão de banco de dados

  1. Na caixa de diálogo Conectar, expanda o nó Azure. Todas as suas instâncias de Banco de Dados SQL no Azure são listadas aqui.

  2. Selecione o banco de dados criado anteriormente. A conexão criada antes é automaticamente preenchida na parte inferior.

  3. Digite a senha de administrador de banco de dados que você criou anteriormente e clique em Conectar.

    Configure database connection from Visual Studio

Permitir conexão do cliente a partir de seu computador

A caixa de diálogo Crie uma nova regra de firewall é aberta. Por padrão, um servidor só permite conexões com os respectivos bancos de dados nos serviços do Azure, como o aplicativo do Azure. Para se conectar ao banco de dados fora do Azure, crie uma regra de firewall no nível do servidor. A regra de firewall permite o endereço IP público do seu computador local.

A caixa de diálogo já está preenchida com o endereço IP público do seu computador.

  1. Certifique-se de que Adicionar meu IP do cliente está selecionado e clique em OK.

    Create firewall rule

    Quando o Visual Studio terminar de criar a configuração de firewall para a instância do Banco de dados SQL, sua conexão aparecerá no Pesquisador de Objetos do SQL Server.

    Aqui, você pode executar as operações de banco de dados mais comuns, como executar consultas, criar exibições, procedimentos armazenados e, muito mais.

  2. Expanda sua conexão >Bancos de dados><seu banco de dados>>Tabelas. Clique com o botão direito do mouse na tabela Todoes e selecione Exibir Dados.

    Explore SQL Database objects

Atualizar aplicativo com Migrações do Code First

Use as ferramentas conhecidas no Visual Studio para atualizar o banco de dados e o aplicativo no Azure. Nesta etapa, você usará Migrações do Code First no Entity Framework para fazer uma alteração no seu esquema de banco de dados e publicá-lo no Azure.

Para obter mais informações sobre como usar as Migrações do Entity Framework Code First, consulte Introdução ao Entity Framework 6 Code First usando MVC 5.

Atualizar seu modelo de dados

Abra Models\Todo.cs no editor de códigos. Adicione a seguinte propriedade à classe ToDo:

public bool Done { get; set; }

Executar Migrações do Code First localmente

Execute alguns comandos para fazer as atualizações para seu banco de dados local.

  1. A partir do menu Ferramentas clique em Gerenciador de Pacotes NuGet>Console do Gerenciador de Pacotes.

  2. Na janela do Console do Gerenciador de Pacotes, habilite as Migrações do Code First:

    Enable-Migrations
    
  3. Adicione uma migração:

    Add-Migration AddProperty
    
  4. Atualize o banco de dados local:

    Update-Database
    
  5. Digite Ctrl+F5 para executar o aplicativo. Teste os links editar, detalhes e criar.

Se o aplicativo for carregado sem erros, as Migrações do Code First tiveram êxito. Porém, sua página ainda tem a mesma aparência porque a lógica do seu aplicativo ainda não está usando essa nova propriedade.

Usar a nova propriedade

Faça algumas alterações em seu código para usar a propriedade Done. Para simplificar este tutorial, somente as exibições Index e Create serão alteradas para observar a propriedade em ação.

  1. Abra Controllers\TodosController.cs.

  2. Localize o Create() método na linha 52 e adicione Done à lista de propriedades no atributo Bind. Quando terminar, a assinatura do método Create() deverá ter o seguinte código:

    public ActionResult Create([Bind(Include = "Description,CreatedDate,Done")] Todo todo)
    
  3. Abra Views\Todos\Create.cshtml.

  4. No código do Razor, você deve ver um elemento <div class="form-group"> que usa model.Description e outro elemento <div class="form-group"> que usa model.CreatedDate. Imediatamente após esses dois elementos, adicione outro elemento <div class="form-group"> que usa model.Done:

    <div class="form-group">
        @Html.LabelFor(model => model.Done, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.Done)
                @Html.ValidationMessageFor(model => model.Done, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
    
  5. Abra Views\Todos\Index.cshtml.

  6. Procure o elemento vazio <th></th>. Logo acima desse elemento, adicione o seguinte código do Razor:

    <th>
        @Html.DisplayNameFor(model => model.Done)
    </th>
    
  7. Localize o elemento <td> que contém os métodos auxiliares Html.ActionLink(). Acima disto <td>, adicione outro elemento <td> com o seguinte código Razor:

    <td>
        @Html.DisplayFor(modelItem => item.Done)
    </td>
    

    Isso é tudo o que você precisa para ver as alterações nas exibições Index e Create.

  8. Digite Ctrl+F5 para executar o aplicativo.

Agora você pode adicionar um item de tarefas e marcar Concluído. Em seguida, ele deverá aparecer na sua página inicial como um item concluído. Lembre-se de que a exibição Edit não mostra o campo Done, porque você não alterou a exibição Edit.

Habilitar Migrações do Code First no Azure

Agora que a alteração de código funciona, incluindo a migração de banco de dados, publique-a no aplicativo do Azure e atualize o Banco de Dados SQL com as Migrações do Code First também.

  1. Exatamente como antes, clique com o botão direito do mouse no projeto e selecione Publicar.

  2. Clique em Mais ações>Editar para abrir as configurações de publicação.

    Open publish settings

  3. Na lista suspensa MyDatabaseContext, selecione a conexão de banco de dados para o Banco de Dados SQL do Azure.

  4. Selecione Executar o Migrations do Code First (executado na inicialização do aplicativo) e, em seguida, clique em Salvar.

    Enable Code First Migrations in Azure app

Publicar suas alterações

Agora que você habilitou as Migrações do Code First no aplicativo do Azure, publique as alterações de código.

  1. Na página de publicação, clique em Publicar.

  2. Tente adicionar os itens pendentes outra vez, selecione Concluído e os itens deverão aparecer na sua página inicial como um item concluído.

    Azure app after Code First Migration

Observe que todos os itens de tarefas existentes ainda são exibidos. Quando você republicar seu aplicativo ASP.NET, os dados existentes no Banco de Dados SQL não serão perdidos. Além disso, as Migrações do Code First apenas alteram o esquema de dados e deixam os dados existentes intactos.

Transmitir logs de aplicativos

Transmita mensagens de rastreamento diretamente do aplicativo do Azure para o Visual Studio.

Abra Controllers\TodosController.cs.

Cada ação inicia com um método Trace.WriteLine(). Esse código é adicionado para mostrar como adicionar mensagens de rastreamento ao aplicativo do Azure.

Habilitar streaming de log

  1. Na página publicar, role para baixo até a seção Hospedagem.

  2. No canto direito, clique em ...>Exibir logs de streaming.

    Enable log streaming

    Os logs agora são transmitidos na janela Saída.

    Log streaming in Output window

    No entanto, ainda não é possível ver nenhuma das mensagens de rastreamento. Isso ocorre porque quando você seleciona Exibir Logs de Streaming pela primeira vez, o aplicativo do Azure define o nível de rastreamento como Error, o que registra em log apenas eventos de erro (com o método Trace.TraceError()).

Alterar níveis de rastreamento

  1. Para alterar os níveis de rastreamento e exibir outras mensagens de rastreamento, retorne para a página de publicação.

  2. Na seção Hospedagem, clique em ...>Abrir no portal do Azure.

  3. Na página de gerenciamento do portal para o aplicativo, no menu à esquerda, selecione Logs do Serviço de Aplicativo.

  4. Em Application Logging (Sistema de Arquivos) , em Nível, selecione Detalhado. Clique em Salvar.

    Dica

    Você pode testar diferentes níveis de rastreamento para ver quais tipos de mensagens são exibidos para cada nível. Por exemplo, o nível Informações inclui todos os logs criados por Trace.TraceInformation(), Trace.TraceWarning() e Trace.TraceError(), mas não os logs criados por Trace.WriteLine().

  5. No seu navegador, navegue até seu aplicativo novamente em http://<nome do seu aplicativo>.azurewebsites.nete tente clicar em torno do aplicativo da lista de tarefas pendentes no Azure. As mensagens de rastreamento agora são transmitidas para a janela Saída no Visual Studio.

    Application: 2017-04-06T23:30:41  PID[8132] Verbose     GET /Todos/Index
    Application: 2017-04-06T23:30:43  PID[8132] Verbose     GET /Todos/Create
    Application: 2017-04-06T23:30:53  PID[8132] Verbose     POST /Todos/Create
    Application: 2017-04-06T23:30:54  PID[8132] Verbose     GET /Todos/Index
    

Parar o streaming de log

Para interromper o serviço de streaming de log, clique no botão Parar Monitoramento na janela Saída.

Stop log streaming

Limpar os recursos

Nas etapas anteriores, você criou os recursos do Azure em um grupo de recursos. Se você não espera precisar desses recursos no futuro, poderá excluí-los ao excluir o grupo de recursos.

  1. Na página Visão geral do seu aplicativo Web no portal do Azure, selecione o link myResourceGroup em Grupo de recursos.
  2. Na página do grupo de recursos, certifique-se de que os recursos listados são aqueles que deseja excluir.
  3. Selecione Excluir, digite myResourceGroup na caixa de texto e selecione Excluir.

Próximas etapas

Neste tutorial, você aprendeu a:

  • Criar um banco de dados no Banco de Dados SQL do Azure
  • Conectar um aplicativo ASP.NET ao Banco de Dados SQL
  • Implantar o aplicativo no Azure
  • Atualizar o modelo de dados e reimplantar o aplicativo
  • Transmitir logs do Azure para seu terminal

Avance para o próximo tutorial para aprender a aprimorar a segurança da sua conexão com o Banco de Dados SQL do Azure.

Mais recursos:

Deseja otimizar e reduzir seus gastos com a nuvem?