Skip to content
On this page

Implementando um Sítio Estático

Os seguintes guias são baseados em algumas suposições partilhadas:

  • Tu estás utilizando a localização da saída da construção padrão (dist). Esta localização pode ser mudada utilizando build.outDir, e podes extrapolar as instruções destes guias neste caso.
  • Tu estás utilizando o npm. Tu podes utilizar comandos equivalentes para executar os programas se estiveres utilizando o Yarn ou outro gestor de pacote.
  • A Vite está instalada como uma dependência local no teu projeto, e configuraste os seguintes programas de npm:
json
{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

É importante notar que vite preview está destinado para a pré-visualização da construção localmente e não destinada como servidor de produção.

NOTA

Estes guias fornecem instruções para realização de um desdobramento estático do teu sítio de Vite. A Vite também suporta a Interpretação no Lado do Servidor (SSR, sigla em Inglês). A SSR refere-se as abstrações de front-end que suportam a execução da mesma aplicação em Node.js, pré-interpretando-a para HTML, e finalmente hidratando-a no cliente. Consulte o Guia da SSR para aprender a respeito desta funcionalidade. Por outro lado, se estiveres procurando pela integração com abstrações de lado do servidor tradicionais, consulte o Guia da Integração de Backend.

Construindo a Aplicação

Tu podes executar o comando npm run build para construir a aplicação.

bash
$ npm run build

Por padrão, a saída da construção será colocada no dist. Tu podes desdobrar esta pasta dist para quaisquer plataformas de tua preferência.

Testando a Aplicação Localmente

Um vez que construiste a aplicação, podes testá-la localmente executando o comando npm run preview.

bash
$ npm run build
$ npm run preview

O comando vite preview iniciará um servidor de web estático local que serve os ficheiros do dist no http://localhost:4173. É uma maneira fácil para verificar se a construção de produção parece bem no teu ambiente local.

Tu podes configurar a porta do servidor passando a bandeira --port como um argumento.

json
{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

Agora o comando preview lançará o servidor no http://localhost:8080.

GitHub Pages

  1. Defina a base correta no vite.config.js.

    Se estiveres implementar em produção para https://<USERNAME>.github.io/, podes omitir a base porque ela padroniza para '/'.

    Se estiveres implementar em produção para https://<USERNAME>.github.io/<REPO>/, por exemplo o teu repositório está em https://github.com/<USERNAME>/<REPO>, então defina a base para '/<REPO>/'.

  2. Vá para a configuração do teu GitHub Pages nas definições do repositório e escolha a fonte da implementação em produção como "GitHub Actions", isto levar-te-á a criar um fluxo de trabalho que constrói e implementa o teu projeto, uma amostra de fluxo de trabalho que instala as dependências e constrói usando o npm fornecida:

    yml
    # Fluxo de trabalho simples para o implementação em produção de conteúdo estático para a GitHub Pages
    name: Deploy static content to Pages
    on:
      # Executa sobre empurrões mirando o ramo padrão
      push:
        branches: ['main']
      # Permite-te executar este fluxo de trabalho manualmente da aba de Actions
      workflow_dispatch:
    # Defina as permissões da GITHUB_TOKEN para permitir a implementação para a GitHub Pages
    permissions:
      contents: read
      pages: write
      id-token: write
    # Permite uma implementação em produção simultânea
    concurrency:
      group: 'pages'
      cancel-in-progress: true
    jobs:
      # Trabalho de implementação individual já que estamos apenas implementando
      deploy:
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        steps:
          - name: Checkout
            uses: actions/checkout@v3
          - name: Set up Node
            uses: actions/setup-node@v3
            with:
              node-version: 18
              cache: 'npm'
          - name: Install dependencies
            run: npm install
          - name: Build
            run: npm run build
          - name: Setup Pages
            uses: actions/configure-pages@v3
          - name: Upload artifact
            uses: actions/upload-pages-artifact@v1
            with:
              # Carregar o repositório dist
              path: './dist'
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v1
    

GitLab Pages e GitLab CI

  1. Defina a base correta no vite.config.js.

    Se estiveres desdobrando para https://<USERNAME or GROUP>.gitlab.io/, podes omitir a base porque ela padroniza para '/'.

    Se estiveres desdobrando para https://<USERNAME or GROUP>.gitlab.io/<REPO>/, por exemplo o teu repositório está em https://gitlab.com/<USERNAME>/<REPO>, então defina a base para '/<REPO>/'.

  2. Cria um ficheiro chamado .gitlab-ci.yml na raiz do teu projeto com o conteúdo abaixo. Isto construirá e desdobrará o teu sítio sempre que fizeres mudanças ao teu conteúdo:

    yaml
    image: node:16.5.0
    pages:
      stage: deploy
      cache:
        key:
          files:
            - package-lock.json
          prefix: npm
        paths:
          - node_modules/
      script:
        - npm install
        - npm run build
        - cp -a dist/. public/
      artifacts:
        paths:
          - public
      rules:
        - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
    

Netlify

Netlify CLI

  1. Instale a Linha de Comando da Netlify.
  2. Cria um novo sítio utilizando o ntl init.
  3. Desdobra utilizando ntl deploy.
bash
# Instalar a Linha de Comando da Netlify
$ npm install -g netlify-cli

# Criar um novo sítio na Netlify
$ ntl init

# Desdobrar para uma URL de pré-visualização única.
$ ntl deploy

A Linha de Comando da Netlify partilhará contigo uma URL de pré-visualização para inspecionar. Quando estiveres pronto para avançar para produção, utilize a bandeira prod:

bash
# Desdobrar o sítio para produção
$ ntl deploy --prod

Netlify com Git

  1. Empurre o teu código para um repositório de git (GitHub, GitLab, BitBucket, Azure DevOps).
  2. Importe o projeto para a Netlify.
  3. Escolha o ramo, diretório de saída, e configure as variáveis de ambiente se aplicável.
  4. Clique sobre Deploy (Desdobrar)
  5. A tua aplicação de Vite está desdobrada!

Após o teu projeto ter sido importado e desdobrado, todos os empurrões subsequentes para outros ramos que não o ramo de produção juntamente com requisições de puxão ("pull requests") gerarão os Desdobramentos de Pré-Visualização, e todas as mudanças feitas para o Ramo de Produção (comummente “main”) resultará num Desdobramento de Produção.

Vercel

Vercel CLI

  1. Instale a Linha de Comando da Vercel e execute vercel para desdobrar.
  2. A Vercel detetará que estás utilizando a Vite e ativará as definições corretas para o teu desdobramento.
  3. A tua aplicação está desdobrada! (por exemplo, vite-vue-template.vercel.app).
bash
$ npm i -g vercel
$ vercel init vite
Vercel CLI
> Success! Initialized "vite" example in ~/your-folder.
- To deploy, `cd vite` and run `vercel`.

Vercel com Git

  1. Empurre o teu código para o teu repositório de git (GitHub, GitLab, Bitbucket).
  2. Importe o teu projeto de Vite para a Vercel.
  3. A Vercel detetará que estás utilizando a Vite e ativará as definições corretas para o teu desdobramento.
  4. A tua aplicação está desdobrada! (por exemplo, vite-vue-template.vercel.app)

Após o teu projeto ter sido importado e desdobrado, todos os empurrões subsequentes para outros ramos que não o ramo de produção juntamente com requisições de puxão ("pull requests") gerarão os Desdobramentos de Pré-Visualização, e todas as mudanças feitas para o Ramo de Produção (comummente “main”) resultará num Desdobramento de Produção.

Aprenda mais a respeito da Integração de Git da Vercel.

Cloudflare Pages

Cloudflare Pages através de Wrangler

  1. Instale a Linha de Comando Wrangler.
  2. Autentica a Wrangler com a tua conta da Cloudflare utilizando wrangler login.
  3. Executa o teu comando de construção.
  4. Desdobra utilizando npx wrangler pages publish dist.
bash
# Instalar a Linha de Comando Wrangler
$ npm install -g wrangler

# Iniciar sessão da conta da Cloudflare
# a partir da Linha de Comando
$ wrangler login

# Executar o teu comando de construção
$ npm run build

# Criar novo desdobramento
$ npx wrangler pages publish dist

Após os teus recursos serem carregados, a Wrangler dar-te-á uma URL de pré-visualização para inspecionar o teu sítio. Quando entrares no painel de controlo da Cloudflare Pages, verás o teu novo projeto.

Cloudflare Pages com Git

  1. Empurre o teu código para o teu repositório (GitHub, GitLab).
  2. Entre no painel de controlo da Cloudflare e selecione a tua conta em Account Home (Casa da Conta) > Pages (Páginas).
  3. Selecione Create a new Project (Criar um novo Projeto) e a opção Connect Git (Conectar a Git).
  4. Selecione o projeto de git que queres desdobrar e clique em Begin setup (Iniciar a configuração).
  5. Selecione a configuração da abstração correspondente nas definições da construção dependendo da abstração de Vite que selecionaste.
  6. Depois guarde e desdobre!
  7. A tua aplicação está desdobrada! (por exemplo, https://<PROJECTNAME>.pages.dev/)

Após o teu projeto ter sido importado e desdobrado, todos os empurrões subsequentes para os ramos gerarão Desdobramentos de Pré-Visualização a menos que seja especificado para não o fazer nos teus controlos da construção do ramo. Todas as mudanças para o Ramo de Produção (comummente “main”) resultarão em um Desdobramento de Produção.

Tu também podes adicionar domínios personalizados e manipular as definições da construção personalizada na Pages. Aprenda mais a respeito da Integração de Git da Cloudflare Pages.

Google Firebase

  1. Certifica-te de que tens a firebase-tools instalada.

  2. Crie o firebase.json e o .firebaserc na raiz do teu projeto com o seguinte conteúdo:

    firebase.json:

    json
    {
      "hosting": {
        "public": "dist",
        "ignore": [],
        "rewrites": [
          {
            "source": "**",
            "destination": "/index.html"
          }
        ]
      }
    }
    

    .firebaserc:

    js
    {
      "projects": {
        "default": "<YOUR_FIREBASE_ID>"
      }
    }
    
  3. Após executares npm run build, desdobre utilizando o comando firebase deploy.

Surge

  1. Primeiro instale a surge, se já não a tiveres instalada.

  2. Execute npm run build.

  3. Desdobre para surge digitando surge dist.

Tu também podes desdobrar para um domínio personalizado adicionado surge dist yourdomain.com.

Azure Static Web Apps

Tu podes desdobrar rapidamente a tua aplicação de Vite com o serviço de Aplicações de Web Estáticas da Microsoft Azure. Tu precisas:

Instale a extensão no VS Code e navegar para a raiz da tua aplicação. Abrir a extensão Static Web Apps, registar-se na Azure, e clicar no sinal '+' para criar uma nova Aplicação de Web Estática. Tu serás levado a designar qual chave de subscrição utilizar.

Siga o assistente ("wizard" ou "feiticeiro" se preferires) iniciado pela extensão para dares um nome a tua aplicação, escolher uma configuração de abstração, e designar a raiz da aplicação (normalmente /) e a localização do ficheiro construído /dist. O assistente ("wizard" ou "feiticeiro" se preferires) executará e criará uma ação de GitHub no teu repositório numa pasta .github.

A ação trabalhará para desdobrar a tua aplicação (observe o seu progresso na aba Ações (Actions, em Inglês) do teu repositório) e, quando terminada com sucesso, podes visualizar a tua aplicação no endereço fornecido na janela de progresso da extensão clicando no botão 'Olhar o Sítio (Browse Website, em Inglês)' que aparece quando a ação de GitHub executa.

Render

Tu podes desdobrar a tua aplicação de Vite como um Sítio Estático na Render.

  1. Crie uma conta Render.

  2. No Painel de Controlo, clique no botão Novo (New, em Inglês) e selecione o Sítio Estático (Static Site, em Inglês).

  3. Conecte a tua conta GitHub/GitLab ou utilize um repositório público.

  4. Especifique um nome de projeto e o ramo.

    • Comando de Construção (Build Command, em Inglês): npm run build
    • Diretório de Publicação (Publish Directory, em Inglês): dist
  5. Clique em Criar Sítio Estático (Create Static Site, em Inglês)

    A tua aplicação deveria ser desdobrada em https://<PROJECTNAME>.onrender.com/.

Por padrão, qualquer nova consolidação empurrada para o ramo especificado acionará automaticamente um novo desdobramento. O Desdobrar Automaticamente (Auto-Deploy, em Inglês) pode ser configurado nas definições do projeto.

Tu também podes adicionar um domínio personalizado ao teu projeto.

Lançada sob a Licença MIT. (641e5aa6)