Reputation: 189
I am trying to setup a local development environment with docker.
Those things are already working with my setup below:
container 1: node is running gulp, copy files if any file is changed on the host-system to the container 2 with volumes this works
container 2: apache with php is running, so I am able to see anything in the browser. this works too
Those things do not work yet and I need your help:
if I save any file on the host-system the browser-sync-autoreload should refresh the page on my localhost
I would like to specify the localhost-domain. for example: I would like to use www.dev.fancyprojectonlocalhost.com
How to do those things?
This is my setup:
Dockerfile
FROM node:8.15.0-slim
WORKDIR /usr/src/html/
COPY . /usr/src/html
RUN cd /usr/src/html
RUN npm install --global gulp-cli
RUN npm install
EXPOSE 3000
CMD ["gulp"]
docker-compose.yml
#docker-compose-up -d
version: '3'
services:
gulp:
stdin_open: true
tty: true
container_name: docker-gulp
build: .
volumes:
- ".:/usr/src/html"
ports:
- "3000:3000"
- "3001:3001"
web:
image: php:7.2.2-apache
container_name: php_web
volumes:
- ./web/:/var/www/html/
ports:
- "8888:80"
stdin_open: true
tty: true
Browser-Sync.js from my gulp
const browserSync = require('browser-sync').create();
export function init(callback) {
browserSync.init({
//proxy: pkg.urls.dev,
//proxy: "localhost:8888", I did try a lot here but nothing did work.
//port: 8888,
//notify: false,
// Do not open browser on start
//open: false
});
callback();
}
export function reload(callback) {
browserSync.reload();
callback();
}
Anybody got an idea how to get a custom domain and autorefresh working? I did try a lot of things but nothing works. For example I did try to use proxy/ports inside the gulpfile, changed the ports from the apache and the node-server etc. but the best result I came up with is the running apache with the working gulp. Without autorefresh and also no special localhost-domain.
Thanks a lot in advance
Upvotes: 3
Views: 1780
Reputation: 189
Somebody did help me to find a solution!
Get browser-sync to work:
First of all my browser-sync had some problems:
const browserSync = require('browser-sync').create();
export function init(callback) {
browserSync.init({
proxy: 'http://web',
open: false
});
callback();
}
export function reload(callback) {
browserSync.reload();
callback();
}
We do need http://web
because docker creates a default link between docker containers.
In this case http is important.
web
is coming from my Docker-Compose.yml
version: '3'
services:
gulp:
stdin_open: true
tty: true
container_name: docker-gulp
build: .
volumes:
- ".:/usr/src/html"
ports:
- "3000:3000"
- "3001:3001"
web:
restart: always
image: php:7.2.2-apache
container_name: php_web
volumes:
- ./web/:/var/www/html/
ports:
- "80:80"
stdin_open: true
tty: true
I were able to debug the problem with "curl" from the CLI.
docker-compose exec gulp curl http://web
is going into my "gulp"-container and checks if it is able to reach the "web"-container. If it is not the case it will not work. Also make sure to open port 3000:3000 for your gulp.
Possible solution to configure different VHOST-Urls without changing the VHOST-Config on your local host
This one seems to be the best and easiest solution: https://hub.docker.com/r/jwilder/nginx-proxy
I haven't had time to find a solution yet, but it's good to know it exists.
Upvotes: 2