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 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.
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.
Agora que temos o projeto criado, na pasta Models, adicione uma classe chamada Medico, conforme a figura 3.
Digite a seguinte estrutura da classe Medico, contendo quatro propriedades. Esta classe será futuramente uma tabela no banco de dados.
C#
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.
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.
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.
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.
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.
C#
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.
C#
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.
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.
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.
C#
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:
C#
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.
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:
C#
<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.
Azure
Agora que o projeto ASP.NET MVC 4 já está prontinho, vamos passar para fase do Azure. Antes de mais nada acesse o Azure e 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.
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.
É 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”.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Automaticamente ao final o site é aberto no navegador. Clique no menu Medicos 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.
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.
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:
CSHTML
http://msdn.microsoft.com/pt-br/library/dn449970.aspx
Faça outra alteração no rodapé do mesmo arquivo, sendo:
CSHTML
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @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.
C#
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.
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.
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.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?