Front end

Como ficaria a configuracao do Docker e docker-compose.yml se eu quiser criar mais um container para fazer um front (vue3 + vite) para acessar a api?
Olá, Edgar!
Tudo bem?
O processo para frontend é um pouco diferente, porque gera o buid do projeto.
Você pode compilar loacl (npm rum dev) e usar a URL externa para acessar o seu container docker, através da posta exposta: ex localhost:8180
Neste curso vou ensinar como criar um setup docker, para compilar o Vue automaticamente.
Básicamente este é o conteúdo do Dockerfile:
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build
FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY ./docker/nginx.conf /etc/nginx/nginx.conf
Precisa ter um nginx em .docker/nginx.conf
(https://cli.vuejs.org/guide/deployment.html#docker-nginx)
E este docker-compose.yml:
version: "3.7"
services:
# image project
frontend_vue:
build:
context: ./
dockerfile: Dockerfile
image: vue-app
ports:
- 80:8080
restart: unless-stopped
networks:
- eti
networks:
eti:
driver: bridge
Aí sempre que fizer o buid do container compila o projeto para produção, e expõe a porta 80
docker-compose up -d --build
--
Se ficar em dúvida sobre estes conceitos do Docker, super recomendo este curso: https://academy.especializati.com.br/curso/docker

Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!