rsantosdev

Rafael dos Santos, especialista em desenvolvimento web/cloud. Apaixonado por asp.net e azure e compartilha como eh o dia a dia de um programador brasileiro no mundo gringo.

[AZURE] Publicando Angular2 + TypeScript + Webpack direto do Github

November 11, 2016 in #azure | | | Share on Google+

Ola pessoALL,

Continuando nossa serie de posts sobre publicações de sites no azure, hoje vamos falar sobre aplicações com TypeScript e html (sem nenhum web server especifico).

Com a evolução dos frameworks para produção de Single Page Applications eh cada vez mais comum a produção de front-end puramente em html + javascript.
Durante o desenvolvimento temos vários arquivos .js ou .ts e usamos algum automatizador de tarefas como gulp ou grunt, para gerar o arquivo .js final, adicione ainda Sass ou Less a equação e temos um cenário completo do dia a dia da maioria dos devs de front-end hoje em dia.

Felizmente com o Azure e a engine de publicação de sites eh muito fácil customizarmos o script de publicação e integrar direto com o GitHub.

Vamos fazer uma demo publicando uma aplicação com Angular2 + TypeScript + WebPack direto do GitHub gerando o build final. Vamos la!

Forkando o Repositório

Para começarmos vamos usar o repositório do Angular2 WebPack Starter:
https://github.com/AngularClass/angular2-webpack-starter

Crie um fork do repositório para sua conta do GitHub, precisaremos para fazer a integração com o Azure. Apos o fork clone o repositório localmente, lembre de substituir o rsantosdev pelo seu username do github.
git clone https://github.com/rsantosdev/angular2-webpack-starter.git

O repositório contem toda a configuração necessária para se trabalhar com Angular2 + Webpack, inclusive com testes, para testar o projeto localmente navegue ate o diretório aonde o projeto foi clonado e rode os seguintes comandos:

  • Instalar as dependências: npm install
  • Startar o servidor web: npm start

Apos o processo todo navegue ate: http://localhost:3000
Imagem site localhost

Tudo certo agora, vamos fazer o deploy para o Azure.

Criando o script de deployment

Agora que temos nosso projeto configurado e rodando vamos criar o nosso script de deploy para o azure, a maneira mais fácil de criamos eh usar o azure-cli, se você ainda não tem instalado, rode o seguinte comando:
npm i -g azure-cli

Com a cli do azure instalada, vamos aos passos para gerar o script:

  • Primeiro precisamos forcar o modo asm, execute o seguinte comando:
    azure config mode asm, o output deve ser parecido com:
info:    Executing command config mode  
info:    New mode is asm  
info:    config mode command OK  
  • Para gerar o script de deployment:
    azure site deploymentscript --node

  • Ao final você terá 2 arquivos gerados pelo cli:
    .deployment - Indica qual o script sera executado, que por padrão eh o deployment.cmd.
    deployment.cmd - Contem o script para deployment

Toda a logica para o deploy fica no deployment.cmd, a primeira vista o arquivo pode paracer complicado mas a maioria do script eh para garantir que o script funcione localmente, procure a seguinte sessão para personalizar o script:

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:: Deployment
:: ----------

... Adicione os passos necessários aqui!

O arquivo gerado contem 3 passos:

  • KuduSync
  • Select node version
  • Install npm packages

Iremos adicionar mais um passo, depois do final do passo 3 adicione o seguinte código:

:: 4. Builds the application
pushd "%DEPLOYMENT_TARGET%"  
call :ExecuteCmd !NPM_CMD! run build:prod  
IF !ERRORLEVEL! NEQ 0 goto error  
popd  

O código eh responsável por ir ate a pasta aonde a aplicação esta, no nosso caso o wwwroot e rodar o comando npm run build:prod, esse comando esta configurado no arquivo package.json e eh responsavel por criar o build da nossa aplicacao.
Ao final atualize o github com o comando git push origin master

Publicando para o Azure com o GitHub

Com nosso código pronto e nosso build configurado, agora podemos criar nossa aplicação no painel do Azure e fazer o setup do deployment pelo GitHub.

Imagem nova webapp

  • Selecione sua webapp, depois deployment options, temos varias opções para integração, hoje iremos utilizar o GitHub. Apos selecionado o GitHub configure o repositório conforme a segunda imagem

Imagem deployment options Imagem github options

  • Ao termino da configuração o Azure ira fazer o primeiro build da sua aplicação, durante o build, você pode clicar no mesmo e conferir os passos e os detalhes do log.

Imagem building Imagem builded

Quase tudo pronto, precisamos soh de uma ultima configuração, a task build:prod gera os arquivos na pasta dist, então precisamos mapear o root da aplicação como sendo a pasta dist e não a pasta wwwroot.

  • Selecione Application Settings e desça ate o fim da pagina para a sessão Virtual Applications and directories e configure conforme a imagem

Imagem virtual directories

Com tudo configurado, navegue ate o seu site e teste a aplicação:
http://angular2-auto-publish.azurewebsites.net/#/

A partir de agora todo check-in na branch ira gerar um novo deploy e atualizara sua aplicação.

Conclusão

Vimos como eh fácil configurar um processo de deploy personalizado com o Azure websites, podemos personalizar deployments de node.js, react e outras tecnologias.

Para mais informações acesse: https://github.com/projectkudu/kudu/wiki/Custom-Deployment-Script

Por hoje eh só pessoal, qualquer duvida e só deixar um comentário ou abrir uma issue la no repositório: https://github.com/rsantosdev/angular2-webpack-starter

November 11, 2016 in #azure | | | Share on Google+