skip to Main Content

I have a simple, working Laravel app which uses Docker and I am trying to add Vue.

Here is my docker-compose.yml:

version: '3.1'
services:

  ### THIS IS WHAT I ADDED
  # Frontend service
  frontend:
    image: node:current-alpine
    build: ./sandbox
    container_name: my_app_frontend
    ports:
      - 8080:8080
    volumes:
      - "/app/node_modules"
      - ".:/app"
    command: "npm run serve"
  ###

  #PHP Service
  my_app:
    build:
      context: .
      dockerfile: 'Dockerfile'
    image: digitalocean.com/php
    container_name: my_app
    restart: unless-stopped
    tty: true
    environment:
      SERVICE_NAME: app
      SERVICE_TAGS: dev
    working_dir: /var/www
    volumes:
      - ./:/var/www
      - ./php/local.ini:/usr/local/etc/php/conf.d/local.ini
    networks:
      - app-network

  #NPM Service
  my_app_npm:
    image: node:latest
    container_name: my_app_npm
    volumes:
      - ./:/var/www/
    working_dir: /var/www/
    tty: true
    networks:
      - app-network

  #Nginx Service
  my_app_server:
    image: nginx:alpine
    container_name: my_app_webserver
    restart: unless-stopped
    tty: true
    ports:
      - "82:80"
      - "4443:443"
    volumes:
      - ./:/var/www
      - ./nginx/conf.d/:/etc/nginx/conf.d/
    networks:
      - app-network

  #MySQL Service
  my_app_db:
    image: mysql:5.7
    command: --default-authentication-plugin=mysql_native_password --innodb-use-native-aio=0
    container_name: my_app_db
    restart: always
    tty: true
    ports:
      - "8082:3306"
    environment:
      MYSQL_PASSWORD: xxxxx
      MYSQL_ROOT_PASSWORD: xxxxx
    volumes:
      - ./mysql/my.cnf:/etc/mysql/my.cnf
    networks:
      - app-network

  #Phpmyadmin Service
  my_app_phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: my_app_phpmyadmin
    restart: always
    links:
      - my_app_db
    depends_on:
      - my_app_db
    ports:
      - 8083:80
    environment:
      PMA_HOST: my_app_db
    networks:
      - app-network

#Docker Networks
networks:
  app-network:
    driver: bridge

Here is my Dockerfile in my Vue directory:

FROM node:lts-alpine
WORKDIR /app
COPY package*.json ./
RUN  npm install
EXPOSE 8080
CMD ["npm", "run", "serve"]

The file structure looks like this:

-app
-database
-mysql
-nginx
-sandbox(vue)
  -node_modules
  -public
  -src
  Dockerfile
  package.json
  ...
docker-compose.yml
Dockerfile
package.json
...
  

docker-compose build //works

docker-compose up //fails with this error

This relative module was not found:
my_app_frontend |
my_app_frontend | * ./src/main.js in multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js
my_app_frontend | [webpack.Progress] 100%

What am I missing?

2

Answers


  1. Chosen as BEST ANSWER

    Figured it out, here is my updated Dockerfile.

    FROM node:lts-alpine
    # install simple http server for serving static content
    WORKDIR /app
    COPY package*.json ./
    RUN  npm install
    # copy project files and folders to the current working directory (i.e. 'app' folder)
    COPY . . // THIS WAS MISSING
    EXPOSE 8080
    CMD ["npm", "run", "serve"]
    

  2. Those who are using Vue webpack in Laravel and trying to dockerize.

    You just need to add these below two lines in your Dockerfile.

    FROM node:10-alpine
    RUN npm i -g webpack webpack-cli
    

    Reference:
    https://hub.docker.com/r/91dave/webpack-cli

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search