Pular para o conteúdo principal

​
Introdução

Para desenvolver e hospedar um aplicativo no Square Cloud, é essencial seguir uma sequência estruturada de configurações e pré-requisitos. Este guia técnico abordará todo o processo, desde a configuração inicial até a implantação em produção.

​
Pré-requisitos

  • Conta Square Cloud: Cadastre-se através da página de cadastro usando seu e-mail.
  • Plano Pago Ativo: Garante recursos dedicados e desempenho otimizado para seu aplicativo. Confira nossos planos disponíveis e escolha o mais adequado às suas necessidades.
Está se perguntando quanta RAM e CPU seu plano precisa para hospedar Aplicações Next.js?
Não se preocupe, estamos aqui para ajudar. Nosso plano Standard oferece 4GB de RAM e 4vCPU, o que deve ser suficiente para a maioria dos Aplicações Next.js. No entanto, se você estiver trabalhando em um projeto maior e precisar de mais estabilidade, recomendamos considerar nosso plano Pro. Com recursos adicionais, você pode manter a estabilidade mesmo durante picos de demanda. Para comprar, basta clicar aqui.

​
Criando o projeto

Antes de começar, certifique-se de ter o Node.js e o npm instalados em seu sistema. Se ainda não os tem, você pode baixá-los no site oficial do Node.js. Para criar um novo projeto Next.js, execute o seguinte comando: 
npx create-next-app@latest my-app
Neste comando, my-app é o nome do seu novo projeto. Você pode substituir my-app por qualquer nome que desejar para seu projeto. O comando npx é uma ferramenta que acompanha o npm, o gerenciador de pacotes do Node.js. Ele é usado para executar pacotes Node.js que estão instalados localmente em seu projeto ou estão disponíveis remotamente no registro do npm. create-next-app é um pacote disponível no registro do npm que configura automaticamente um novo projeto Next.js. Ele cuida de toda a configuração inicial, como a criação do diretório do projeto, a instalação das dependências necessárias e a configuração dos arquivos básicos. @latest é uma tag que especifica que você deseja usar a versão mais recente do pacote create-next-app. Isso garante que você esteja sempre usando a versão mais atualizada e, consequentemente, tenha acesso aos recursos mais recentes.

​
Configurando a Porta 80

A porta 80 é a porta padrão para tráfego HTTP. Para hospedar um site Next.js na Square Cloud, é crucial configurar o uso da porta 80. No Next.js, você pode definir o parâmetro -p 80 no script de inicialização para garantir que seu site funcione corretamente nesta porta.
package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 80",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.1.0"
  }
}

​
Compilando o projeto

Compile a saída de produção antes de fazer o upload: 
npm run build
Isso irá gerar o bundle do Next para produção, criando a pasta .next.

​
Deploying

Após preparar os arquivos do seu projeto, você pode enviá-los para a Square Cloud e hospedar seu projeto. Para fazer isso, crie um arquivo ZIP contendo todos os arquivos do seu projeto. Certifique-se de não incluir a pasta cache de .next.

​
Via dashboard

1

Acesse a página de upload

Acesse a página de upload e envie seu arquivo zip.
2

Configure seu ambiente

Após fazer o upload do seu arquivo zip, você precisará configurar o nome, o arquivo principal ou o ambiente de execução e outras configurações do seu projeto.
Se você estiver enviando um projeto web, certifique-se de selecionar "Publicação na Web" e definir um subdomínio para o seu projeto.
3

Faça o deploy do projeto

Por fim, clique no botão "Deploy" para hospedar seu projeto no Square Cloud. Após o deploy, você poderá monitorar o status e os registros do seu projeto no painel.

​
Via CLI

Para usar esse método, você precisa criar um arquivo de configuração chamado squarecloud.app no diretório raiz do seu projeto. Esse arquivo conterá a configuração necessária para o seu projeto.

Saiba mais sobre: Como criar arquivo de configuração da Square Cloud.

O arquivo squarecloud.app é um arquivo de configuração que será usado para configurar seu aplicativo; ele será usado para definir seu ambiente.
1

Primeiro Passo

Primeiro, você precisa ter a CLI instalada em seu ambiente. Se você ainda não a possui, execute o seguinte comando em seu terminal:
npm install -g @squarecloud/cli
Se você já a possui, recomendamos atualizá-la. Para fazer isso, execute o seguinte comando em seu terminal:
squarecloud update
2

Segundo Passo

Agora, para autenticar e usar outros comandos da CLI, você encontrará sua chave de autorização aqui clicando em "Solicitar Chave da API". Após obter sua chave de autorização, execute o seguinte comando:
squarecloud auth login
3

Terceiro Passo

Finalmente, para fazer o deploy da sua aplicação para a Square Cloud usando a CLI, você precisa executar o seguinte comando:
squarecloud upload
Ou se já possui o zip criado:
squarecloud upload --file <caminho/para/zip>

​
Recursos Adicionais

Para mais informações sobre o Next.js e suas ferramentas, visite a documentação oficial do Next.js. Lá, você encontrará guias detalhados, tutoriais e documentação da API para ajudá-lo a tirar o máximo proveito do Next.js.

​
CI/CD

Temos uma GitHub Action que facilita a atualização do seu projeto. Você pode ver mais aqui Você pode criar um workflow como este: 
name: "Deploy Nextjs app"
on:
  push:
    tags:
      - "v*"
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: npm install

      - name: Build website
        run: npm run build && chmod -R 777 .next next.config.ts package.json

      - name: Add website to zip
        run: zip -r project.zip package.json .next next.config.ts public -x ".next/cache/*"

      - name: Deploy on Square Cloud
        uses: squarecloudofc/github-action@v2
        with:
          command: commit --file project.zip ${{ secrets.SQUARECLOUD_APP_ID }}
          token: '${{ secrets.SQUARE_CLOUD_TOKEN }}'

​
Solução de Problemas

​
Domínio Personalizado

Para usar domínio personalizado (ex: meusite.com) ao invés da URL padrão 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.

​
Contate-nos

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.