Implantação
1. Imagem de Construção
./scripts/build.sh
./scripts/publish.sh -r portus2. Implantar Aplicação
helm install lowcode-studio charts/studio \
-f charts/studio/values.yaml \
-f charts/studio/values-oxygen.yaml \
--kubeconfig ~/.kube/oxygen.yaml \
--namespace 01-hyper-apps \
--set image.tag=1.0.0 \
--set env.DATABASE_URL=postgresql://run2biz:[email protected]:5432/postgres3. Desinstalar o Aplicativo
helm uninstall lowcode-studio \
--kubeconfig ~/.kube/oxygen.yaml \
--namespace=01-hyper-apps4. Variáveis Ambientais
# Required for nexus deploy
NEXUS_URL=nexus.centralit.io:9091
NEXUS_USER=run2biz
NEXUS_PASS=nexus...
# Required for portus deploy
PORTUS_URL=registry.cloud4biz.com
PORTUS_USER=automacao-cdi
PORTUS_PASS=UZ4...5. Integração CI/CD do GitLab
O pipeline CI/CD do GitLab automatiza o processo de construção e implantação tanto para versões web quanto mobile do aplicativo studio. Ele se integra com o Expo para builds móveis e gerencia a implantação na web.
5.1. Arquitetura de Pipeline Estágios do Pipeline
O pipeline CI/CD consiste em uma única etapa de construção abrangente que executa múltiplos passos sequenciais:
Palco | Descrição |
|---|---|
build_and_deploy | Processo completo de construção e implantação, incluindo download de esquemas, configuração de dependências, configuração de projetos, geração de ativos e implantação específica da plataforma |
Fluxo de Trabalho de Processo de Construção
O processo de compilação executa os seguintes 6 passos sequenciais via o script: 01-build-and-deploy.sh
Passo 1: Download do Esquema
- Baixa o esquema do projeto a partir do endpoint da API
- Salva o esquema para o aplicativo usar schema.json
- Usa ID do projeto e token de autenticação para acesso seguro
Passo 2: Configuração de Dependência
- Configura dependências dinâmicas com base nos requisitos do projeto
- Atualizações com bibliotecas especificadas na configuração do projeto package.json
- Gerencia configurações específicas da biblioteca e plugins
Passo 3: Instalação de Dependência
- Instala todas as dependências necessárias usando o gerenciador de pacotes Bun
- Garante que todas as bibliotecas e plugins estejam disponíveis para a build
Passo 4: Configuração do Projeto
- Configura com configurações específicas do projeto app.json
- Configura configurações específicas de plataforma (Android/iOS)
- Gerencia códigos de versão, identificadores de pacotes e configurações da Expo
- Configura o roteamento da URL base se especificado
Passo 5: Geração de Ativos
- Baixa imagens específicas do projeto (tela de inicialização e ícone)
- Busca ativos da API usando requisições autenticadas
- Salva os ativos nos diretórios apropriados
Passo 6: Implantação da Plataforma
- Configuração de Webhook: Configura webhooks da Expo para notificações de compilação
- Build específico para plataforma:
- Mobile (Android/iOS): Aciona a construção EAS com perfis específicos de plataforma
- Web: Desenvolve aplicações web e implanta na hospedagem da Expo
- Rastreamento de builds: Atualiza o status da build via callbacks da API
Configuração
Variáveis Ambientais Obrigatórias
As seguintes variáveis de ambiente devem ser configuradas nas configurações do seu projeto no GitLab:
Variáveis de Integração do GitLab (devem ser configuradas no mapa-configuração do servidor)
Variável | Descrição | Exemplo/Notas |
|---|---|---|
GITLAB_PROJECT_ID | Identificador único do projeto de motor lowcode | ID numérico nas configurações do projeto GitLab |
GITLAB_PIPELINE_TOKEN | Token de autenticação para acionar pipelines | Gerar no GitLab → Configurações de projeto → Triggers de Pipeline de → CI/CD |
GITLAB_WEBHOOK_TOKEN | Token de segurança para validação de webhooks | String gerada aleatoriamente para segurança |
GITLAB_URL | URL base da sua instância do GitLab | http://gitlab.home ou seu domínio do GitLab |
Build Process Variables (está nas variáveis do pipeline)
Variável | Descrição | Exemplo/Notas |
|---|---|---|
API_URL | URL base da API lowcode-studio | Usado para download de esquemas e atualizações de compilação |
TOKEN | Token de autenticação para acesso à API | Token portador para comunicação segura de API |
PROJECT_ID | Identificador do projeto alvo para build | Projeto específico em construção |
BUILD_ID | Identificador único de build | Usado para acompanhar o progresso da construção |
BUILD_NUMBER | Número de compilação sequencial | Usado para versão Android Código e Número de compilação para iOS |
PLATFORM | Plataforma alvo para implantação | web, , ou android ios |
PROFILE | Configuração do perfil de construção | development ou production |
VALUES | Objeto de configuração JSON | Contém configurações de projeto, expo, android, ios e biblioteca |
Variáveis de Integração Expo
Variável | Descrição | Exemplo/Notas |
|---|---|---|
EXPO_WEBHOOK_TOKEN | Token secreto para validação de webhooks na Expo | Usado para notificações de compilação e envio |
EAS_NO_VCS | Desativa integração do VCS no CLI EAS | Definido como no ambiente CI 1 |
5.2. Geração de Tokens
Pipeline Token
- Navegue até seu projeto de lowcode no GitLab
- Vá em Configurações → Tokens de Acesso
- Crie um novo token com escopo api
- Copie o token gerado para GITLAB_PIPELINE_TOKEN
Webhook Token
Gerar uma string aleatória segura para validação do webhook:
5.3. Detalhes do Roteiro
Visão Geral dos Roteiros Principais
O pipeline utiliza 6 scripts especializados localizados em: apps/engine/scripts/
Roteiro | Propósito | Funções-chave |
|---|---|---|
01-build-and-deploy.sh | Roteiro principal de orquestração | Coordena todas as etapas de build e cuida da implantação específica da plataforma |
02-configure-dependencies.js | Gerenciamento dinâmico de dependências | Atualizações package.json com bibliotecas e plugins específicos de projetos |
03-configure-project.js | Configuração do projeto | Configura app.json com configurações de plataforma, códigos de versão e configuração da Expo |
04-generate-images.js | Gestão de ativos | Baixa telas de abertura e ícones específicos de cada projeto a partir da API |
05-check-webhooks.sh | Gerenciamento de Webhooks | Garante que os webhooks da Expo estejam devidamente configurados para notificações de compilação |
06-deploy-expo.sh | Implantação da plataforma | Cuida das builds de EAS para implantação móvel e web para hospedagem em Expo |
Comportamento Específico da Plataforma
Plataforma Web
- Constrói aplicação web usando bun run build:web
- Implanta na hospedagem da Expo usando EAS CLI
- Gerencia a configuração da URL base para roteamento
- Retorna URL de implantação para rastreamento
Plataformas Móveis (Android/iOS)
- Gatilhos EAS construídos com perfis específicos de plataforma
- Suporta auto-submissão para builds de produção
- Gerencia códigos de versão e números de compilação
- Retorna URL de build para monitoramento
Webhooks
O pipeline usa webhooks para notificar o servidor sobre o status da build.
Para cada inquilino, precisamos criar um webhook no gitlab para notificar o servidor sobre o status da build.
Exemplo:
Propriedade | Valor |
|---|---|
URL | |
token secreto | GITLAB_WEBHOOK_TOKEN |
Gatilho | [eventos do oleoduto] |
Verificação SSL | habilitado |
Corredores
O pipeline deve ter um runner para executá-lo.
Artefatos Gerados
O pipeline gera os seguintes artefatos: - - Construção de aplicação web (apenas plataforma web) - - Configurações configuradas da aplicação Expo - - Atualizado com dependências dinâmicas - - Esquema de projeto para uso em tempo de execução :sectnums: :secnumníveis: 3dist/app.jsonpackage.jsonschema.json
6. Configuração MinIO
O estúdio usa MinIO exclusivamente para armazenar arquivos APK para o arquivo .dev-client
O APK deve ser solicitado à equipe de desenvolvimento .dev-client
6.1. Variáveis do Ambiente
Configure o MinIO usando as seguintes variáveis de ambiente:
Variável | Descrição | Exemplo |
|---|---|---|
MINIO_ACCESS_KEY | Chave de acesso MinIO para autenticação | UfT… |
MINIO_SECRET_KEY | Chave secreta MinIO para autenticação | jX2c… |
MINIO_BUCKET | Nome do balde alvo para armazenamento | lwc-studio |
MINIO_ENDPOINT | Endpoint do servidor MinIO | minio.home |
MINIO_PORT | Porta para servidor MinIO | 0 |
MINIO_USE_SSL | Habilitar conexão SSL/TLS | true |
6.2. Exemplo de Configuração
MINIO_ACCESS_KEY=UfT...
MINIO_SECRET_KEY=jX2c...
MINIO_BUCKET=lwc-studio
MINIO_ENDPOINT=minio.home
MINIO_PORT=0
MINIO_USE_SSL=true6.3. Exemplo de Desenvolvimento Local
Para uma instância local de MinIO rodando sobre HTTP simples, use valores semelhantes a:
MINIO_ACCESS_KEY=minioadmin
MINIO_SECRET_KEY=minioadmin
MINIO_BUCKET=lwc-studio
MINIO_ENDPOINT=localhost
MINIO_PORT=9000
MINIO_USE_SSL=falseO Studio não exige que o diretório de dados MinIO esteja dentro do repositório. Você pode iniciar o MinIO com qualquer caminho gravável, por exemplo:
mkdir -p ~/minio-data
minio server ~/minio-data --console-address ":9001"Usar um diretório externo ajuda a manter o armazenamento local de objetos separado da base de código e evita preencher o volume do workspace acidentalmente. :sectnums: :secnumníveis: 3server/
7. Configuração do Inquilino
O estúdio exige que os seguintes componentes sejam configurados no front manager:
- Aplicação: Deve ser criada no front manager
- Versão do aplicativo e menu: Obrigatório para acesso ao gerente de frente
- Associação de Funções: O cardápio deve ter uma função associada para acesso do gerente de frente
- Inquilino de Recursos: Fornece strings de conexão ao banco de dados para cada locatário. Sem isso, o estúdio usa por padrão a variável ambiente DATABASE_URL
7.1. Configuração
RESOURCE_TENANT_NAME é o nome da aplicação que deve ser configurada na variável de ambiente e será usada para obter a string de conexão com o banco de dados.
Configure o locatário de recursos no front manager em: hyper-admin/resource-tenant/resource-manager
Inquilino de Recursos
Configuração da conexão com banco de dados:
Campo | Descrição | Exemplo |
|---|---|---|
host | Endereço do host do banco de dados | pgbouncer.<namespace-kubernetes> |
port | Número da porta do banco de dados | 6432 |
databaseName | Nome do banco de dados alvo | <db-name> |
username | Nome de usuário do banco de dados | <db-username> |
password | Senha do banco de dados | <db-password> |
dbms | Sistema de gerenciamento de banco de dados | postgres |
schema | Esquema de banco de dados | lowcode_studio |
Aplicação
Configurações de registro de inscrição:
Campo | Descrição | Valor |
|---|---|---|
name | Identificador de aplicação | @hyper/lwc-studio |
description | Nome de exibição do aplicativo | Lowcode Studio |
type | Tipo de gerenciamento de aplicações | Managed by platform |
render_type | Método de renderização | Legacy |
status | Estado da aplicação | Enabled |
Versão do Aplicativo
A versão do aplicativo pode ser configurada com qualquer valor.
Cardápio
O menu pode ser configurado com qualquer valor.
Papel no Cardápio
Deve corresponder ao valor da variável ambiente. ADMIN_ROLE
Solução de problemas
O Studio armazena em cache a string de conexão do banco de dados quando tentar obter a string de conexão do front manager no REDIS.
Campo | Exemplo |
|---|---|
Chave | edge-runtime::resource-tenants::<RESOURCE_TENANT_NAME>:<TENANT_ID> |
Se a string de conexão de banco de dados não estiver correta, você pode limpar o cache excluindo os in redis. :sectnums: :secnumníveis: 3 :imagesdir: docs/imageskey
8. Integração do Motor
Existem dois motores suportados: - Expo - Tauri (trabalho em andamento)
8.1. Tauri
Visão geral
O motor Tauri exibe prévias móveis de projetos do Lowcode Studio. Ele roda como um iframe dentro do editor Studio e se comunica via .postMessage
O fluxo de comunicação entre Studio e Tauri Engine:
- Studio renderiza o motor em e usando o <iframe> VITE_ENGINE_URL
- O motor envia para a janela mãe engine:loaded
- Studio responde com contendo studio:schema:get { projectId, initialScreenId }
- O motor busca dados do projeto da API em GET /projects/{projectId}/preview
- O motor renderiza o projeto e envia para o pai engine:ready
📌O Studio não envia dados completos do projeto via . Ele envia apenas o , e o Engine busca os dados completos do servidor API. Isso garante que as composições sejam expandidas no lado do servidor .postMessage projectId
Configuração do Desenvolvimento Local
Para rodar o Motor Tauri localmente para desenvolvimento:
1 - Clone o repositório lowcode-engine-tauri
2 - Dependências de instalação:
3 - Configure o arquivo:.env
Variável Descrição Padrão
Variável | Descrição | Padrão |
|---|---|---|
VITE_API_URL | URL do servidor API do Lowcode Studio | /api |
VITE_ENGINE_MODE | Modo do motor: (busca da API) ou (lê JSON local) PREVIEWPRODUCTION | PRODUCTION |
4 - Comece o servidor de desenvolvimento:
O motor estará disponível em http://localhost:1420/tauri-engine
5 - No Lowcode Studio , defina a URL do motor: client/.env
Configuração de Origem Cruzada
Quando rodando localmente, o Motor Tauri () faz requisições de API para o servidor Studio (). Essa configuração de origem cruzada exige:localhost:1420 localhost:8080
- O cliente HTTP do Engine deve ser usado para enviar cookies de autenticação withCredentials: true
- O servidor Studio deve ter CORS configurado com uma origem dinâmica credentials: true
O Engine usa Axios (baseados em busca) configurados em: redaxios src/helpers/api.ts
export const api = axios.create({ baseURL: API_URL, withCredentials: true });Implantação em Produção (MinIO)
Implantações Tauri são entregues por meio de um tempo de execução de borda e exigem que arquivos estáticos sejam armazenados no MinIO.
A equipe de motores fornecerá os arquivos estáticos necessários.
Para implantar o motor Tauri:
- Crie uma pasta chamada dentro do bucket no MinIO. studio-engine-tauri webapps
- Dentro dessa pasta, crie uma subpasta correspondente à versão do motor Tauri (por exemplo, ).1.0.0
- Faça upload do conteúdo fornecido do motor para esta subpasta versionada.
Solução de problemas
Sintoma | Solução |
|---|---|
"Projeto não encontrado" em prévia | Verifique se isso aponta para a URL correta da API e está definido VITE_API_URL VITE_ENGINE_MODE=PREVIEW |
Erros de CORS no console do navegador | Garantir que o cliente API do Engine e o CORS estejam no servidor withCredentials: true credentials: true |
O motor mostra o spinner de carregamento indefinidamente | Verifique o fluxo: verifique o console do navegador para mensagens e postMessage engine:loaded studio:schema:get |
401 Não autorizado no pedido de prévia | O cookie não está sendo enviado. Verificação e configuração do CORS HYPER-AUTH-TOKEN withCredentials |
