---
title: Implantação
slug: studio/implantacao
docTags: 
createdAt: 2026-04-28T18:37:53.133Z
---

## <font color="#DA8D35">1. Imagem de Construção </font>

```javascript
./scripts/build.sh
./scripts/publish.sh -r portus
```

***

## <font color="#DA8D35">2. Implantar Aplicação </font>

```javascript
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:run2biz@host.docker.internal:5432/postgres
```

***

## <font color="#DA8D35">3. Desinstalar o Aplicativo </font>

```javascript
helm uninstall lowcode-studio \
  --kubeconfig ~/.kube/oxygen.yaml \
  --namespace=01-hyper-apps
```

***

## <font color="#DA8D35">4. Variáveis Ambientais </font>

```javascript
# 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...
```

***

## <font color="#DA8D35">5. Integração CI/CD do GitLab </font>

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.

***

### <font color="#DA8D35">5.1. Arquitetura de Pipeline Estágios do Pipeline </font>

O pipeline CI/CD consiste em uma única etapa de construção abrangente que executa múltiplos passos sequenciais:

| <font color="#DA8D35">**Palco**</font> | <font color="#DA8D35">**Descrição**</font>                                                                                                                                                      |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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 |

<font color="#DA8D35">**Fluxo de Trabalho de Processo de Construção** </font>

O processo de compilação executa os seguintes 6 passos sequenciais via o script: `01-build-and-deploy.sh`

<font color="#DA8D35">**Passo 1\: Download do Esquema** </font>

- Baixa o esquema do projeto a partir do endpoint da API&#x20;
- Salva o esquema para o aplicativo usar `schema.json `
- Usa ID do projeto e token de autenticação para acesso seguro&#x20;

<font color="#DA8D35">**Passo 2\: Configuração de Dependência** </font>

- Configura dependências dinâmicas com base nos requisitos do projeto&#x20;
- Atualizações com bibliotecas especificadas na configuração do projeto `package.json `
- Gerencia configurações específicas da biblioteca e plugins&#x20;

<font color="#DA8D35">**Passo 3\: Instalação de Dependência** </font>

- Instala todas as dependências necessárias usando o gerenciador de pacotes Bun&#x20;
- Garante que todas as bibliotecas e plugins estejam disponíveis para a build&#x20;

<font color="#DA8D35">**Passo 4\: Configuração do Projeto** </font>

- Configura com configurações específicas do projeto `app.json `
- Configura configurações específicas de plataforma (Android/iOS)&#x20;
- Gerencia códigos de versão, identificadores de pacotes e configurações da Expo&#x20;
- Configura o roteamento da URL base se especificado&#x20;

<font color="#DA8D35">**Passo 5\: Geração de Ativos** </font>

- Baixa imagens específicas do projeto (tela de inicialização e ícone)&#x20;
- Busca ativos da API usando requisições autenticadas&#x20;
- Salva os ativos nos diretórios apropriados&#x20;

<font color="#DA8D35">**Passo 6\: Implantação da Plataforma** </font>

- <font color="#DA8D35">**Configuração de Webhook**\: </font>Configura webhooks da Expo para notificações de compilação&#x20;
- <font color="#DA8D35">**Build específico para plataforma**\: </font>
- <font color="#DA8D35">**Mobile (Android/iOS)\:**</font> Aciona a construção EAS com perfis específicos de plataforma&#x20;
- <font color="#DA8D35">**Web**\: </font>Desenvolve aplicações web e implanta na hospedagem da Expo&#x20;
- <font color="#DA8D35">**Rastreamento de builds**\:</font> Atualiza o status da build via callbacks da API&#x20;



<font color="#DA8D35">**Configuração** </font>

<font color="#DA8D35">**Variáveis Ambientais Obrigatórias** </font>

As seguintes variáveis de ambiente devem ser configuradas nas configurações do seu projeto no GitLab:

<font color="#DA8D35">**Variáveis de Integração do GitLab (devem ser configuradas no mapa-configuração do servidor)** </font>

| <font color="#DA8D35">**Variável**</font> | <font color="#DA8D35">**Descrição**</font>      | <font color="#DA8D35">**Exemplo/Notas**</font>                               |
| ----------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------- |
| `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`](http://gitlab.home) ou seu domínio do GitLab          |



<font color="#DA8D35">**Build Process Variables (está nas variáveis do pipeline)** </font>

| <font color="#DA8D35">**Variável**</font> | <font color="#DA8D35">**Descrição**</font> | <font color="#DA8D35">**Exemplo/Notas**</font>                   |
| ----------------------------------------- | ------------------------------------------ | ---------------------------------------------------------------- |
| `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 |



<font color="#DA8D35">**Variáveis de Integração Expo** </font>

| <font color="#DA8D35">**Variável**</font> | <font color="#DA8D35">**Descrição**</font>       | <font color="#DA8D35">**Exemplo/Notas**</font> |
| ----------------------------------------- | ------------------------------------------------ | ---------------------------------------------- |
| `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`               |

***

### <font color="#DA8D35">5.2. Geração de Tokens </font>

<font color="#DA8D35">**Pipeline Token** </font>

1. Navegue até seu projeto de lowcode no GitLab&#x20;
2. Vá em Configurações → Tokens de Acesso&#x20;
3. Crie um novo token com escopo `api `
4. Copie o token gerado para `GITLAB_PIPELINE_TOKEN `

<font color="#DA8D35">**Webhook Token** </font>

Gerar uma string aleatória segura para validação do webhook:

:::BlockQuote
openssl rand -hex 32
:::

***

### <font color="#DA8D35">5.3. Detalhes do Roteiro </font>

<font color="#DA8D35">**Visão Geral dos Roteiros Principais** </font>

O pipeline utiliza 6 scripts especializados localizados em: <font color="#DA8D35">**apps/engine/scripts/**</font>

| <font color="#DA8D35">**Roteiro**</font> | <font color="#DA8D35">**Propósito**</font> | <font color="#DA8D35">**Funções-chave**</font>                                                   |
| ---------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| `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                     |

<font color="#DA8D35">**Comportamento Específico da Plataforma** </font>

<font color="#DA8D35">**Plataforma Web** </font>

- Constrói aplicação web usando `bun run build:web `
- Implanta na hospedagem da Expo usando EAS CLI&#x20;
- Gerencia a configuração da URL base para roteamento&#x20;
- Retorna URL de implantação para rastreamento&#x20;

<font color="#DA8D35">**Plataformas Móveis (Android/iOS)** </font>

- Gatilhos EAS construídos com perfis específicos de plataforma&#x20;
- Suporta auto-submissão para builds de produção&#x20;
- Gerencia códigos de versão e números de compilação&#x20;
- Retorna URL de build para monitoramento&#x20;

<font color="#DA8D35">**Webhooks** </font>

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:

| <font color="#DA8D35">**Propriedade**</font> | <font color="#DA8D35">**Valor**</font> |
| -------------------------------------------- | -------------------------------------- |
| URL                                          |                                        |
| token secreto                                | `GITLAB_WEBHOOK_TOKEN`                 |
| Gatilho                                      | \[eventos do oleoduto]                 |
| Verificação SSL                              | habilitado                             |

<font color="#DA8D35">**Corredores** </font>

O pipeline deve ter um runner para executá-lo.

<font color="#DA8D35">**Artefatos Gerados** </font>

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

***

## <font color="#DA8D35">6. Configuração MinIO </font>

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`

***

### <font color="#DA8D35">6.1. Variáveis do Ambiente </font>

Configure o MinIO usando as seguintes variáveis de ambiente:

| <font color="#DA8D35">**Variável**</font> | <font color="#DA8D35">**Descrição**</font> | <font color="#DA8D35">**Exemplo**</font> |
| ----------------------------------------- | ------------------------------------------ | ---------------------------------------- |
| `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`                                   |

***

### <font color="#DA8D35">6.2. Exemplo de Configuração </font>

```javascript
MINIO_ACCESS_KEY=UfT...
MINIO_SECRET_KEY=jX2c...
MINIO_BUCKET=lwc-studio
MINIO_ENDPOINT=minio.home
MINIO_PORT=0
MINIO_USE_SSL=true
```

***

### <font color="#DA8D35">6.3. Exemplo de Desenvolvimento Local </font>

Para uma instância local de MinIO rodando sobre HTTP simples, use valores semelhantes a:

```javascript
MINIO_ACCESS_KEY=minioadmin
MINIO_SECRET_KEY=minioadmin
MINIO_BUCKET=lwc-studio
MINIO_ENDPOINT=localhost
MINIO_PORT=9000
MINIO_USE_SSL=false
```

O 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:

```javascript
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/

***

## <font color="#DA8D35">7. Configuração do Inquilino </font>

O estúdio exige que os seguintes componentes sejam configurados no front manager:

- <font color="#DA8D35">**Aplicação**\: </font>Deve ser criada no front manager&#x20;
- <font color="#DA8D35">**Versão do aplicativo e menu**\: </font>Obrigatório para acesso ao gerente de frente&#x20;
- <font color="#DA8D35">**Associação de Funções**\: </font>O cardápio deve ter uma função associada para acesso do gerente de frente&#x20;
- <font color="#DA8D35">**Inquilino de Recursos**\: </font>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`&#x20;

***

### <font color="#DA8D35">7.1. Configuração </font>

`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`

<font color="#DA8D35">**Inquilino de Recursos** </font>

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`                   |

<font color="#DA8D35">**Aplicação** </font>

Configurações de registro de inscrição:

| <font color="#DA8D35">**Campo**</font> | <font color="#DA8D35">**Descrição**</font> | <font color="#DA8D35">**Valor**</font> |
| -------------------------------------- | ------------------------------------------ | -------------------------------------- |
| `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`                              |

<font color="#DA8D35">**Versão do Aplicativo** </font>

A versão do aplicativo pode ser configurada com qualquer valor.

<font color="#DA8D35">**Cardápio** </font>

O menu pode ser configurado com qualquer valor.

<font color="#DA8D35">**Papel no Cardápio** </font>

Deve corresponder ao valor da variável ambiente. `ADMIN_ROLE`

<font color="#DA8D35">**Solução de problemas** </font>

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.

| <font color="#DA8D35">**Campo**</font> | <font color="#DA8D35">**Exemplo**</font>                             |
| -------------------------------------- | -------------------------------------------------------------------- |
| 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

***

## <font color="#DA8D35">8. Integração do Motor </font>

Existem dois motores suportados: - Expo - Tauri (trabalho em andamento)

***

### <font color="#DA8D35">8.1. Tauri </font>

<font color="#DA8D35">**Visão geral** </font>

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:

1. Studio renderiza o motor em e usando o `<iframe>` `VITE_ENGINE_URL`&#x20;
2. O motor envia para a janela mãe `engine:loaded`&#x20;
3. Studio responde com contendo `studio:schema:get` `{ projectId, initialScreenId }`&#x20;
4. O motor busca dados do projeto da API em `GET /projects/{projectId}/preview`&#x20;
5. O motor renderiza o projeto e envia para o pai `engine:ready `

:::hint{type="warning"}
📌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`
:::

<font color="#DA8D35">**Configuração do Desenvolvimento Local** </font>

Para rodar o Motor Tauri localmente para desenvolvimento:

&#x20;1 - Clone o repositório `lowcode-engine-tauri `

&#x20;2 - Dependências de instalação:&#x20;

:::BlockQuote{indent="1"}
cd lowcode-engine-tauri
bun install
:::

&#x20;3 - Configure o arquivo:.env&#x20;

:::BlockQuote{indent="1"}
VITE\_API\_URL=http\://localhost:8080/api
VITE\_ENGINE\_MODE=PREVIEW
:::

Variável Descrição Padrão&#x20;

| <font color="#DA8D35">**Variável**</font> | <font color="#DA8D35">**Descrição**</font>                           | <font color="#DA8D35">**Padrão**</font> |
| ----------------------------------------- | -------------------------------------------------------------------- | --------------------------------------- |
| `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`                            |

&#x20;4 - Comece o servidor de desenvolvimento:

:::BlockQuote{indent="1"}
bun run dev
:::

O motor estará disponível em [`http://localhost:1420/tauri-engine`](http://localhost:1420/tauri-engine)

&#x20;5 - No Lowcode Studio , defina a URL do motor: `client/.env `

:::BlockQuote
VITE\_ENGINE\_URL=http\://localhost:1420/tauri-engine
:::

<font color="#DA8D35">**Configuração de Origem Cruzada** </font>

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`

```javascript
export const api = axios.create({ baseURL: API_URL, withCredentials: true });
```

<font color="#DA8D35">**Implantação em Produção (MinIO)** </font>

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`&#x20;
- 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.&#x20;

<font color="#DA8D35">**Solução de problemas** </font>

| <font color="#DA8D35">**Sintoma**</font>                 | <font color="#DA8D35">**Solução**</font>                                                                               |
| -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| "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`               |

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/-4_SDcjt_aznvASbRyZ46-20260601-191750.gif)