Bruno Scrok Brunoro
Jan 5, 2017 · 4 min read

E ai Galera, depois de um longo recesso resolvi voltar a escrever um post para vocês, dessa vez com uma coisa inédita! Vou falar sobre Azure, a platforma de cloud da Microsoft.

Pra quem me conhece sempre soube que nunca fui muito fã da Microsoft, mas de uns tempos pra cá começei a parar de ser radicalista e olhar com carinho as ferramentas da empresa do Tio Bill.

Já tinha ouvido falar do Azure, mas nunca tive o interesse de conhecer e entender como funciona, mas como o mundo da voltas, hoje estou aqui para contar a minha experiencia como Azure juntamente com o Polymer, que é uma biblioteca da Google que facilita a criação de Web Components, que são elementos HTML customizados, independentes e reutilizáveis.

Chega de blá-blá-blá e bora botar a mão na massa, o exemplo que vou utilizar é o site do Capivara Codes Conference http://capivara.codes o site foi baseado no Hoverboard criado pelo pessoal do GDG Lviv, o código está disponível aqui.

O site todo é feito com HTML, e as configurações usando arquivos JSON, resumindo todo estático. O Hoverboard não tem muito segredo pois a documentação é bem completa.

Mas então qual é a dificuldade? Nenhuma, eu precisei entender como o Azure App Service funciona para deixar tudo redondo para publicação de um site estático.

Criando o App Service

Tendo o seu site estático ponto e rodando na sua maquina, primeira coisa que temos que fazer é criar um App Service na sua conta do Azure pelo http://portal.azure.com

Se você não tem uma conta no Azure, pode conseguir uma de graça pelo Visual Studio Dev Essentials (fique ligado a Microsoft da varias coisas de graça).

Localize esse item de menu e logo mais já selecione a opção adicionar

Logo após você será direcionado para uma página com diversos serviços para selecionar.

Escolha a opção Web App

Em seguida ira abrir um página explicando o serviço e o que você pode fazer com ele, selecione a opção criar e você será direcionado para um wizard.

Preencha os campos necessários e clique em criar no rodapé da página.

Nesse momento você já tem um App Service configurado e rodando na sua conta Azure, o que precisamos fazer agora são alguns detalhes que são chaves para que seu site estático funcione corretamente no Azure.

Primeira coisa, temos que criar um arquivo de Web.Config na raiz do projeto e adicionar algumas tags XML como no exemplo a baixo:

Adicionamos a tag staticContent para sinalizar que quando a pagina HTML solicitar arquivos do tipo .json .markdown e .png o IIS carregue ele de acordo com os formatos certos, se não colocar essa tag o IIS vai entender esses arquivos como HTML e provavelmente seu site não ira funcionar. Isso vale para qualquer arquivo que o site carregue e não seja HTML ou JavaScript.

A segunda tag que iremos adicionar é a rule para sinalizar que toda url que chegar no IIS ele redirecione para a raiz do site, isso porque o IIS entende uma URL como um caminho dentro dos arquivos quando usado conteúdos estáticos, mas como no nosso site quem controla as rotas é o polymer adicionamos essa tag e tudo ira funcionar corretamente.

Isso tambem vale para sites usando AngularJS com rotas controladas pelo ui.router ou ng-router.

Deploy direto do Github (é lindo)

Para finalizar, vamos configurar o Deployment Options para que após cada commit no seu repositório o site já seja atualizado :D

Selecione a opção Deployment options

O legal que o Azure ja tem os principais versionadores de código, para você configurar para que o próprio Azure possa fazer o deploy de acordo com os commits.

Sources Control que estão disponíveis para fácil integração

Bom aqui no meu caso eu vou usar o GitHub, seleciono a opção e sigo o wizard, ele ira solicitar permissão, lembre de dar as permissões para o repositório correto.

GitHub configurado para fazer o deploy automático.

Com isso feito, seu site em breve estara no ar, demora alguns minutos para o Azure fazer um pull dos códigos que estão no repositório e publicar pela primeira vez.

Se você tiver feito tudo corretamente, você ira ver o último commit com um check sinalizando que essa versão é a que foi publicada.

E tchrammmmm seu site está no ar!

Corre que tem vaga ainda!! — http://capivara.codes

Bom o que eu tinha pra mostrar pra você por hoje é isso, espero que tenham gostado, se tiverem dúvidas tem meus contatos no meu site, e se gostaram compartilhei para seus amiguinhos!

Um abraço!

Senhora Capivara

Blog da Senhora Capivara

Bruno Scrok Brunoro

Written by

Desenvolvedor, palestrante, musico, jipeiro e um Gordo Raiz — http://brunosbrunoro.com.br

Senhora Capivara

Blog da Senhora Capivara

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade