Exportar (0) Imprimir
Expandir Tudo

Como Publicar um projeto ASP.NET MVC com Banco de Dados no Azure?

Renato Haddad

Agosto 2013

Dn449970.060DE5057573180CEC6D227C6D3E2207(pt-br,MSDN.10).png

Sempre que ministro uma palestra ou um treinamento sobre o assunto, muitos me perguntam o passo a passo para publicar uma aplicação MVC com banco de dados no Azure. Então, resolvi escrever este artigo afim de abordar exatamente o passo a passo para que você saiba como criar uma aplicação ASP.NET MVC usando um banco de dados e publicá-la na nuvem, no Azure.

Primeiramente, você precisa conhecer a estrutura de uma aplicação MVC e saber o conceito de Code First. Isto é o que usarei neste artigo, e em seguida faremos o deploy, a publicação no Azure.

Os pré-requisitos para realizar os passos com sucesso é ter o Visual Studio .NET 2012 ou 2013 e uma conta no Azure (www.windowsazure.com) que é gratuita até um determinado limite, portanto, leia as regras do Azure no momento da sua assinatura.

Projeto ASP.NET MVC 4

Para o projeto MVC, usarei o Visual Studio .NET 2012 Ultimate, mas você pode usar outra versão ou até a versão Express. Selecione Create New Project e conforme a figura 1, marque a linguagem Visual C#, o Template de Web / ASP.NET MVC 4 Web Application. O nome do projeto será MvcAzure, que será gravado na pasta C:\ProjetosVS2012.

Dn449970.C54B4B6AF505F6F81CCD36252078BE69(pt-br,MSDN.10).png

Figura 1 – Criação do projeto

Clique no botão OK e o VS abrirá a tela da figura 2, solicitando o tipo de template. Neste caso, selecione Internet Application, com o View Engine Razor. Clique no botão OK e aguarde o VS criar toda a estrutura do projeto MVC 4. Particularmente gosto muito do template gerado automaticamente, mas o do VS 2013 é muito melhor, pois já inclui o bootstrap. Só não usei o 2013 porque ainda é versão Preview, mas nada o impede de usá-lo.

Dn449970.73AD409AA65AC9FEEF7C317969C3137F(pt-br,MSDN.10).png

Figura 2 – Template do MVC

Agora que temos o projeto criado, na pasta Models, adicione uma classe chamada Medico, conforme a figura 3.

Dn449970.ED914F3384F0452A6D716477006BB7B7(pt-br,MSDN.10).png

Figura 3 – Adicionar uma classe

Digite a seguinte estrutura da classe Medico, contendo quatro propriedades. Esta classe será futuramente uma tabela no banco de dados.

namespace MvcAzure.Models
{
    public class Medico
    {
        public int ID { get; set; }
        public string Nome { get; set; }
        public string CRM { get; set; }
        public string Modalidade { get; set; }
    }
}

O próximo passo é criar o Controller desta classe, a fim de gerar toda a estrutura do CRUD e as respectivas Views (formulários) para manutenção dos dados. Sendo assim, selecione o menu Build / Rebuild Solution. Espero que a solução tenha sido compilada com sucesso, e caso tenha algum erro, corrija-o antes de prosseguir.

Na pasta Controllers, clique com o botão direito e selecione Add / Controller. Conforme a figura 4, o nome do Controller será MedicoController, e em Template, selecione “MVC controller with read/write actions and views, using Entity Framework”. Isto significa dizer que o Controller criará todas as Actions e as Views para a manutenção dos dados dos médicos, através do Entity Framework.

Dn449970.903AD524F4AEB028AAF6CED0F21B5D19(pt-br,MSDN.10).png

Figura 4 – Criação do Controller

Conforme a figura 5, em Model class é solicitado o nome da classe existente e compilada. Informe a classe Medico, e note que isto só é possível porque já compilamos o projeto.

Dn449970.10AAABFFFFB0CA0441AA5BCDB03FE9B3(pt-br,MSDN.10).png

Figura 5 – Classe para o Controller

O próximo passo é informar qual é o contexto da classe, o famoso Data Context. Como não o temos, selecione a primeira opção chamada “New data context”, conforme a figura 6.

Dn449970.8C3DF3B3902DA4E531814A3F57A2F4E0(pt-br,MSDN.10).png

Figura 6 – Contexto

Como não temos nenhum contexto que implemente a classe Medico, é preciso criá-lo. Muitos desenvolvedores criam na mão, é fácil, basta uma classe que herde de DbContext e implemente o DbSet<Medico>. Mas, é mais fácil você digitar o nome da classe de contexto que o Visual Studio cria pra você. No nosso caso, chama-se MVCAzureContext, conforme a figura 7.

Dn449970.FB14E599FA1C247EA1822136364BD031(pt-br,MSDN.10).png

Figura 7 – Novo contexto

Clique no botão OK, e em seguida em Add. Aguarde a criação do Controller MedicoController na pasta Controllers, assim como a classe MvcAzureContext na pasta Models, e todas as Views na pasta Views/Medico.

Esta é a estrutura da classe MvcAzureContext que herda de DbContext e implementa o DbSet.

namespace MvcAzure.Models
{
    public class MvcAzureContext : DbContext
    {
        public MvcAzureContext() : base("name=MvcAzureContext")
        {
        }

        public DbSet<Medico> Medicos { get; set; }
    }
}

Veja o código do Controller que gerencia toda a manutenção de dados dos médicos. Neste artigo não irei explicar em detalhes porque o foco é a publicação e não os códigos gerados no MVC, já que são padrões.

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcAzure.Models;

namespace MvcAzure.Controllers
{
    public class MedicoController : Controller
    {
        private MvcAzureContext db = new MvcAzureContext();

        //
        // GET: /Medico/

        public ActionResult Index()
        {
            return View(db.Medicos.ToList());
        }

        //
        // GET: /Medico/Details/5

        public ActionResult Details(int id = 0)
        {
            Medico medico = db.Medicos.Find(id);
            if (medico == null)
            {
                return HttpNotFound();
            }
            return View(medico);
        }

        //
        // GET: /Medico/Create

        public ActionResult Create()
        {
            return View();
        }

        //
        // POST: /Medico/Create

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Medico medico)
        {
            if (ModelState.IsValid)
            {
                db.Medicos.Add(medico);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(medico);
        }

        //
        // GET: /Medico/Edit/5

        public ActionResult Edit(int id = 0)
        {
            Medico medico = db.Medicos.Find(id);
            if (medico == null)
            {
                return HttpNotFound();
            }
            return View(medico);
        }

        //
        // POST: /Medico/Edit/5

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(Medico medico)
        {
            if (ModelState.IsValid)
            {
                db.Entry(medico).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(medico);
        }

        //
        // GET: /Medico/Delete/5

        public ActionResult Delete(int id = 0)
        {
            Medico medico = db.Medicos.Find(id);
            if (medico == null)
            {
                return HttpNotFound();
            }
            return View(medico);
        }

        //
        // POST: /Medico/Delete/5

        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            Medico medico = db.Medicos.Find(id);
            db.Medicos.Remove(medico);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}

Novamente, recompile o projeto e certifique-se que está compilado com sucesso. Pronto, o projeto já está preparado para ser executado localmente, onde o banco de dados será gerado na primeira execução automaticamente. No entanto, como faremos o deploy no Azure, é preciso usar o Migrations para informar ao projeto que qualquer alteração em nível de estrutura da classe Medico, será executada uma atualização no banco de dados. Sendo assim, para executar o Migrations, selecione o menu Tools / Library Package Manager. Na janela aberta (também conhecida como Nuget), digite “Enable-Migrations -ContextTypeName MvcAzure.Models.MvcAzureContext”, conforme a figura 8. Veja que especificamos o nome completo do contexto, pois no projeto é possível que haja mais de um contexto. Este comando cria uma pasta chamada Migrations com a classe Configurations.cs, informando ao projeto que o Migrations está ativado.

Dn449970.C470006DB2082DCE37C4286A4846BBF4(pt-br,MSDN.10).png

Figura 8 – Ativar o Migrations para este contexto

Como ainda não temos o banco de dados criado, precisamos executar outro comando na janela do Nuget, sendo: Add-Migration Initial, conforme a figura 9.

Dn449970.A4AB12A076CBF20A3BA45DDCDB1D4878(pt-br,MSDN.10).png

Figura 9 – Estrutura inicial do banco

Isto informa ao projeto que quando o banco de dados for criado, ele terá uma estrutura conforme definida na classe Initial. Abra o arquivo Initial.cs criado e veja que quando o banco for criado, será executado o método Up, criando a tabela Medicos com os respectivos campos e suas propriedades. O método Down, exclui a tabela, caso algum dia você quiser.

namespace MvcAzure.Migrations
{
    using System;
    using System.Data.Entity.Migrations;
    
    public partial class Initial : DbMigration
    {
        public override void Up()
        {
            CreateTable(
                "dbo.Medicos",
                c => new
                    {
                        ID = c.Int(nullable: false, identity: true),
                        Nome = c.String(),
                        CRM = c.String(),
                        Modalidade = c.String(),
                    })
                .PrimaryKey(t => t.ID);
            
        }
        
        public override void Down()
        {
            DropTable("dbo.Medicos");
        }
    }
}

Para inicializar o banco já com alguns dados, abra o arquivo Configuration.cs e substitua o método Seed com os seguintes dados:

using MvcAzure.Models;
protected override void Seed(MvcAzure.Models.MvcAzureContext context)
{
    context.Medicos.AddOrUpdate(
        m => m.Nome,
            new Medico { Nome = "Felipe", Modalidade = "Ortopedista", CRM = "0101" },
            new Medico { Nome = "Waldemar", Modalidade = "Ortopedista", CRM = "0102" },
            new Medico { Nome = "Marcos", Modalidade = "Otorrinolaringologista", CRM = "0201" },
            new Medico { Nome = "Luiz Dario", Modalidade = "Dematologista", CRM = "0301" },
            new Medico { Nome = "Patricia", Modalidade = "Pediatra", CRM = "0404" },
            new Medico { Nome = "Eloisa", Modalidade = "Ginecologista", CRM = "0555" }
        );
}

A seguir, o último comando do Migrations que usaremos é o “Update-Database”, que irá executar o método Seed, conforme a figura 10.

Dn449970.FEBDD275B4AD9ADD5AEBFCFD734DAEB1(pt-br,MSDN.10).png

Figura 10 – Execução do método Seed

Agora iremos adicionar mais uma opção no menu para os médicos. Abra o arquivo _Layout.cshtml na pasta Views/Shared. Inclua a linha referente aos médicos, conforme listagem a seguir:

<nav>
    <ul id="menu">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("Medicos", "Index", "Medico")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
</nav>

Pronto, o projeto está criado, compilado e pronto pra ser executado. Pressione F5 e execute-o no navegador. Clique no menu Medicos e veja a lista de profissionais, conforme a figura 11.

Dn449970.E8FD12163E20AEAB0A9FEE8950848CBC(pt-br,MSDN.10).png

Figura 11 – Lista de médicos

Azure

Agora que o projeto ASP.NET MVC 4 já está prontinho, vamos passar para fase do Azure. Antes de mais nada acesse http://www.windowsazure.com/pt-br/ crie uma conta, caso não tenha, e acesse o portal. Até o momento que escrevi este artigo, é sabido que o Azure é gratuito para até 10 websites e o banco de dados deve ter até 20MB, ou seja, mais que o suficiente pra você executar qualquer tipo de teste. A partir disso, tudo será cobrado e o modelo de negócio é barato, mas você pode simular o seu cenário diretamente no site do Azure.

Conforme a figura 12, a página principal do meu portal, eu tenho alguns sites e bancos de dados cadastrados. Cabe resslatar que a interface de usuário do Azure é uma das mais bonitas e funcionais que já vi na web.

Dn449970.3536E4D0EE5855513783D7BC9209B7D1(pt-br,MSDN.10).png

Figura 12 – Portal da minha conta

O objetivo é guiá-lo no passo a passo para criar um site, o banco de dados e publicar o projeto no Azure. O primeiro passo é criar o site, então, no rodapé clique no botão Novo. Em seguida, selecione Site, Criação Personalizada, conforme a figura 13. Isto porque iremos informar tanto o nome do site quanto o banco de dados. Caso queira criar apenas o site, use a opção Criação Rápida.

Dn449970.06CA51CECED3BBCD743CD71FE64E8F31(pt-br,MSDN.10).png

Figura 13 – Criação do site

É aberta uma janela com um formulário para você preencher as informações, conforme a figura 14. Quando se digita o nome da URL, automaticamente o sistema pesquisa a disponibilidade desta, a fim de ser única, é claro. No meu caso chama-se artigomvcazure, e note que também será adicionado o texto .azurewebsites.net, sendo que a url completa será http://artigomvcazure.azurewebsites.net. Se o ícone ficar verde, significa que foi verificada com sucesso e a URL é sua. Em seguida, informe a qual conta será vinculado, ou seja, no meu caso, usei a conta da minha empresa. A região você pode informar qualquer servidor disponível na listagem, e aqui é importante saber que o banco de dados deverá ser selecionado na mesma região. Já o banco de dados, veja que há diversas opções, tanto novas quanto existentes, então, selecione o “Criar um banco de dados SQL 20 MB gratuito”.

Dn449970.57639B853C25DF794C5BDFD8C4D59B4B(pt-br,MSDN.10).png

Figura 14 – Novo site

Em seguida, é preciso configurar o banco de dados, então, nesta mesma tela, clique no ícone Próximo (seta para direita), localizado na parte inferior direita, ou seja é a etapa 2. Após selecionar o banco de dados SQL, você pode escolher um servidor existente ou um novo. Caso escolha um novo, selecione “Novo servidor de banco de dados SQL”, informe o nome de logon e a senha, conforme a figura 15. Para finalizar, escolha a região, o qual deixei o mesmo nome da região onde o site foi criado. Isto é importante para que não haja cobrança de valores entre o tráfego dos servidores em diferentes regiões.

Dn449970.E40DE0D1DA91C170466CF9F0FCFBB9DE(pt-br,MSDN.10).png

Figura 15 – String de conexão

Para finalizar, clique no botão concluir. Note na figura 16 que o sistema mostra o status no rodapé, ou seja, ele mostra o que está executando, neste caso, criando o site e o banco de dados. Ao final, se você consultar as telas de sites e banco de dados SQL verá que ambos foram incluídos na lista.

Dn449970.95AEF225EB52DA8EBD484AB9AF4BF719(pt-br,MSDN.10).png

Figura 16 – Status da criação

Publicação da Aplicação no Azure

Agora que já temos o site e o banco de dados criados no Azure e o projeto na máquina local, como fazer para vinculá-los? No Azure, clique no nome do site artigomvcazure para mostrar as opções deste site. Conforme a figura 17, existe uma opção chamada “Publicar seu aplicativo” com um link “Baixar o perfil de publicação”. É aqui o grande passo que jamais você pode esquecer, pois isto fará um download com todas as configurações necessárias para o projeto MVC na máquina local.

Dn449970.026420DAB0F786205C5C9F1DF8EA9A68(pt-br,MSDN.10).png

Figura 17 – Perfil de publicação

Sendo assim, clique no link “Baixar o perfil de publicação”, o qual será exibida uma mensagem para que você salve em alguma pasta local na sua máquina, conforme a figura 18. Eu salvei na pasta c:\temp, e tudo o que precisamos está neste arquivo.

Dn449970.9196C00B61D0EDC2328EE71F7E47B208(pt-br,MSDN.10).png

Figura 18 – Salvar o perfil de publicação

Volte para o projeto aberto no Visual Studio. Selecione o menu Build / Publish MvcAzure (MvcAzure é o nome do projeto) para abrir a janela onde você irá informar o nome do arquivo do perfil baixado na pasta c:\temp, conforme descrito anteriormente. Nesta janela do Publish Web, figura 19, clique no botão Import.

Dn449970.4E3B591F547A20F8D9D2879C100C624E(pt-br,MSDN.10).png

Figura 19 – Selecionar o perfil de publicação

A seguir, localize o arquivo de perfil de publicação salvo na sua máquina, e selecione-o. Na figura 20 são mostradas todas as informações necessárias para que a sua aplicação local possa ser publicada diretamente no Azure. Observe os nomes do server, site, user, password e URL de destino. Caso queira validar os dados, clique no botão “Validate Connection”. Isto é muito útil quando pegamos um site de terceiro.

Dn449970.21C40C638160214638D8AC5C3CAD0259(pt-br,MSDN.10).png

Figura 20 – Informações do perfil

Clique no botão Next para o próximo passo. Note na figura 21, que a configuração agora passa automaticamente para Release, antes no projeto era Debug. Em seguida, na sessão Databases, são mostrados todos os contextos existentes no projeto. Temos dois, o UsersContext que o MVC cria automaticamente para controlar os usuários e o MvcAzureContext que é o nosso banco de dados de médicos. Apenas no MvcAzureContext, selecione o checkbox chamado “Execute Code First Migrations (runs on application start)” para que seja executado o Migrations assim que a aplicação for iniciada. Isto é preciso porque o banco de dados que configuramos no Migrations seja adicionado na primeira vez, assim como os dados de exemplos.

Dn449970.CB11DF667D2F3C9FE3B2C5B837C28868(pt-br,MSDN.10).png

Figura 21 – Configuração do contexto

Clique em Next para a próxima etapa. Veja na figura 22 que temos o botão Publish Preview, clique nele e aguarde que seja feita uma análise de todo o projeto, afim de verificar quais arquivos deverão ser publicados. Claro que na primeira vez, todos os necessários serão publicados.

Dn449970.763303E6C7E1AFC6ABCCA9E39E6B6077(pt-br,MSDN.10).png

Figura 22 – Preview da publicação

E, o último passo é o botão Publish, o qual irá transferir todos os arquivos para o Azure. Para acompanhar toda a publicação, abra a janela de Output no Visual Studio. Este processo depende 100% da sua velocidade de conexão com a internet, e é válido dizer que na primeira vez pode demorar um pouco mais de tempo que as demais, pois serão publicados todos os arquivos. Veja na figura 23 a janela do Output com o processo finalizado.

Dn449970.9B91E78E18B5818A966EB67317218B74(pt-br,MSDN.10).png

Figura 23 – Publicação com sucesso

Automaticamente ao final o site é aberto no navegador. Clique no menu Medicos (http://artigomvcazure.azurewebsites.net/Medico) e veja que todos os médicos que inserimos no Migrations estão listados aqui. Caso queira incluir um novo médico, clique em Create New, digite as informações, e ao final, clique no botão Create, conforme a figura 24.

Dn449970.44093D40478BBE8C0527169503EB40A2(pt-br,MSDN.10).png

Figura 24 – Cadastrar um novo médico no Azure

Veja na figura 25 a lista com todos os médicos cadastrados, sendo que você já tem à disposição links para editar, ver os detalhes e excluir um médico.

Dn449970.25741FEFDA6CF12D388F0754799A89CA(pt-br,MSDN.10).png

Figura 25 – Médicos cadastrados no Azure

Alteração no projeto local

Como faço para atualizar o meu projeto? O processo é simples, você pode alterar qualquer arquivo localmente e depois fazer o deploy no azure. Por exemplo, abra o arquivo _Layout.cshtml na pasta Views/Shared e troque a tag title para:

<title>@ViewBag.Title - MVC no Azure</title>

Faça outra alteração no rodapé do mesmo arquivo, sendo:

<footer>
    <div class="content-wrapper">
        <div class="float-left">
            <p>&copy; @DateTime.Now.Year - by Renato Haddad</p>
        </div>
    </div>
</footer>

Em nível de código, abra o arquivo MedicoController.cs na pasta Controllers e altere a Action Index para retornar os médicos em ordem crescente de nomes, através de uma expressão lambda.

public ActionResult Index()
{
    return View(db.Medicos.OrderBy(m => m.Nome).ToList());
}

Salve todos os dois arquivos alterados, selecione o menu Build / Publish MvcAzure. Conforme a figura 26, clique no botão Preview Publish e veja que somente os arquivos alterados serão publicados.

Dn449970.50430E5B46360D70F3A7A1EAFEACF034(pt-br,MSDN.10).png

Figura 26 – Arquivos alterados para publicação

Para finalizar, clique no botão Publish e aguarde o deploy. Abra novamente a página de médicos e veja que as alteraçòes já estão no ar, conforme a figura 27. Isto é sensacional, tanta facilidade para publicar uma aplicação com banco de dados em poucos passos.

Dn449970.68665980A66F5D5D3A2324D38A0A4E89(pt-br,MSDN.10).png

Figura 27 – Alterações publicadas

Conclusão

Sem dúvida alguma o Azure é uma forma fantástica de ter a sua aplicação na nuvem e disponível a qualquer pessoa em tempo real. Use este artigo para guia-lo na criação e publicação de uma aplicação. Crie uma conta no Azure, é gratuito, é necessário informar o número do cartão de crédito para efeito de cadastro apenas, para validar quem é você, não para cobrança, exceto se você ultrapassar o que é oferecido gratuitamente.

E, o melhor de tudo é que o site já está no ar, basta divulgar a URL as pessoas. Caso já tenha uma URL própria, você pode apontar para esta URL do Azure diretamente no seu provedor. Indico que use o Azure como repositório de aplicações e bancos de dados, assim você jamais precisa se preocupar com a infra-estrutura, atualizações de softwares, correções de segurança, enfim, esta é a parte que a Microsoft nos oferece, e cabe a nós, usarmos desta estrutura da melhor forma possível.

Sobre o Autor

Renato Haddad (rehaddad@msn.comwww.renatohaddad.com ) é MVP, MCT, MCPD e MCTS, palestrante em eventos da Microsoft em diversos países, ministra treinamentos focados em produtividade com o VS.NET 2012/2013, ASP.NET 4/5, ASP.NET MVC, Entity Framework, Reporting Services, Windows Phone e Windows 8. Visite o blog http://weblogs.asp.net/renatohaddad.

Mostrar:
© 2014 Microsoft