Crie WebSites no Azure com Visual Studio Code e FTP

Olá pessoal, recentemente publicamos um artigo sobre o Visual Studio Code e de como desenvolver WebSites através da ferramenta.

Hoje vamos citar brevemente como atualizar um WebSite no Microsoft Azure usando FTP a partir do Viusal Studio Code.

Apesar de focarmos especificamente no Azure, podemos usar o mesmo procedimento a seguir para sincronizar nossas mudanças com qualquer servidor FTP.

Vale lembrar que o Visual Studio Code é multiplataforma, disponível para Windows, Linux e MacOS X. E o Microsoft Azure é a solução de nuvem da Microsoft que também pode ser acessado a partir de qualquer sistema operacional.

Vamos começar criando um novo WebSite no Azure (se você não tem uma conta no Azure, cadastre-se aqui para ganhar 30 dias de teste). Acesse o portal do Microsoft Azure e então selecione o item “+ Novo” no menu lateral > “Web + Celular” > “Aplicativo Web”:

aprenda_como_configurar_ftp_visual_studio_code_newwebsite_part1

Na hora de definir o plano de serviço, sugiro definir o tipo de preço “F1” Gratuito para não gastarmos os créditos sem necessidade (clicar no link “Exibir tudo” para ter acesso a todos os tipos de preço disponíveis):

aprenda_como_configurar_ftp_visual_studio_code_newwebsite_part2Após criado o aplicativo Web, o mesmo aparecerá no seu painel. Mas caso isso não aconteça, é só usar a ferramenta de busca e especificar o nome do seu aplicativo Web. De lá, você pode também fixar o aplicativo Web no painel principal:

aprenda_como_configurar_ftp_visual_studio_code_newwebsite_part3

Agora acesse seu novo aplicativo Web. Lá você encontrará a URL onde o site está publicado (ex.: http://talkitbrtutorial-website.azurewebsites.net) além de outras informações/configurações. Baixe o perfil de publicação que iremos usar para acessar os arquivos do site via FTP:

aprenda_como_configurar_ftp_visual_studio_code_newwebsite_part4

Será baixado um arquivo.xml com configurações que permitem publicar alterações no aplicativo Web.

Agora vamos abrir o Visual Studio Code. Caso você não tenha ele instalado, acesse a página oficial da ferramenta e faça o download gratuito.

Uma vez instalado, vamos baixar uma extensão do Visual Studio Code que permite usar o FTP para baixar e enviar arquivos. Para tanto, pressione as teclas CTRL + SHIFT + p e digite “extensions”:

aprenda_como_configurar_ftp_visual_studio_code_extinstall

Selecione o item “Extensions: Install Extension” e então busque por ftp-sync:

aprenda_como_configurar_ftp_visual_studio_code_install_ftpsync

Após a instalação será solicitado o reinício do Visual Studio Code. Feito isso, vamos agora selecionar uma pasta onde manteremos os arquivos do nosso aplicativo Web:

aprenda_como_configurar_ftp_visual_studio_code_newfolder

Sugiro criar uma pasta nova para então selecioná-la.

Após isso, vamos definir as configurações do FTP. Pressione as teclas CTRL + SHIFT + p, digite “sync init” e selecione o item “Ftp-sync: init”. Será criado o seguinte arquivo:

{
    "remotePath": "./",
    "host": "host",
    "username": "username",
    "password": "password",
    "port": 21,
    "protocol": "ftp",
    "uploadOnSave": false,
    "passive": false,
    "debug": false,
    "ignore": [
        "\\.vscode",
        "\\.git"
    ]
}

Agora vamos editar o arquivo. Para isso, vamos precisar daquele arquivo com perfil de publicação que baixamos anteriormente. Neste arquivo temos o perfil de publicação usando o método MSDeploy (publicação via Visual Studio) e também o método de publicação FTP:

  • “remotePath”: especificar o valor “./site”.
  • “host”: especificar o valor do atributo “publishUrl” especificado no perfil de publicação FTP. Mas lembre-se que precisamos apenas do host, então não inclua a definição do protocolo “ftp://”. Exemplo: waws-prod-db3-003.ftp.azurewebsites.windows.net
  • “username”: especificar o valor do atributo “userName”. Aqui lembre-se de incluir o character escape “\” antes do outro “\” especificado no nome do usuário.
  • “password”: especificar o valor do atributo “userPWD”.

Agora salve o arquivo, pressione as teclas CTRL + SHIFT + p e digite “sync” e selecione o item “Ftp-sync: Remote to Local” > “.” > “Full sync” > “Run”. Será baixado o seguinte arquivo:

aprenda_como_configurar_ftp_visual_studio_code_downloadhtml

Agora vamos alterar o arquivo. Vou substituí-lo pelo seguinte HTML:

<!DOCTYPE html>
<html>
    <head>    
        <title>Meu novo site</title>
        <meta charset="iso8859-1">    
    </head>
    <body>
        <div>
            <h1>Novo site criado no Visual Studio Code</h1>
        </div>
    </body>
</html>

Suba as alterações. Pressione as teclas CTRL + SHIFT + p, digite “sync” e selecione o item “Ftp-sync: Local to Remote” > “wwwroot” > “Full sync” > “Run”. As alterações serão enviadas para o seu aplicativo Web e poderemos verificá-las através da URL que está disponível no painel de informações do nosso aplicativo Web:

aprenda_como_configurar_ftp_visual_studio_code_newhtml

Pronto! E agora é só continuarmos o desenvolvimento do nosso site. Até a próxima e continuem nos acompanhando no talkitbr.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s