![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/1.png\")
<\/p>\n
ir\u00e1 aparecer Vps e Deploy selecione “DEPLOY<\/strong>“.<\/p>\n Ap\u00f3s isso, ir\u00e1 listar todos os planos de servi\u00e7os Paas contratados, selecione em qual deseja criar sua aplica\u00e7\u00e3o e clique em “Gerenciar projetos” do plano desejado.<\/p>\n Com plano j\u00e1 selecionado voc\u00ea ir\u00e1 escolher que tipo de aplica\u00e7\u00e3o deseja criar:<\/p>\n Conforme a imagem abaixo, voc\u00ea pode gerenciar suas aplica\u00e7\u00f5es j\u00e1 criadas ou adcionar uma nova.<\/p>\n Nosso caso, vamos criar uma nova, em outro momento iremos abordar sobre gerenciar. Ent\u00e3o pode clicar em “adcionar nova aplica\u00e7\u00e3o web” para adicionar um app front-end<\/p>\n Na tela de cria\u00e7\u00e3o, voc\u00ea dever\u00e1 inserir o nome da aplica\u00e7\u00e3o. Vale ressaltar que esse nome ser\u00e1 utilizado no dom\u00ednio gratuito, portanto, escolha um nome que identifique claramente sua aplica\u00e7\u00e3o.<\/p>\n Em seguida, selecione uma das tecnologias<\/strong> dispon\u00edveis. At\u00e9 o momento deste tutorial, as op\u00e7\u00f5es s\u00e3o: Vue, React e Angular.<\/p>\n O pr\u00f3ximo passo \u00e9 escolher se deseja utilizar um dom\u00ednio<\/strong> gratuito gerado pelo sistema para acessar sua aplica\u00e7\u00e3o ou se prefere apontar um dom\u00ednio pr\u00f3prio<\/strong> j\u00e1 existente (neste caso, informe o dom\u00ednio no campo abaixo).<\/p>\n segue a imagem como exemplo:<\/p>\n Ap\u00f3s autorizar, selecione o reposit\u00f3rio que ser\u00e1 utilizado para o deploy.<\/strong><\/p>\n Caso sua aplica\u00e7\u00e3o necessite de um arquivo Esse bloco \u00e9 respons\u00e1vel pelos comandos de inicializa\u00e7\u00e3o e atualiza\u00e7\u00e3o da sua aplica\u00e7\u00e3o.<\/p>\n Por exemplo, caso voc\u00ea escolha O comando de rebuild ser\u00e1 executado sempre que houver uma atualiza\u00e7\u00e3o do seu c\u00f3digo. Ou seja, toda vez que voc\u00ea fizer um update\/deploy da aplica\u00e7\u00e3o, o sistema utilizar\u00e1 esse comando para reconstruir o projeto.<\/p>\n Esse comando ser\u00e1 executado apenas na primeira inicializa\u00e7\u00e3o da aplica\u00e7\u00e3o. Aqui voc\u00ea pode adicionar todos os comandos necess\u00e1rios para o funcionamento do projeto, incluindo:<\/p>\n Caso nenhum comando seja informado, o sistema utilizar\u00e1 o comando padr\u00e3o recomendado automaticamente.<\/p>\n Por\u00e9m, dependendo da estrutura da sua aplica\u00e7\u00e3o, n\u00e3o configurar corretamente esses comandos pode fazer com que a aplica\u00e7\u00e3o apresente erros ou n\u00e3o funcione corretamente.<\/p>\n caso n\u00e3o coloque nada os dois comando seguir\u00e3o o padr\u00e3o indicado\u00a0<\/em><\/strong><\/p>\n Em seguida, clique em “Iniciar deploy”<\/strong> e aguarde o processo. Ap\u00f3s o in\u00edcio do processo voc\u00ea ser\u00e1 direcionado para a tela de gest\u00e3o da sua aplica\u00e7\u00e3o.<\/p>\n At\u00e9 aqui, vimos o processo de cria\u00e7\u00e3o para aplica\u00e7\u00f5es Web (front-end). Agora, veremos como realizar esse processo para o back-end (API) e o banco de dados. A estrutura n\u00e3o muda muito, apenas alguns passos e pr\u00e9-configura\u00e7\u00f5es s\u00e3o diferentes. Vamos come\u00e7ar pelo back-end<\/p>\n Criar uma aplica\u00e7\u00e3o back-end (API) n\u00e3o tem muito segredo. O processo \u00e9 praticamente o mesmo da aplica\u00e7\u00e3o front-end: defina o nome, escolha a tecnologia, configure o dom\u00ednio, conecte ao seu GitHub e pronto \u2014 \u00e9 s\u00f3 iniciar o deploy,\u00a0<\/strong>segue a imagem de exemplo: No banco de dados, o processo \u00e9 ainda mais simples: ele cria para voc\u00ea um banco com o nome que voc\u00ea escolher e do tipo que preferir, como MySQL, PostgreSQL ou MongoDB (at\u00e9 o momento deste tutorial). Depois, ele gera o banco junto com suas credenciais, que ficar\u00e3o dispon\u00edveis na tela de gest\u00e3o.<\/p>\n Gerenciar sua aplica\u00e7\u00e3o \u2014 reiniciar, pausar, remover ou enviar comandos via terminal \u2014 \u00e9 muito simples. Veja abaixo o fluxo para realizar essas a\u00e7\u00f5es.<\/p>\n 1- Acesse suas aplica\u00e7\u00f5es web, api ou banco de dados, ao listar voc\u00ea ir\u00e1 gerar um bot\u00e3o gerenciar.<\/p>\n 2- Na tela de gest\u00e3o das aplica\u00e7\u00f5es Web e Back-end, voc\u00ea encontrar\u00e1 o terminal e os bot\u00f5es de a\u00e7\u00e3o, como iniciar, parar, remover ou reiniciar sua aplica\u00e7\u00e3o.<\/p>\n 3-Na tela de gest\u00e3o das aplica\u00e7\u00f5es de banco de dados, o layout \u00e9 um pouco diferente. Al\u00e9m das a\u00e7\u00f5es comuns, como iniciar, parar ou remover, voc\u00ea tamb\u00e9m tem acesso \u00e0s credenciais de conex\u00e3o.<\/p>\n Ao acessar a tela de gest\u00e3o, isso n\u00e3o significa que sua aplica\u00e7\u00e3o j\u00e1 est\u00e1 no ar. Dependendo do tamanho do projeto, ela pode levar alguns instantes para iniciar. Acompanhe os logs para verificar o progresso.![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/2.png\")
<\/p>\n![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/3-1.png\")
<\/p>\n\n
![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/5.png\")
<\/p>\n\n
Criando aplica\u00e7\u00e3o web (front-end)<\/h5>\n<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/6.png\")
<\/p>\n\n
Clique em “Conectar meu reposit\u00f3rio”<\/strong>. Uma nova janela ser\u00e1 aberta, onde voc\u00ea dever\u00e1 fazer login na sua conta do GitHub para autorizar o acesso ao seu projeto.
Ap\u00f3s o login, clique em “Autorizar”<\/strong>, conforme ilustrado na imagem abaixo.<\/li>\n<\/ul>\n![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/7.png\")
<\/p>\n![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/8.png\")
<\/p>\nSubindo arquivo .env (Opcional)<\/strong><\/h5>\n
.env<\/code>, fa\u00e7a o upload dele no \u00edcone de upload ou adicione manualmente informando a key<\/code> e o value<\/code>, por exemplo: TOKEN=1233<\/code>. O pr\u00f3prio sistema criar\u00e1 automaticamente o arquivo .env<\/code> na raiz do seu projeto.<\/p>\n![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/06\/env.png\")
<\/p>\nComandos de Rebuild e Inicializa\u00e7\u00e3o (Importante e opcional)<\/h5>\n
Node.js<\/code>, o sistema exibir\u00e1 dicas de configura\u00e7\u00e3o, como a porta que seu projeto deve utilizar e exemplos de comandos recomendados.<\/p>\nComando de Rebuild<\/h6>\n
Comando de Start da aplica\u00e7\u00e3o<\/h6>\n
\n
![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/06\/cloudx-comandos-deployp.png\")
<\/p>\n
Voc\u00ea poder\u00e1 acompanhar os logs em tempo real atrav\u00e9s do terminal de sa\u00edda.<\/p>\n\n
Criando aplica\u00e7\u00f5es back-end (API)\u00a0<\/strong><\/h5>\n<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/9.png\")
<\/p>\n\n
Criando aplica\u00e7\u00e3o de Banco de Dados<\/h5>\n<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/10.png\")
<\/p>\n\n
Tela de gest\u00e3o<\/h3>\n<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/11.png\")
<\/p>\n![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/12.png\")
<\/p>\n![\"\"](\"https:\/\/blog.cloudx.com.br\/wp-content\/uploads\/2025\/05\/13.png\")
<\/p>\n\n
Pontos importantes a serem ressaltados.<\/strong><\/h4>\n<\/li>\n<\/ul>\n
\n
Se desejar apontar um dom\u00ednio, recomendamos utilizar o Cloudflare e configur\u00e1-lo para apontar para nosso IP principal: 143.208.9.235<\/code>.<\/strong>
Al\u00e9m disso, no painel do seu registrador de dom\u00ednio, configure os DNS para:<\/p>\n\n
ns1.cloudx.work<\/code><\/strong><\/p>\n<\/li>\nns2.cloudx.work<\/code><\/strong><\/h4>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n