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 utilizandobuild.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:
{
"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.
$ 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
.
$ 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.
{
"scripts": {
"preview": "vite preview --port 8080"
}
}
Agora o comando preview
lançará o servidor no http://localhost:8080
.
GitHub Pages
Defina a
base
correta novite.config.js
.Se estiveres implementar em produção para
https://<USERNAME>.github.io/
, podes omitir abase
porque ela padroniza para'/'
.Se estiveres implementar em produção para
https://<USERNAME>.github.io/<REPO>/
, por exemplo o teu repositório está emhttps://github.com/<USERNAME>/<REPO>
, então defina abase
para'/<REPO>/'
.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
Defina a
base
correta novite.config.js
.Se estiveres desdobrando para
https://<USERNAME or GROUP>.gitlab.io/
, podes omitir abase
porque ela padroniza para'/'
.Se estiveres desdobrando para
https://<USERNAME or GROUP>.gitlab.io/<REPO>/
, por exemplo o teu repositório está emhttps://gitlab.com/<USERNAME>/<REPO>
, então defina abase
para'/<REPO>/'
.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:yamlimage: 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 Linha de Comando da Netlify.
- Cria um novo sítio utilizando o
ntl init
. - Desdobra utilizando
ntl deploy
.
# 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
:
# Desdobrar o sítio para produção
$ ntl deploy --prod
Netlify com Git
- Empurre o teu código para um repositório de git (GitHub, GitLab, BitBucket, Azure DevOps).
- Importe o projeto para a Netlify.
- Escolha o ramo, diretório de saída, e configure as variáveis de ambiente se aplicável.
- Clique sobre Deploy (Desdobrar)
- 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
- Instale a Linha de Comando da Vercel e execute
vercel
para desdobrar. - A Vercel detetará que estás utilizando a Vite e ativará as definições corretas para o teu desdobramento.
- A tua aplicação está desdobrada! (por exemplo, vite-vue-template.vercel.app).
$ 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
- Empurre o teu código para o teu repositório de git (GitHub, GitLab, Bitbucket).
- Importe o teu projeto de Vite para a Vercel.
- A Vercel detetará que estás utilizando a Vite e ativará as definições corretas para o teu desdobramento.
- 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
- Instale a Linha de Comando Wrangler.
- Autentica a Wrangler com a tua conta da Cloudflare utilizando
wrangler login
. - Executa o teu comando de construção.
- Desdobra utilizando
npx wrangler pages publish dist
.
# 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
- Empurre o teu código para o teu repositório (GitHub, GitLab).
- Entre no painel de controlo da Cloudflare e selecione a tua conta em Account Home (Casa da Conta) > Pages (Páginas).
- Selecione Create a new Project (Criar um novo Projeto) e a opção Connect Git (Conectar a Git).
- Selecione o projeto de git que queres desdobrar e clique em Begin setup (Iniciar a configuração).
- Selecione a configuração da abstração correspondente nas definições da construção dependendo da abstração de Vite que selecionaste.
- Depois guarde e desdobre!
- 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
Certifica-te de que tens a firebase-tools instalada.
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>" } }
Após executares
npm run build
, desdobre utilizando o comandofirebase deploy
.
Surge
Primeiro instale a surge, se já não a tiveres instalada.
Execute
npm run build
.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:
- De uma conta Azure e de uma chave de subscrição. Tu podes criar uma conta Azure gratuita aqui.
- Que o código da tua aplicação seja empurrado para GitHub.
- Da Extensão SWA no Visual Studio Code.
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.
Crie uma conta Render.
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).
Conecte a tua conta GitHub/GitLab ou utilize um repositório público.
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
- Comando de Construção (Build Command, em Inglês):
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.