Compartilhar via

Tutorial: Implantar repositórios do GitLab em Aplicativos Web Estáticos do Azure

Os Aplicativos Web Estáticos do Azure tem opções de implantação flexíveis que permitem trabalhar com vários provedores. Neste artigo, você implantará um aplicativo Web hospedado no GitLab para Aplicativos Web Estáticos do Azure.

Neste tutorial, você aprenderá a:

  • Importar um repositório para o GitLab
  • Criar um aplicativo Web estático
  • Configurar o repositório do GitLab para implantar no Aplicativos Web Estáticos do Azure

Pré-requisitos

Criar um repositório

Este artigo usa um repositório do GitHub como a origem para importar código para um repositório do GitLab.

  1. Entre em sua conta do GitLab e acesse https://gitlab.com/projects/new#import_project

  2. Selecione Repositório por URL.

  3. Na caixa URL do repositório do Git, insira a URL do repositório para sua escolha de estrutura.

  4. Na caixa Slug do projeto, insira my-first-static-web-app.

  5. Selecione Criar projeto e aguarde um momento enquanto seu repositório é configurado.

Criar um aplicativo Web estático

Agora que o repositório foi criado, você pode criar um aplicativo Web estático no portal do Azure.

  1. Acesse o portal do Azure.

  2. Selecione Criar um recurso.

  3. Pesquise Aplicativos Web Estáticos.

  4. Selecione Aplicativos Web Estáticos.

  5. Selecione Criar.

  6. Na seção Básico, comece configurando seu novo aplicativo.

    Configuração Valor
    Assinatura do Azure Selecione sua assinatura do Azure.
    Grupo de recursos Selecione o link Criar e insira static-web-apps-gitlab.
    Name Insira my-first-static-web-app.
    Tipo de plano Selecione Gratuito.
    Origem Selecione Outro.

  7. Selecione Examinar + criar.

  8. Selecione Criar.

  9. Selecione Ir para o recurso.

  10. Escolha Gerenciar token de implantação.

  11. Copie o valor do token de implantação e reserve-o em um editor para uso posterior.

  12. Selecione Fechar na janela Gerenciar token de implantação.

Criar a tarefa de pipeline no GitLab

Agora que você tem o token de implantação, adicione uma tarefa de fluxo de trabalho responsável por criar e implantar seu site à medida que faz alterações.

Adicionar token de implantação

Ao seguir as etapas a seguir, certifique-se de selecionar * para a seção de ambientes. Pode parecer que o valor padrão é all, mas você precisa selecionar a lista suspensa e escolher manualmente *.

  1. Acesse o repositório no GitLab.

  2. Selecione Configurações.

  3. Selecione CI/CD.

  4. Ao lado da seção Variáveis, selecione Expandir.

  5. Selecione Adicionar variável.

  6. Na caixa Chave, insira DEPLOYMENT_TOKEN.

  7. Na caixa Valor, colar o valor do token de implantação que você reserva em uma etapa anterior.

  8. Selecione Adicionar variável.

Adicionar arquivo

  1. Retorne à tela principal do repositório no GitLab.

  2. Selecione o botão Editar e escolha, web IDE.

  3. Verifique se a ramificação principal está selecionada no menu suspenso da ramificação.

  4. Crie um novo arquivo chamado .gitlab-ci.yml na raiz do repositório. (Certifique-se de que a extensão de arquivo seja .yml.)

  5. Insira o YAML a seguir no arquivo.

    variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

    As propriedades de configuração a seguir são usadas no arquivo .gitlab-ci.yml para configurar seu aplicativo Web estático.

    A variável $CI_PROJECT_DIR é mapeada para o local da pasta raiz do repositório durante o processo de compilação.

    Propriedade Descrição Exemplo Obrigatório
    APP_PATH Local do código do aplicativo. Digite $CI_PROJECT_DIR/ se o código-fonte do aplicativo estiver na raiz do repositório ou $CI_PROJECT_DIR/app se o código do aplicativo estiver em uma pasta chamada app. Sim
    API_PATH Local do seu código de Azure Functions. Digite $CI_PROJECT_DIR/api se o código do aplicativo estiver em uma pasta chamada api. No
    OUTPUT_PATH Local da pasta de saída de compilação relativo ao APP_PATH. Se o código-fonte do aplicativo estiver localizado em $CI_PROJECT_DIR/app e o script de compilação gerar arquivos para a pasta $CI_PROJECT_DIR/app/build, defina $CI_PROJECT_DIR/app/build como o valor OUTPUT_PATH. No
    API_TOKEN Token de API para implantação. API_TOKEN: $DEPLOYMENT_TOKEN Sim

  6. Confirmar alterações ao branch principal e fechar o IDE da Web.

  7. Retorne ao seu site e selecione os itens de menu Configurações>> para exibir o progresso da implantação.

Assim que a implantação for concluída, você poderá visualizar seu site.

Exibir o site

Há dois aspectos na implantação de um aplicativo estático. A primeira etapa cria os recursos subjacentes do Azure que compõem seu aplicativo. O segundo é um fluxo de trabalho do GitLab que compila e publica seu aplicativo.

Antes de ir até o novo site estático, a compilação de implantação deve primeiro concluir a execução.

A janela de visão geral de Aplicativos Web Estáticos exibe uma série de links que ajudam você a interagir com seu aplicativo Web.

  1. Retorne ao aplicativo Web estático no portal do Azure.

  2. Vá para a janela Visão geral.

  3. Selecione o link no rótulo da URL. Seu site é carregado em uma nova guia.

Limpar os recursos

Se caso não pretende usar esse aplicativo, você pode excluir a instância dos Aplicativos Web Estáticos do Azure e todos os serviços associados removendo o grupo de recursos.

  1. Selecione o grupo de recursos static-web-apps-gitlab na seção Visão geral.

  2. Selecione Excluir grupo de recursos na parte superior da Visão geral do grupo de recursos.

  3. Insira o nome do grupo de recursos static-web-apps-gitlab em diálogo de confirmação Tem certeza de que deseja excluir "static-web-apps-gitlab"?.

  4. Selecione Excluir.

O processo para excluir o grupo de recursos pode levar alguns minutos para ser concluído.

Próximas etapas

Adicionar uma API

  • Last updated on