[AZURE] Publicando Angular2 + TypeScript + Webpack direto do Github
![[AZURE] Publicando Angular2 + TypeScript + Webpack direto do Github](/content/images/size/w2000/2016/10/windows-azure-cloud-3.png)
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
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 odeployment.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.
- Navegue ate o portal do Azure: https://portal.azure.com
- Crie uma 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
- 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.
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
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