Pular para o conteúdo principal

​
Desenvolvimento Profissional de Aplicações Astro

  • Antes de começar, certifique-se de que você tem Node.js (>=16.x) e npm instalados no seu sistema. Se ainda não os tem, faça o download no site oficial do Node.js.
  • Em seguida, crie uma conta no Square Cloud através da página de cadastro. Você pode registrar-se rapidamente usando seu e-mail.
  • Por fim, verifique se possui um plano pago ativo na sua conta. Você pode ver e adquirir um plano conforme suas necessidades aqui.

​
Configuração do Astro

Para criar um projeto Astro, execute o inicializador oficial: 
npm create astro@latest
Siga as instruções para selecionar um template e as opções do projeto. Após a criação, entre na pasta do projeto e instale as dependências: 
cd my-astro-site
npm install

​
Criando um Projeto Astro

Inicie o servidor de desenvolvimento com: 
npm run dev
O Astro normalmente inicia o servidor de desenvolvimento em http://localhost:3000. Para criar uma página simples, adicione src/pages/index.astro com o conteúdo abaixo: 
---
---
<h1>Olá do Astro!</h1>
Você pode adicionar componentes em src/components/ e importá-los nas suas páginas.

​
Criando o Arquivo de Configuração do Square Cloud

Saiba mais: como criar o arquivo de configuração para o Square Cloud.

O arquivo squarecloud.app define o nome da sua aplicação, descrição, versão, ponto de entrada e outras configurações essenciais.

​
Comprar um Plano Antes de Enviar o Projeto

Antes de enviar seu projeto ao Square Cloud, certifique-se de ter um plano ativo que atenda às necessidades de recursos da sua aplicação. Sites construídos com Astro costumam ser estáticos e muito eficientes em termos de recursos, portanto o plano Basic ou Standard atende muitos projetos. Se você usar adapters de servidor, renderização dinâmica ou lógica de backend pesada, considere o plano Pro.
Não tem certeza de quanta RAM e CPU um site Astro precisa? Sites estáticos gerados pelo Astro são leves e normalmente exigem poucos recursos. Se você utilizar renderização no servidor ou adapters, a necessidade dependerá do runtime — o plano Standard é um bom ponto de partida na maioria dos casos.

​
Build do Astro para Produção

Faça o build de produção antes de enviar: 
npm run build
O Astro gerará a saída otimizada dentro da pasta dist/ por padrão. Para servir um site estático Astro no Square Cloud, verifique se sua configuração ou servidor aponta para a pasta dist/. Se estiver usando um servidor Node, ajuste o campo START conforme necessário.

​
Biblioteca express

Para hospedar corretamente no Square Cloud, você deve garantir que o servidor entregue arquivos estáticos. Para usar um servidor Node com Express, é comum algo como:
server.js
import express from 'express';
import path from 'path';

const app = express();

app.use(express.static({'dist/'}));

app.get('*', (req, res) => {
  res.sendFile('dist/index.html');
});

app.listen(80, () => console.log('Server running on port 80'));
Ajuste os parâmetros dist para a pasta de build do seu projeto. Se os arquivos estiverem em uma subpasta dentro de build ou dist, use o caminho até ela em vez de dist.

​
Biblioteca serve

​
Instalando a Biblioteca Serve

Para instalar a biblioteca serve, navegue até o diretório do seu projeto no terminal e execute o seguinte comando: 
npm install serve@14.2.3
Este comando instala a versão 14.2.3 da biblioteca serve. Se desejar instalar a versão mais recente, você pode omitir o @14.2.3.

​
Configurando o Script de Inicialização

Após instalar a biblioteca serve, você precisa configurar o script de inicialização do seu projeto para usar o serve. Para isso, abra o arquivo package.json do seu projeto e adicione um novo script chamado start:prod: 
"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}
No script start:prod, o comando serve -s dist -l 80 executa as seguintes funções:
  • serve: Este é o comando para iniciar o servidor serve.
  • -s dist: A opção -s serve o diretório dist no modo single-page application. Isso significa que todas as requisições não encontradas serão redirecionadas para index.html. O diretório dist é comumente criado quando você executa npm run build.
  • -l 80: A opção -l seguida de 80 instrui o serve a escutar na porta 80. A porta 80 é a porta padrão para tráfego HTTP.
Ajuste os parâmetros dist para a pasta de build do seu projeto. Se os arquivos estiverem em uma subpasta dentro de build ou dist, use o caminho até ela em vez de dist.

​
Upload do Projeto para a Square Cloud

Após preparar todos os arquivos do projeto, proceda com o upload para a Square Cloud e hospede sua aplicação profissionalmente.
  • Upload via Dashboard
  • Upload via CLI
Acesse o Dashboard da Square Cloud e faça o upload dos arquivos do seu projeto.

​
Recursos Adicionais

Para mais informações sobre o Astro, visite a documentação oficial aqui.

​
Solução de Problemas

​
Domínio Personalizado

Para usar domínio personalizado (ex: meusite.com) ao invés da URL padrão https://meusite.squareweb.app/, você precisa do plano Standard ou superior. O subdomínio é definido pelo campo SUBDOMAIN no arquivo de configuração. Veja: Como configurar seu domínio personalizado.

​
Requisitos Mínimos de RAM

Mínimo: 512MB de RAM para websites/APIs simples. Para sites com frameworks (Next.JS, React, Vue, Angular, etc.), sugerimos sempre pelo menos 1GB de RAM. Para aplicações maiores, use mais RAM para evitar erro LACK_OF_RAM e garantir performance.

​
Não foi possível encontrar esse site.

Verifique se o subdomínio/domínio corresponde ao configurado no campo SUBDOMAIN ou nas configurações de domínio personalizado. Se você acabou de enviar o site, aguarde até 60 segundos para a Square liberar o primeiro acesso.

​
Site demorou demais para responder...

Verifique se configurou corretamente a porta 80 e host 0.0.0.0 na aplicação. Recomendamos usar as variáveis de ambiente forçadas da Square: PORT e HOST do arquivo .env.
Se você continuar enfrentando dificuldades técnicas, nossa equipe de suporte especializada está disponível para auxiliá-lo. Entre em contato conosco e teremos prazer em ajudá-lo a resolver qualquer questão.