Skip to content

Implantação duma Aplicação Estática

As seguintes orientações são baseadas em algumas suposições partilhadas:

  • Nós estamos usando a localização da saída da construção padrão (dist). Esta localização pode ser mudada usando build.outDir, e podemos extrapolar as instruções a partir destas orientações neste caso.
  • Nós estamos usando o npm. Nós podemos usar os comandos equivalentes para executar os programas se estivermos usando Yarn ou outros gestores de pacote.
  • A Vite é instalada como uma dependência local no nosso projeto, e temos configurado os seguintes programas de npm:
package.json
json
{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

É importante notar que o comando vite preview está destinado para pré-visualizar a construção localmente e não está destinado a servir como um servidor de produção.

NOTA

Estas orientações fornecem instruções para realizar uma implementação estática da nossa aplicação de Vite. A Vite também suporta interpretação do lado do servidor. A interpretação do lado do servidor refere-se às abstrações de front-end que suportam executar a mesma aplicação na Node.js, pré-interpretando-a à HTML, e finalmente hidratando-a no cliente. Consulte o Guia da Interpretação do Lado do Cliente para aprender sobre esta funcionalidade. Por outro lado, se estivermos procurando pela integração com as abstrações do lado do servidor tradicionais, devemos consultar o Guia da Integração do Backend.

Construindo a Aplicação

Nós podemos 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 diretório dist. Nós podemos servir esta pasta dist em produção em quaisquer plataformas de nossa preferência.

Testando a Aplicação Localmente

Assim que construirmos a aplicação, podemos testá-la localmente executando o comando npm run preview:

bash
$ npm run build
$ npm run preview

O comando vite preview iniciará um servidor da Web estático localmente que serve os ficheiros do diretório dist na http://localhost:4173. É uma maneira fácil de verificar se a construção de produção funciona corretamente no nosso ambiente local.

Nós podemos configurar a porta do servidor passando a opção --port como argumento:

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

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

GitHub Pages

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

    Se estivermos implementando na https://<USERNAME>.github.io/, ou num domínio personalizado através da GitHub Pages (por exemplo, www.example.com), definimos a base para '/'. Alternativamente, podemos remover base da configuração, já que esta predefine para '/'.

    Se estivermos implementando na https://<USERNAME>.github.io/<REPO>/ (por exemplo, o nosso repositório está em https://github.com/<USERNAME>/<REPO>), então definimos a base para '/<REPO>/'.

  2. Vamos para a configuração da nossa GitHub Pages na página de definições (ou configurações) do repositório e escolhemos a fonte da implementação como "GitHub Actions", isto levar-nos-á à criar um fluxo de trabalho que constrói e implementa o nosso projeto, um fluxo de trabalho de exemplo que instala as dependências e constrói o projeto usando o npm é fornecido:

    yml
    # Fluxo de trabalho simples para implantar
    # conteúdo estático na GitHub Pages
    name: Deploy static content to Pages
    
    on:
      # Executa sobre as atualizações mirando o ramo padrão
      push:
        branches: ['main']
    
      # Permite-nos executar este fluxo de trabalho manualmente
      # a partir da aba de Ações (ou `Actions`)
      workflow_dispatch:
    
    # Define as permissões do GITHUB_TOKEN para permitir
    # a implementação na GitHub Pages
    permissions:
      contents: read
      pages: write
      id-token: write
    
    # Permitir uma implementação simultânea
    concurrency:
      group: 'pages'
      cancel-in-progress: true
    
    jobs:
      # Único trabalho de implementação
      # uma vez que apenas estamos implementando
      deploy:
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        steps:
          - name: Checkout
            uses: actions/checkout@v4
          - name: Set up Node
            uses: actions/setup-node@v4
            with:
              node-version: 20
              cache: 'npm'
          - name: Install dependencies
            run: npm ci
          - name: Build
            run: npm run build
          - name: Setup Pages
            uses: actions/configure-pages@v4
          - name: Upload artifact
            uses: actions/upload-pages-artifact@v3
            with:
              # Carregar a pasta de distribuição
              path: './dist'
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v4

GitLab Pages e GitLab CI

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

    Se estivermos implementando na https://<USERNAME or GROUP>.gitlab.io/, podemos omitir a base, já que esta predefine para '/'.

    Se estivermos implementando na https://<USERNAME or GROUP>.gitlab.io/<REPO>/, por exemplo o nosso repositório está em https://gitlab.com/<USERNAME>/<REPO>, então definimos a base para '/<REPO>/'.

  2. Críamos um ficheiro chamado .gitlab-ci.yml na raiz do nosso projeto com o conteúdo abaixo. Isto construirá e implementará a nossa aplicação sempre que fizermos mudanças no nosso 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. Instalamos a Interface da Linha de Comando da Netlify.
  2. Críamos uma nova aplicação usando ntl init.
  3. Implantamos usando ntl deploy:
bash
# Instalar a Interface da Linha de Comando da Netlify
$ npm install -g netlify-cli

# Criar uma nova aplicação na Netlify
$ ntl init

# Implementar numa única URL de pré-visualização
$ ntl deploy

A interface da linha de comando da Netlify partilhará connosco uma URL de pré-visualização para inspecionar. Quando estivermos pronto para avançarmos para produção, usamos a opção prod:

bash
# Implementar a aplicação em produção
$ ntl deploy --prod

Netlify com a Git

  1. A tua aplicação de Vite está desdobrada!
  2. Empurramos o nosso código para um repositório de Git (GitHub, GitLab, BitBucket, Azure DevOps).
  3. Importamos o projeto na Netlify.
  4. Escolhemos o ramo, diretório de saída, e definimos as variáveis de ambiente se aplicável.
  5. Clicamos sobre Implementar (ou Deploy)

Depois do nosso projeto ter sido importado e implementado, todas as atualizações (ou pushes) subsequentes aos outros ramos que não são o de produção juntamente com os pedidos de atualização (ou pull requests) gerarão as implementações de pré-visualização, e todas as mudanças feitas ao ramo de produção (comummente “main”) resultarão numa implementação de produção.

Vercel

Vercel CLI

  1. Instalamos a Interface da Linha de Comando da Vercel e executamos vercel para implantar.
  2. A Vercel detetará que estamos usando a Vite e ativará as definições (ou configurações) corretas para a nossa implementação.
  3. A aplicação está implementada! (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 a Git

  1. Empurramos o nosso código ao nosso repositório de Git (GitHub, GitLab, BitBucket).
  2. Importamos o nosso projeto de Vite na Vercel.
  3. A Vercel detetará que estamos usando a Vite e ativará as definições (ou configurações) corretas para a nossa implementação
  4. A nossa aplicação está implementada! (por exemplo, vite-vue-template.vercel.app)

Depois do nosso projeto ter sido importado e implementado, todas as atualizações subsequentes (ou pushes) aos ramos gerarão implementações de pré-visualização, e todas as mudanças feitas ao ramo de produção (comummente “main”) resultarão numa implementação de produção.

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

Cloudflare Pages

Cloudflare Pages através da Wrangler

  1. Instalamos a Interface da Linha de Comando da Wrangler.
  2. Autenticamos a Wrangler com a nossa conta da Cloudflare usando wrangler login.
  3. Executamos o nosso comando de construção.
  4. Implantamos usando npx wrangler pages deploy dist.
bash
# Instalar a interface da linha de comando da Wrangler
$ npm install -g wrangler

# Iniciar sessão da conta da Cloudflare
# a partir da interface da linha de comando
$ wrangler login

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

# Criar nova implementação
$ npx wrangler pages deploy dist

Depois dos nossos recursos estiverem carregados, a Wrangler dar-nos-á uma URL de pré-visualização para inspecionar a nossa aplicação. Quando entrarmos no painel de controlo da Cloudflare Pages, veremos o nosso novo projeto.

Cloudflare Pages com a Git

  1. Empurramos o nosso código ao nosso repositório (GitHub, GitLab).
  2. Entramos no painel de controlo da Cloudflare e selecionamos a nossa conta em Página Inicial da Conta (ou Account Home) > Páginas (ou Pages).
  3. Selecionamos Criar um novo Projeto (ou Create a new Project) e a opção Conectar Git (ou Connect Git).
  4. Selecionamos o projeto de Git que queremos implantar e clicamos em Iniciar configuração (ou Begin setup).
  5. Selecionamos pré-definição (ou pré-configuração) da abstração correspondente nas definições (ou configurações) de construção dependendo da abstração de Vite que selecionamos.
  6. Depois guardamos e implementamos!
  7. A nossa aplicação está implementada! (por exemplo, https://<PROJECTNAME>.pages.dev/)

Depois do nosso projeto ter sido importado e implementado, todas as atualizações subsequentes (pushes) aos ramos gerarão implementações de pré-visualização a menos que seja especificado para não o fazer nos nossos controlos de construção do ramo. Todas as mudanças ao ramo de produção (comummente “main”) resultarão numa implementação de produção.

Nós também podemos adicionar domínios personalizados e manipular as definições (ou configurações) na Pages. Saiba mais sobre a Integração de Git da Cloudflare Pages.

Google Firebase

  1. Certificamos-nos de que temos a firebase-tools instalada.

  2. Críamos o firebase.json e o .firebaserc na raiz do nosso 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. Depois de executarmos npm run build, implementamos usando o comando firebase deploy.

Surge

  1. Instalamos a surge, se já não estiver instalada.

  2. Executamos npm run build.

  3. Implantamos à surge digitando surge dist.

Nós também podemos implantar para um domínio personalizado adicionando surge dist yourdomain.com.

Azure Static Web Apps

Nós podemos implantar rapidamente a nossa aplicação de Vite com o serviço de Aplicações da Web Estáticas da Microsoft Azure. Nós precisamos:

Instalamos a extensão no VS Code e navegamos à raiz da nossa aplicação. Abrimos a extensão Static Web Apps, iniciamos a sessão na Azure, clicamos no sinal de '+' para criar uma nova Aplicação de Web Estática. Ser-nos-á pedido que designemos a chave de subscrição a usar.

Seguimos o assistente (ou wizard ou feiticeiro se preferirmos) iniciado pela extensão para darmos um nome à nossa aplicação, escolhemos uma pré-definição (ou pré-configuração) de abstração, e designamos a raiz da aplicação (normalmente /) e a localização do ficheiro construído /dist. O assistente executará e criará uma ação de GitHub no nosso repositório numa pasta .github.

A ação trabalhará para implantar a nossa aplicação (observamos o seu progresso na aba Ações (ou Actions)) e, quando concluída com sucesso, podemos visualizar a nossa aplicação no endereço fornecido na janela de progresso da extensão clicando no botão 'Olhar Aplicação' (ou 'Browse Website') que aparece quando a ação de GitHub é executada.

Render

Nós podemos implantar a nossa aplicação de Vite como uma Aplicação Estática na Render:

  1. Críamos uma conta da Render.

  2. No painel de controlo, clicamos no botão Novo (ou New) e selecionamos Aplicação Estática (ou Static Site).

  3. Conectamos a nossa conta da GitHub ou GitLab, ou usamos um repositório público.

  4. Especificamos um nome de projeto e o ramo:

    • Comando de Construção (ou Build Command): npm install && npm run build
    • Diretório de Publicação (Publish Directory): dist
  5. Clicamos em Criar Aplicação Estática (Create Static Site):

    A nossa aplicação deve ser implementada na https://<PROJECTNAME>.onrender.com/.

Por padrão, qualquer nova atualização empurrada ao ramo especificado acionará automaticamente uma nova implementação. A Implementação Automática (ou Auto-Deploy) pode ser configurada nas definições (ou configurações) deo projeto.

Nós também podemos adicionar um domínio personalizado ao nosso projeto.

Flightcontrol

Implantamos a nossa aplicação estática usando a Flightcontrol, seguindo estas instruções.

Hospedagem da AWS Amplify

Implantamos a nossa aplicação estática usando a Hospedagem da AWS Amplify, seguindo estas instruções.

Hospedagem de Aplicação Estática da Kinsta

Implantamos a nossa aplicação estática usando Kinsta seguindo estas instruções.

Hospedagem de Aplicação Estática da xmit

Implantamos a nossa aplicação estática usando xmit seguindo este guia.

Lançada sob a Licença MIT. (9f928600)