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

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>/'.

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

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>/'.

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

Instalamos a Interface da Linha de Comando da Netlify.
Críamos uma nova aplicação usando ntl init.
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

A tua aplicação de Vite está desdobrada!
Empurramos o nosso código para um repositório de Git (GitHub, GitLab, BitBucket, Azure DevOps).
Importamos o projeto na Netlify.
Escolhemos o ramo, diretório de saída, e definimos as variáveis de ambiente se aplicável.
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

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

Empurramos o nosso código ao nosso repositório de Git (GitHub, GitLab, BitBucket).
Importamos o nosso projeto de Vite na Vercel.
A Vercel detetará que estamos usando a Vite e ativará as definições (ou configurações) corretas para a nossa implementação
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

Instalamos a Interface da Linha de Comando da Wrangler.
Autenticamos a Wrangler com a nossa conta da Cloudflare usando wrangler login.
Executamos o nosso comando de construção.
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

Empurramos o nosso código ao nosso repositório (GitHub, GitLab).
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).
Selecionamos Criar um novo Projeto (ou Create a new Project) e a opção Conectar Git (ou Connect Git).
Selecionamos o projeto de Git que queremos implantar e clicamos em Iniciar configuração (ou Begin setup).
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.
Depois guardamos e implementamos!
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

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

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

{
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}

Depois de executarmos npm run build, implementamos usando o comando firebase deploy.

Surge

Instalamos a surge, se já não estiver instalada.
Executamos npm run build.
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:

Duma conta da Azure e uma chave de subscrição. Nós podemos criar uma conta gratuita da Azure nesta ligação.
Que o código da nossa aplicação seja empurrado à GitHub.
Da extensão SWA no Visual Studio Code.

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:

Críamos uma conta da Render.
No painel de controlo, clicamos no botão Novo (ou New) e selecionamos Aplicação Estática (ou Static Site).
Conectamos a nossa conta da GitHub ou GitLab, ou usamos um repositório público.
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
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.

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

Construindo a Aplicação ​

Testando a Aplicação Localmente ​

GitHub Pages ​

GitLab Pages e GitLab CI ​

Netlify ​

Netlify CLI ​

Netlify com a Git ​

Vercel ​

Vercel CLI ​

Vercel com a Git ​

Cloudflare Pages ​

Cloudflare Pages através da Wrangler ​

Cloudflare Pages com a Git ​

Google Firebase ​

Surge ​

Azure Static Web Apps ​

Render ​

Flightcontrol ​

Hospedagem da AWS Amplify ​

Hospedagem de Aplicação Estática da Kinsta ​

Hospedagem de Aplicação Estática da xmit ​

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

Construindo a Aplicação

Testando a Aplicação Localmente

GitHub Pages

GitLab Pages e GitLab CI

Netlify

Netlify CLI

Netlify com a Git

Vercel

Vercel CLI

Vercel com a Git

Cloudflare Pages

Cloudflare Pages através da Wrangler

Cloudflare Pages com a Git

Google Firebase

Surge

Azure Static Web Apps

Render

Flightcontrol

Hospedagem da AWS Amplify

Hospedagem de Aplicação Estática da Kinsta

Hospedagem de Aplicação Estática da xmit