One of the container of my docker-compose is watching my sass to recompile it on change
version: '3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
ports:
- "3306:3306"
restart: always
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:6
volumes:
- ./themes:/var/www/html/wp-content/themes
- ./plugins:/var/www/html/wp-content/plugins
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DB_NAME: wordpress
node:
image: node:16
command: npm start --prefix node
working_dir: /usr/src
volumes:
- ./:/usr/src
volumes:
db_data: {}
So the node container have the following package.json
{
"name": "app",
"version": "1.0.0",
"description": "## Dev",
"main": "index.js",
"scripts": {
"start": "npm install && sass -w /usr/src/scss/style.scss:/usr/src/style.css"
},
"dependencies": {
"bootstrap": "^5.2.0",
"sass": "^1.54.8"
}
}
On Mac this is working perfectly
node_1 | Sass is watching for changes. Press Ctrl-C to stop.
node_1 |
node_1 | Compiled ../scss/style.scss to ../style.css.
But on Windows I have
node_1 | Sass is watching for changes. Press Ctrl-C to stop.
Then when we edit scss/style.scss nothing is triggered
Related
i want to ask, why my docker can't find axios module. I can't find solution in the internet and documentations. This is my docker file:
Dockerfile
# build stage
FROM node:lts-alpine as build-stage
# Create app directory
WORKDIR /app
# Install all dependecies
COPY package*.json ./
RUN npm install
# Bundle app source
COPY . .
I have installed by "npm install axios --save" and without this flag.
My package.json
{
"name": "frontend",
"version": "0.0.0",
"scripts": {
"dev": "vite --host 0.0.0.0",
"build": "vite build",
"preview": "vite preview --port 5050",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"axios": "^0.27.2",
"primeicons": "^5.0.0",
"primevue": "^3.12.5",
"vee-validate": "^4.5.11",
"vue": "^3.2.31",
"vue-router": "^4.0.13",
"vuex": "^4.0.2"
},
"devDependencies": {
"#rushstack/eslint-patch": "^1.1.0",
"#vitejs/plugin-vue": "^2.3.1",
"#vue/eslint-config-prettier": "^7.0.0",
"eslint": "^8.5.0",
"eslint-plugin-vue": "^8.2.0",
"prettier": "^2.5.1",
"vite": "^2.9.5"
}
}
Answer of docker-compose
frontedMatol | Failed to resolve import "axios" from "src/services/auth.service.js". Does the file exist?
frontedMatol | 2:13:05 PM [vite] Internal server error: Failed to resolve import "axios" from "src/services/auth.service.js". Does the file exist?
frontedMatol | Plugin: vite:import-analysis
frontedMatol | File: /app/src/services/auth.service.js
frontedMatol | 1 | import axios from 'axios';
frontedMatol | | ^
frontedMatol | 2 | const API_URL = 'http://localhost:8000/api/v1/'
frontedMatol | 3 | class AuthService {
frontedMatol | at formatError (/app/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:36435:46)
frontedMatol | at TransformContext.error (/app/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:36431:19)
frontedMatol | at normalizeUrl (/app/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:59840:26)
frontedMatol | at async TransformContext.transform (/app/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:59989:57)
frontedMatol | at async Object.transform (/app/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:36672:30)
frontedMatol | at async doTransform (/app/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:55662:29)
I have to add docker-compose too:
version: '3.9'
services:
postgres:
container_name: postgresxx
image: postgres
environment:
POSTGRES_USER: xx
POSTGRES_PASSWORD: xx
PGDATA: /data/postgres
volumes:
- postgres:/data/postgres
ports:
- "5432:5432"
networks:
- postgres
restart: unless-stopped
pgadmin:
container_name: pgadminxx
image: dpage/pgadmin4
environment:
PGADMIN_DEFAULT_EMAIL: ${PGADMIN_DEFAULT_EMAIL:-pgadmin4#pgadmin.org}
PGADMIN_DEFAULT_PASSWORD: ${PGADMIN_DEFAULT_PASSWORD:-xx}
PGADMIN_CONFIG_SERVER_MODE: 'False'
volumes:
- pgadmin:/var/lib/pgadmin
ports:
- "5050:80"
networks:
- postgres
restart: unless-stopped
maildev:
container_name: mailDevXx
image: maildev/maildev
ports:
- "1080:1080"
- "1025:1025"
networks:
- spring
backend:
container_name: backendxx
image: xx/xx-backend:latest
ports:
- "8000:8000"
environment:
- SPRING_PROFILES_ACTIVE=docker
networks:
- postgres
- spring
depends_on:
- postgres
frontend:
container_name: frontedXx
build:
context: ../frontend
dockerfile: Dockerfile
working_dir: /app
command: [ "npm", "run", "dev" ]
env_file:
- ../config/env/server-developer.env
environment:
- CHOKIDAR_USEPOLLING=true
volumes:
- type: bind
source: ../frontend
target: /app
- type: volume
source: node_modules
target: /app/node_modules
ports:
- 8080:8080
depends_on:
- backend
networks:
postgres:
driver: bridge
spring:
driver: bridge
volumes:
postgres:
pgadmin:
node_modules:
I changed names to xx to make it private.
So as i said, I am building project with docker-compose -f name_file up/build, and the server can't import axios. All of the "tutorials" said " change from ../axios to 'axios'. This can't help.
Also, i am working with visual studio code with docker extension, i went inside, and check yts package.json and lock. All of them has an axios dependency. So i am black whole.
THE MOST IMPORTANT is when i am building only vite, from frontend dir with npm run dev- axios works.
I can put repository flow, if you need it.
I am creating containers for all my projects, mostly in Wordpress, and I was wondering if for example I could upload several projects at the same time, because in this configuration that I use the docker, I have to disable one, in order to activate another. Example project1.local and project2.local, how could you do it that way?
docker-compose.yml
version: '3.3'
services:
wordpress:
build: .
container_name: ${APP_NAME}-wordpress
restart: always
ports:
- 80:80
environment:
WORDPRESS_DB_HOST: ${DB_HOST}
WORDPRESS_DB_USER: ${DB_USER}
WORDPRESS_DB_PASSWORD: ${DB_PASS}
WORDPRESS_DB_NAME: ${DB_NAME}
WORDPRESS_TABLE_PREFIX: ${DB_TABLE_PREFIX}
WORDPRESS_CONFIG_EXTRA: |
/* Direct FTP */
define('FS_METHOD', 'direct');
volumes:
- ./src:/var/www/html/wp-content:rw
- ./config/php.ini:/usr/local/etc/php/conf.d/php.ini
depends_on:
- db
db:
image: mariadb
container_name: ${APP_NAME}-db
volumes:
- './database/db:/var/lib/mysql:delegated'
environment:
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
MYSQL_DATABASE: ${DB_NAME}
MYSQL_USER: ${DB_USER}
MYSQL_PASSWORD: ${DB_PASS}
restart: always
ports:
- '3306:3306'
phpmyadmin:
image: phpmyadmin/phpmyadmin
container_name: ${APP_NAME}-phpmyadmin
volumes:
- ./config/phpmyadmin.ini:/usr/local/etc/php/conf.d/phpmyadmin.ini
environment:
PMA_HOST: ${DB_HOST}
PMA_PORT: 3306
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
ports:
- '8080:80'
links:
- db:db
Dockerfile
FROM wordpress
RUN chown -R www-data:www-data /var/www/html
There are some things that you can do:
1- Since you've declare:
ports:
- 80:80
You can't get to many wordpress at the same time with different docker-compose. So, you can delete the binding from your instance like this:
ports:
- 80
Doing it, you can make several docker-compose with different ports without worrying about the ports.
But there is another problem... Your database it's already up. So, in this case, if you want to use several docker-compose for each project you'll need another docker-compose for your database. So... the docker-compose solution is get another docker-compose for your database and in every docker-compose file add an external network:
With it, you can use the dns name as its always.
The other way is using the same template like this:
version: '3.3'
networks:
default:
external:
name: wordpresses
services:
wordpress_1:
build: .
container_name: ${APP_NAME}-wordpress
restart: always
ports:
- 80
environment:
WORDPRESS_DB_HOST: ${DB_HOST}
WORDPRESS_DB_USER: ${DB_USER}
WORDPRESS_DB_PASSWORD: ${DB_PASS}
WORDPRESS_DB_NAME: ${DB_NAME}
WORDPRESS_TABLE_PREFIX: ${DB_TABLE_PREFIX}
WORDPRESS_CONFIG_EXTRA: |
/* Direct FTP */
define('FS_METHOD', 'direct');
volumes:
- ./src/project1:/var/www/html/wp-content:rw
- ./config/php.ini:/usr/local/etc/php/conf.d/php.ini
depends_on:
- db
wordpress_2:
build: .
container_name: ${APP_NAME}-wordpress
restart: always
ports:
- 80
environment:
WORDPRESS_DB_HOST: ${DB_HOST}
WORDPRESS_DB_USER: ${DB_USER}
WORDPRESS_DB_PASSWORD: ${DB_PASS}
WORDPRESS_DB_NAME: ${DB_NAME}
WORDPRESS_TABLE_PREFIX: ${DB_TABLE_PREFIX}
WORDPRESS_CONFIG_EXTRA: |
/* Direct FTP */
define('FS_METHOD', 'direct');
volumes:
- ./src/project2:/var/www/html/wp-content:rw
- ./config/php.ini:/usr/local/etc/php/conf.d/php.ini
depends_on:
- db
db:
image: mariadb
container_name: ${APP_NAME}-db
volumes:
- './database/db:/var/lib/mysql:delegated'
environment:
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
MYSQL_DATABASE: ${DB_NAME}
MYSQL_USER: ${DB_USER}
MYSQL_PASSWORD: ${DB_PASS}
restart: always
ports:
- '3306:3306'
phpmyadmin:
image: phpmyadmin/phpmyadmin
container_name: ${APP_NAME}-phpmyadmin
volumes:
- ./config/phpmyadmin.ini:/usr/local/etc/php/conf.d/phpmyadmin.ini
environment:
PMA_HOST: ${DB_HOST}
PMA_PORT: 3306
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
ports:
- '8080:80'
links:
- db:db
I know wordpress has some issues if you don't put the domain. In any case, you can use a NGINX in front of all wordpress as a reverse proxy like this Example.
Feel free to ask!
I have two directories each running an identical docker build except for the allocated ports. I cannot connect to one of the containers in my localhost.
After running the docker ps command I see that 80/tcp being prepended to my second recipe-blog container. Below is my yml file, its nothing crazy, just setting up a database running php my admin and have it connect to a WordPress install. I also attached an image of the docker ps command.
services:
# Database
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: wordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
networks:
- wpsite
# phpmyadmin
phpmyadmin:
depends_on:
- db
image: phpmyadmin/phpmyadmin
restart: always
ports:
- '9090:90'
environment:
PMA_HOST: db
MYSQL_ROOT_PASSWORD: password
networks:
- wpsite
# Wordpress
wordpress:
depends_on:
- db
image: wordpress:5.3.0
ports:
- '9000:90'
restart: always
working_dir: /var/www/html
volumes:
- ./wp-content:/var/www/html/wp-content
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
networks:
- wpsite
networks:
wpsite:
volumes:
db_data: {}
wp-content:
Once again - finalsandbox_ I can connect to fine, I cannot connect to recipe-blog_. The only difference between the two yml files is that for the recipe-blog_ I changed the ports to be 9090:90 instead of 8080:80 and 9000:90 instead of 8000:80.
Thanks in advance.
It works for me, example
version: "3"
services:
# Database
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: wordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
networks:
- wpsite
# phpmyadmin
phpmyadmin:
depends_on:
- db
image: phpmyadmin/phpmyadmin
restart: always
ports:
- '9090:80'
environment:
PMA_HOST: db
MYSQL_ROOT_PASSWORD: wordpress
networks:
- wpsite
# Wordpress
wordpress:
depends_on:
- db
image: wordpress:5.3.0
ports:
- '9000:80'
restart: always
working_dir: /var/www/html
volumes:
- ./wp-content:/var/www/html/wp-content
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
networks:
- wpsite
networks:
wpsite:
volumes:
db_data: {}
wp-content:
Change all the ports assigned by 90 to 80.
docker-compose up -d
with your we-browser favorite, connect to http://127.0.0.1:9000 and http://127.0.0.1:9090
I have set up a Docker environment for my Drupal installation, I created a theme and I want it to work with gulp and browser-sync. When I run my gulp script with browser-sync that is shown below it opens a new browser tab but the page just keeps loading.
My Docker file:
version: "2"
services:
mariadb:
image: wodby/mariadb:$MARIADB_TAG
container_name: "${PROJECT_NAME}_mariadb"
stop_grace_period: 30s
environment:
MYSQL_ROOT_PASSWORD: $DB_ROOT_PASSWORD
MYSQL_DATABASE: $DB_NAME
MYSQL_USER: $DB_USER
MYSQL_PASSWORD: $DB_PASSWORD
php:
image: wodby/drupal-php:$PHP_TAG
container_name: "${PROJECT_NAME}_php"
environment:
PHP_SENDMAIL_PATH: /usr/sbin/sendmail -t -i -S mailhog:1025
DB_HOST: $DB_HOST
DB_USER: $DB_USER
DB_PASSWORD: $DB_PASSWORD
DB_NAME: $DB_NAME
DB_DRIVER: $DB_DRIVER
volumes:
- ./:/var/www/html
nginx:
image: wodby/nginx:$NGINX_TAG
container_name: "${PROJECT_NAME}_nginx"
depends_on:
- php
environment:
NGINX_STATIC_OPEN_FILE_CACHE: "off"
NGINX_ERROR_LOG_LEVEL: debug
NGINX_BACKEND_HOST: php
NGINX_SERVER_ROOT: /var/www/html/web
NGINX_VHOST_PRESET: $NGINX_VHOST_PRESET
volumes:
- ./:/var/www/html
labels:
- 'traefik.backend=nginx'
- 'traefik.port=80'
- 'traefik.frontend.rule=Host:${PROJECT_BASE_URL}'
pma:
image: phpmyadmin/phpmyadmin
container_name: "${PROJECT_NAME}_pma"
environment:
PMA_HOST: $DB_HOST
PMA_USER: $DB_USER
PMA_PASSWORD: $DB_PASSWORD
PHP_UPLOAD_MAX_FILESIZE: 1G
PHP_MAX_INPUT_VARS: 1G
labels:
- 'traefik.backend=pma'
- 'traefik.port=80'
- 'traefik.frontend.rule=Host:pma.${PROJECT_BASE_URL}'
portainer:
image: portainer/portainer
container_name: "${PROJECT_NAME}_portainer"
command: --no-auth -H unix:///var/run/docker.sock
volumes:
- /var/run/docker.sock:/var/run/docker.sock
labels:
- 'traefik.backend=portainer'
- 'traefik.port=9000'
- 'traefik.frontend.rule=Host:portainer.${PROJECT_BASE_URL}'
traefik:
image: traefik
container_name: "${PROJECT_NAME}_traefik"
command: -c /dev/null --web --docker --logLevel=INFO
ports:
- '8000:80'
volumes:
- /var/run/docker.sock:/var/run/docker.sock
My gulpfile:
(I'm not using that environmental variable, but it is to show what url I used there.)
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "${PROJECT_BASE_URL}"
});
});
I guess your frontend is running on the nginx-container or php-container.
Try to use:
...
proxy: "http://nginx"
...
or
...
proxy: "http://php"
...
I think you should at least be able to see your browser-sync at your configurated localhost with the right port.
Maybe it does help but I am not sure either.
I have the following file at ./wordpress/docker-compose.yaml:
version: '3.3'
serivces:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
evironment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- "8000:80"
volumes:
- ./:/var/www/html
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
volumes:
db_data
When I run cd ./wordpress && docker-compose up -d I get the following error:
ERROR: In file './docker-compose.yaml', volume must be a mapping, not a string.
Can anyone tell me what I'm doing wrong?
There are certain typo errors first of, like serivces, evironment. They should spell services and environment. Also for the "... not string" error, just append ":" after your volume name like below
volumes:
db_data:
I had the same problem just now and the key was the indentation of the volume name i.e. db_data.
I fixed it by putting the volume name on the same level of indentation as the depends_on under the wordpress service in the example above. (hit TAB)
volumes:
mydata:
vs
volumes:
mydata:
that's will fix it and it works for me
volumes:
db_data:
driver: local
version: '3.3'
serivces:
db:
image: mysql:5.7
command: bash -c "mkdir -p /var/lib/mysql/"
volumes:
- db_data:/var/lib/mysql/
restart: always
evironment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- "8000:80"
volumes:
- ./:/var/www/html
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
volumes:
db_data: {}
save as docker-compose.yml
cd wordpress
docker-compose up