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
Figured it out, here is my updated Dockerfile.
Those who are using
Vue
webpack
in Laravel and trying to dockerize.You just need to add these below two lines in your
Dockerfile
.Reference:
https://hub.docker.com/r/91dave/webpack-cli