Desdobrar o Nuxt na Plataforma Serverless da Koyeb
Desdobrar o Nuxt na Plataforma Serverless da Koyeb com Docker
A Koyeb é uma plataforma serverless amigável ao desenvolvedor para desdobrar aplicações globalmente. A plataforma permite você ininterruptamente executar contentores do Docker, aplicações web, APIs com desdobramento baseado no Git, escalamento nativo automático, uma rede de limite global, e serviço de coordenação e descoberta embutido.
Neste guia, nós mostraremos como dockerizar e desdobrar uma aplicação Nuxt na plataforma Koyeb.
A Koyeb permite você desdobrar contentores do Docker a partir do registo de sua escolha. Neste guia nós usamos o Docker Hub para guardar nossa imagem mas você está livre de usar o Registo de Contentor do GitHub , o Registo de Contentor do GitLab ou qualquer outro provedor de registo de contentor.
Requisitos
Para seguir com êxito e completar este guia, você precisa:
- Um projeto Nuxt para desdobrar. Você pode usar o create-nuxt-app para criar um projeto Nuxt e começar.
- Uma conta no Koyeb para desdobrar e executar a aplicação Nuxt dockerizada
- Uma conta no Docker Hub para empurrar a imagem do Docker e desdobrar ela no Koyeb
Começar
Dentro do diretório da sua aplicação Nuxt execute o seguinte comando para instalar as dependências:
yarn
Uma vez que as dependências estão instaladas, execute a sua aplicação e certifique que tudo está funcionando corretamente:
yarn dev
Dockerizar a sua aplicação
Para Dockerizar a sua aplicação Nuxt, você precisa criar um ficheiro Dockerfile
dentro do diretório do seu projeto contendo o conteúdo abaixo:
FROM node:lts as builder
WORKDIR /app
COPY . .
RUN yarn install \
--prefer-offline \
--frozen-lockfile \
--non-interactive \
--production=false
RUN yarn build
RUN rm -rf node_modules && \
NODE_ENV=production yarn install \
--prefer-offline \
--pure-lockfile \
--non-interactive \
--production=true
FROM node:lts
WORKDIR /app
COPY /app .
ENV HOST 0.0.0.0
EXPOSE 80
CMD [ "yarn", "start" ]
Para construir uma imagem do Docker execute o seguinte comando:
docker build . -t <YOUR_DOCKER_HUB_USERNAME>/my-nuxt-project
Este comando construirá a imagem do Docker com o nome <YOUR_DOCKER_HUB>/my-nuxt-project. Um vez que a construção estiver terminada, você pode executar um contentor usando a imagem localmente para validar que tudo está funcionado como o esperado.
docker run -p 3000:3000 <YOUR_DOCKER_HUB_USERNAME>/my-nuxt-project
Abra o seu navegador e navegue até o http://localhost:3000 para visualizar a página de desembarque da sua aplicação.
Empurrar a sua imagem do Docker para o registo de contentor
Depois de nossa imagem do Docker estar construida e funcional dentro do nosso teste, nós podemos agora carregar ela para um registo de contentor. Nesta documentação, nós guardaremos a nossa imagem no Docker Hub. Dentro do seu terminal execute o comando abaixo para empurrar a imagem:
docker push <YOUR_DOCKER_HUB_USERNAME>/my-nuxt-project
Desdobrar a aplicação Nuxt para produção na Koyeb
No Painel de Controlo da Koyeb, clique no botão Create App (Criar Aplicação).
Dentro do formulário, preencha o campo Docker image (imagem do Docker)
com o nome da imagem de nós criamos previamente a qual deve parecer com <YOUR_DOCKER_HUB_USERNAME>/my-nuxt-project
.
Marque a caixa Use a private registry (Usar um registo privado)
e, dentro do campo selecionar, clique em Create Repository Secret (Criar Segredo de Repositório).
Um modal abre pedindo por:
-
um nome para o Segredo que será criado, nós podemos usar para instância
docker-hub-secret
- o provedor de registo para gerar o segredo contendo as credenciais do seu registo privado, no nosso caso o Docker Hub
- o seu nome de usuário do Docker Hub e a palavra-chave. Nós recomendamos a você criar um código (token) de acesso a partir do Docker Hub para usar no lugar da sua palavra-chave. Uma vez que você tem preenchido todos os campos, clique no botão Create (Criar).
Nós não precisamos mudar o Path (Caminho), a nossa aplicação estará disponível na raiz do nosso domínio: /
.
Dê um nome a sua Aplicação, exemplo nuxt-app
, e clique em Create App (Criar Aplicação).
Você pode adicionar mais regiões para desdobrar suas aplicações, definir variáveis de ambiente, e definir escalamento horizontal de acordo com as suas necessidades.
Você será automaticamente redirecionado para a página Koyeb App onde você pode seguir o progresso do desdobramento da sua aplicação Nuxt. Dentro de poucos segundos, um vez que a sua aplicação está desdobrada, clique na Public URL (URL Pública) que termina com koyeb.app
.
A sua aplicação Nuxt agora está executando na Koyeb e beneficia do escalamento nativo automático, HTTPs (SSL) automático, auto-estabilização, e balanceador de carregamento global através do limite da nossa rede.
![Sébastien Chopin](/_nuxt/image/841744.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/add3e2.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)