Implantando Um Site Estático

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

Você está usando o local de saída de construção padrão ( dist ). Este local pode ser alterado usando build.outDir e você pode extrapolar instruções desses guias nesse caso.
Você está usando o NPM. Você pode usar comandos equivalentes para executar os scripts se estiver usando fios ou outros gerentes de pacotes.
O Vite é instalado como uma dependência de desenvolvedor local em seu projeto e você configurou os seguintes scripts do NPM:

package.json

json

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

É importante observar que vite preview se destina a visualizar a compilação localmente e não significa como um servidor de produção.

NOTE

Esses guias fornecem instruções para realizar uma implantação estática do seu site vite. O Vite também suporta a renderização do lado do servidor. O SSR refere-se a estruturas front-end que suportam a execução do mesmo aplicativo no Node.js, pré-renderizando-o para HTML e, finalmente, hidratando-o no cliente. Confira o Guia SSR para saber sobre esse recurso. Por outro lado, se você estiver procurando integração com estruturas tradicionais do lado do servidor, confira o guia de integração de back-end .

Construindo o aplicativo

Você pode executar o comando npm run build para criar o aplicativo.

bash

$ npm run build

Por padrão, a saída de compilação será colocada em dist . Você pode implantar esta pasta dist em qualquer uma de suas plataformas preferidas.

Testando O Aplicativo Localmente

Depois de criar o aplicativo, você pode testá -lo localmente executando o comando npm run preview .

bash

$ npm run preview

O comando vite preview inicializará um servidor da Web local que serve os arquivos de dist em http://localhost:4173 . É uma maneira fácil de verificar se a construção da produção parece boa no seu ambiente local.

Você pode configurar a porta do servidor passando o sinalizador --port como um argumento.

package.json

json

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

Agora o comando preview iniciará o servidor em http://localhost:8080 .

Páginas Do Github

Defina os base em vite.config.js correto.
Se você estiver implantando para https://<USERNAME>.github.io/ , ou para um domínio personalizado através de páginas do GitHub (por exemplo, www.example.com ), defina base a '/' . Como alternativa, você pode remover base da configuração, pois ela padrão é '/' .
Se você estiver implantando para https://<USERNAME>.github.io/<REPO>/ (por exemplo, seu repositório estiver em https://github.com/<USERNAME>/<REPO> ), defina base a '/<REPO>/' .

Vá para a configuração do seu Github Pages na página Configurações do repositório e escolha a fonte de implantação como "ações do github", isso o levará a criar um fluxo de trabalho que constrói e implanta seu projeto, um amostra de fluxo de trabalho que instala dependências e criações usando o NPM é fornecido:

yml

# Fluxo de trabalho simples para implantar conteúdo estático nas páginas do GitHub
name: Deploy static content to Pages

on:
  # Corre em pushs direcionando a filial padrão
  push:
    branches: ['main']

  # Permite que você execute este fluxo de trabalho manualmente a partir da guia Ações
  workflow_dispatch:

# Define as permissões github_token para permitir a implantação nas páginas do GitHub
permissions:
  contents: read
  pages: write
  id-token: write

# Permitir uma implantação simultânea
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Trabalho de implantação única, já que estamos apenas implantando
  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:
          # Faça upload da pasta dist
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Páginas Gitlab e Gitlab CI

Defina os base em vite.config.js correto.
Se você estiver implantando para https://<USERNAME or GROUP>.gitlab.io/ , poderá omitir base pois ele padrão é '/' .
Se você estiver implantando para https://<USERNAME or GROUP>.gitlab.io/<REPO>/ , por exemplo, seu repositório está em https://gitlab.com/<USERNAME>/<REPO> , defina base a '/<REPO>/' .

Crie um arquivo chamado .gitlab-ci.yml na raiz do seu projeto com o conteúdo abaixo. Isso criará e implantará seu site sempre que você fizer alterações no seu conteúdo:

.gitlab-ci.yml

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

Instale a CLI do Netlify .
Crie um novo site usando ntl init .
Implantar usando ntl deploy .

bash

# Instale a CLI do Netlify
$ npm install -g netlify-cli

# Crie um novo site no Netlify
$ ntl init

# Implantar para um URL de visualização exclusivo
$ ntl deploy

A CLI da Netlify compartilhará com você um URL de visualização para inspecionar. Quando você estiver pronto para entrar em produção, use a bandeira prod :

bash

# Implante o site em produção
$ ntl deploy --prod

Netlify com git

Empurre seu código para um repositório Git (Github, Gitlab, Bitbucket, Azure DevOps).
Importar o projeto para netlify.
Escolha a ramificação, o diretório de saída e configure variáveis de ambiente, se aplicável.
Clique em implantar .
Seu aplicativo Vite está implantado!

Depois que seu projeto foi importado e implantado, todos os empurrões subsequentes para as filiais que não sejam a filial de produção, juntamente com solicitações de tração, gerarão implantações de visualização , e todas as alterações feitas na filial de produção (comumente "principal") resultarão em uma implantação de produção .

Vercel

Vercel CLI

Instale a CLI do Vercel e execute vercel para implantar.
A Vercel detectará que você está usando o Vite e permitirá as configurações corretas para sua implantação.
Seu aplicativo está implantado! (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 para Git

Empurre seu código para o seu repositório Git (Github, Gitlab, Bitbucket).
Importe seu projeto Vite para o Vercel.
A Vercel detectará que você está usando o Vite e permitirá as configurações corretas para sua implantação.
Seu aplicativo está implantado! (por exemplo , vite-vue-template.vercel.app )

Depois que seu projeto foi importado e implantado, todos os empurrões subsequentes para as filiais gerarão implantações de visualização , e todas as alterações feitas na filial de produção (geralmente "principal") resultarão em uma implantação de produção .

Saiba mais sobre a integração do Git da Vercel.

Páginas Cloudflare

Páginas Cloudflare via Wrangler

Instale o Wrangler CLI .
Autentique o Wrangler com sua conta Cloudflare usando wrangler login .
Execute seu comando de construção.
Implantar usando npx wrangler pages deploy dist .

bash

# Instale o Wrangler CLI
$ npm install -g wrangler

# Faça login na conta Cloudflare da CLI
$ wrangler login

# Execute seu comando de construção
$ npm run build

# Crie nova implantação
$ npx wrangler pages deploy dist

Depois que seus ativos forem enviados, o Wrangler fornecerá um URL de visualização para inspecionar seu site. Quando você faz login no painel do CloudFlare Pages, você verá seu novo projeto.

Páginas Cloudflare Com Git

Empurre seu código para o seu repositório Git (Github, Gitlab).
Faça login no painel do CloudFlare e selecione sua conta na Home > Páginas .
Selecione Criar um novo projeto e a opção Connect Git .
Selecione o projeto Git que deseja implantar e clique em Iniciar Configuração
Selecione a predefinição da estrutura correspondente na configuração de compilação, dependendo da estrutura do Vite que você selecionou.
Em seguida, salve e implante!
Seu aplicativo está implantado! (por exemplo, https://<PROJECTNAME>.pages.dev/ )

Depois que seu projeto foi importado e implantado, todos os empurrões subsequentes para as filiais gerarão implantações de visualização, a menos que especificado para não nos controles de construção da filial . Todas as alterações no ramo de produção (geralmente "principal") resultarão em uma implantação de produção.

Você também pode adicionar domínios personalizados e lidar com configurações de construção personalizadas nas páginas. Saiba mais sobre a integração do CloudFlare Pages Git .

Google Firebase

Certifique-se de instalar-se de Firebase-Tools .

Crie firebase.json e .firebaserc na raiz do seu 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 executar npm run build , implante usando o comando firebase deploy .

Surto

Primeiro instale o Surge , se você ainda não o fez.
Execute npm run build .
Implantar para surgir digitando surge dist .

Você também pode implantar em um domínio personalizado adicionando surge dist yourdomain.com .

Aplicativos Da Web Estática Do Azure

Você pode implantar rapidamente seu aplicativo Vite com o serviço de aplicativos da web do Microsoft Azure Static . Você precisa:

Uma conta do Azure e uma chave de assinatura. Você pode criar uma conta do Azure gratuito aqui .
Seu código de aplicativo foi enviado para o GitHub .
A extensão SWA no código do Visual Studio .

Instale a extensão no código VS e navegue até a raiz do seu aplicativo. Abra a extensão estática de aplicativos da web, faça login no Azure e clique no sinal '+' para criar um novo aplicativo estático. Você será solicitado a designar qual chave de assinatura usar.

Siga o assistente iniciado pela extensão para dar um nome ao seu aplicativo, escolha uma predefinição da estrutura e designar a raiz do aplicativo (geralmente / ) e construir o local do arquivo /dist . O assistente será executado e criará uma ação do GitHub em seu repositório em uma pasta .github .

A ação funcionará para implantar seu aplicativo (observe o progresso na guia Ações do seu repo) e, quando concluído com sucesso, você pode visualizar seu aplicativo no endereço fornecido na janela de progresso da extensão clicando no botão 'Browse Site' que aparece quando a ação do Github estiver executada.

Renderizar

Você pode implantar seu aplicativo Vite como um site estático na renderização .

Crie uma conta de renderização .
No painel , clique no novo botão e selecione Site estático .
Conecte sua conta Github/GitLab ou use um repositório público.
Especifique o nome e a filial de um projeto.
- Comando de construção : npm install && npm run build
- Diretório de publicação : dist
Clique Em Criar Site Estático .
Seu aplicativo deve ser implantado em https://<PROJECTNAME>.onrender.com/ .

Por padrão, qualquer novo compromisso empurrado para a ramificação especificada acionará automaticamente uma nova implantação. O implantação automática pode ser configurado nas configurações do projeto.

Você também pode adicionar um domínio personalizado ao seu projeto.

FlightControl

Implante seu site estático usando o FlightControl seguindo estas instruções .

Hospedagem Estática De Kinsta

Implante seu site estático usando o Kinsta seguindo estas instruções .

XMIT Hospedagem De Site Estático

Implante seu site estático usando o XMIT seguindo este guia .

Implantando Um Site Estático ​

Construindo o aplicativo ​

Testando O Aplicativo Localmente ​

Páginas Do Github ​

Páginas Gitlab e Gitlab CI ​

Netlify ​

Netlify CLI ​

Netlify com git ​

Vercel ​

Vercel CLI ​

Vercel para Git ​

Páginas Cloudflare ​

Páginas Cloudflare via Wrangler ​

Páginas Cloudflare Com Git ​

Google Firebase ​

Surto ​

Aplicativos Da Web Estática Do Azure ​

Renderizar ​

FlightControl ​

Hospedagem Estática De Kinsta ​

XMIT Hospedagem De Site Estático ​

Implantando Um Site Estático

Construindo o aplicativo

Testando O Aplicativo Localmente

Páginas Do Github

Páginas Gitlab e Gitlab CI

Netlify

Netlify CLI

Netlify com git

Vercel

Vercel CLI

Vercel para Git

Páginas Cloudflare

Páginas Cloudflare via Wrangler

Páginas Cloudflare Com Git

Google Firebase

Surto

Aplicativos Da Web Estática Do Azure

Renderizar

FlightControl

Hospedagem Estática De Kinsta

XMIT Hospedagem De Site Estático