Edgar Olavo Garcia Dantas
Criador Edgar Olavo Garcia Dantas 05/01/2022

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?

 

Manager Carlos Ferreira 05/01/2022

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

Carlos Ferreira
Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!