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 usandobuild.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:
{
"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:
$ 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
:
$ 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:
{
"scripts": {
"preview": "vite preview --port 8080"
}
}
Agora o comando preview
lançará o servidor na http://localhost:8080
.
GitHub Pages
Definimos a
base
correta novite.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 abase
para'/'
. Alternativamente, podemos removerbase
da configuração, já que esta predefine para'/'
.Se estivermos implementando na
https://<USERNAME>.github.io/<REPO>/
(por exemplo, o nosso repositório está emhttps://github.com/<USERNAME>/<REPO>
), então definimos abase
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 novite.config.js
.Se estivermos implementando na
https://<USERNAME or GROUP>.gitlab.io/
, podemos omitir abase
, já que esta predefine para'/'
.Se estivermos implementando na
https://<USERNAME or GROUP>.gitlab.io/<REPO>/
, por exemplo o nosso repositório está emhttps://gitlab.com/<USERNAME>/<REPO>
, então definimos abase
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: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
- Instalamos a Interface da Linha de Comando da Netlify.
- Críamos uma nova aplicação usando
ntl init
. - Implantamos usando
ntl deploy
:
# 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
:
# 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):
$ 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
.
# 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:json{ "hosting": { "public": "dist", "ignore": [], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }
js{ "projects": { "default": "<YOUR_FIREBASE_ID>" } }
Depois de executarmos
npm run build
, implementamos usando o comandofirebase 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
- Comando de Construção (ou Build Command):
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.