I'm trying to port my already-working webpack app to a docker setup for easier development env setup. I've used a following Dockerfile for this:
FROM scardon/ruby-node-alpine
MAINTAINER mbajur#gmail.com
RUN apk add --no-cache build-base python
ENV BUNDLE_PATH /box
RUN mkdir -p /app
WORKDIR /app
COPY . ./
EXPOSE 4567
And my docker-compose.yml
version: '3'
services:
app: &app_base
build:
context: .
command: webpack --watch -d --color
volumes:
- .:/app
- box:/box
ports:
- "4567:4567"
volumes:
box:
And i'm running my webpack setup with
$ docker-compose up
However, for some reason, webpack can't see changes made to my files. Also, after some googling, i've tried using --watch-poll instead but it then exits immediately after first build instead watching as a deamon.
What can i do to make it work in docker-alpine ? I have a feeling i'm missing something simple in here.
ps. my project is mostly based on this: https://github.com/grassdog/middleman-webpack
ps2. i'm pretty sure it has nothing to do with webpack config cause it works perfectly fine when used outside of docker
ps3. i've also played with setting up fs.inotify.max_user_watches to 524288 but it didn't changed much
Related
I have a problem with my Nuxt 3 project that I run with Docker (dev environment).
Nuxt 3 should automatically create routes when I create .vue files in pages directory, and that works when I run my project outside of Docker, but when I use Docker it doesn't recognize my files until I restart the container. Same thing happens when I try to delete files from pages directory, it doesn't recognize any changes until I restart the container. Weird thing is that this happens only in pages directory, in other directories everything works fine. Just to mention that hot reload works, I set up vite in nuxt.config.ts.
docker-compose.yaml
version: '3.8'
services:
nuxt:
build:
context: .
image: nuxt_dev
container_name: nuxt_dev
command: npm run dev
volumes:
- .:/app
- /app/node_modules
ports:
- "3000:3000"
- "24678:24678"
Dockerfile:
FROM node:16.14.2-alpine
WORKDIR /app
RUN apk update && apk upgrade
RUN apk add git
COPY ./package*.json /app/
RUN npm install && npm cache clean --force && npm run build
COPY . .
ENV PATH ./node_modules/.bin/:$PATH
ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000
EXPOSE 3000
CMD ["npm", "run", "dev"]
I tried some things with Docker volumes, like to add a separate volume just for pages, like this:
./pages:app/pages
/pages:app/pages
app/pages
but as I thought, none of those things helped.
One more thing that is weird to me, when I created a .vue file in pages directory, I checked if it appeared in the container and it did. I'm not an expert in Docker nor in Nuxt, I just started to learn, so any help would be much appreciated.
I have dockerized the sveltekit app and my issue is that when I am running container
and when I make changes in frontend UI I am able to see them only for 1 second and then
my frontend is looking like before any changes.
I think that problem is about caching in sveltekit.
My Dockerfile:
FROM node:16
WORKDIR /test-app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build
ENV PORT 3000
EXPOSE 3000
EXPOSE 24678
CMD ["node", "build"]
My docker-compose.yaml file:
version: '3'
services:
svelte-test:
image: sveltekit-test:node
volumes:
- ./:/test-app/
ports:
- 3000:3000
- 24678:24678
- 5173:5173
tty: true
stdin_open: true
Port 3000 is for sveltekit, 5173 is for sveltekit but in Docker and 24678 is for vite.
My folder structure is:
sveltekit-docker
test-app
-Dockerfile
-docker-compose.yaml
-package-lock.json
-package.json
-svelte.config.js
-tsconfig.json
-vite.config.js
-all sveltekit folders (src, node_modules, static, tests)
If you want to see the changes you need HMR (Hot module reloading) available in dev mode.
You also may need to rebuild esbuild. Try replacing the last line of your Dockerfile with
CMD npm rebuild esbuild && npm run dev -- --host
I created a repo if it helps.
To use it:
docker build --tag sveltekit-test .
docker-compose up
I want to dockerize my vuejs app and to pass it environment variables from the docker-compose file.
I suspect the app gets the environment variables only at the build stage, so it does not get the environment variables from the docker-compose.
vue app:
process.env.FIRST_ENV_VAR
Dockerfile:
FROM alpine:3.7
RUN apk add --update nginx nodejs
RUN mkdir -p /tmp/nginx/vue-single-page-app
RUN mkdir -p /var/log/nginx
RUN mkdir -p /var/www/html
COPY nginx_config/nginx.conf /etc/nginx/nginx.conf
COPY nginx_config/default.conf /etc/nginx/conf.d/default.conf
WORKDIR /tmp/nginx/vue-single-page-app
COPY . .
RUN npm install
RUN npm run build
RUN cp -r dist/* /var/www/html
RUN chown nginx:nginx /var/www/html
CMD ["nginx", "-g", "daemon off;"]
docker-compose:
version: '3.6'
services:
app:
image: myRegistry/myProject:tag
restart: always
environment:
- FIRST_ENV_VAR="first environment variable"
- SECOND_ENV_VAR="first environment variable"
ports:
- 8080:8080
Is there any way to pass environment variables to a web application after the build stage?
In vue js apps you need to pass the env variables as VUE_APP_
so in your case it should be VUE_APP_FIRST_ENV_VAR
Based on this https://medium.com/#rakhayyat/vuejs-on-docker-environment-specific-settings-daf2de660b9, I have made a silly npm package that help to acomplish what you want.
Go to https://github.com/juanise/jvjr-docker-env and take a look to README file.
Basically just run npm install jvjr-docker-env. A new Dockerfile, entrypoint and json file will be added to your project.
Probably you will need to modify some directory and/or file name in Dockerfile in order to work.
You can try this. The value of FIRST_ENV_VAR inside docker will be set to the value of FIRST_ENV_VAR_ON_HOST on your host system.
version: '3.6'
services:
app:
image: myRegistry/myProject:tag
restart: always
environment:
- FIRST_ENV_VAR=$FIRST_ENV_VAR_ON_HOST
- SECOND_ENV_VAR=$SECOND_ENV_VAR_ON_HOST
ports:
- 8080:8080
As you can see in the docker docs docker-compose reference envs
the defined environment values are always available in the container, not only at build stage.
You can check this by change the CMD to execute the command "env" to display all environments in your container.
If your application is not getting the actual values of the env variables it should be anything else related with your app
I'm trying to containerize two services an socket service and a django application
My file structure is
\main file {docker-compose file}
\ django application {Dockerfile}
\ socket app {Dockerfile}
When I run docker build . it build the image
then when I run docker-compose build,
I notice that the socket app and django app are copied to the container instead of only the django application as specified by the Dockerfile.
I get the idea that the Dockerfile is executed in the main directory instead of the django directory?
Here is Dockerfile that is inside the django app application
# Pull base image
FROM python:3
# Set environment varibles
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
# Set work directory
WORKDIR /code
# Install dependencies
COPY requirements.txt /code/
RUN pip install -r requirements.txt
# Copy project
COPY . /code/
RUN ls
And here is the docker-compose file.
With the usage of the ls command I tried to figure out what happend and the output is that the applications in the main folder are copied instead of the django application.
version: '3'
services:
db:
image: postgres:10.1-alpine
volumes:
- postgres_data:/var/lib/postgresql/data/
web:
build: ./django_app
command: ls /code/
volumes:
- .:/code
ports:
- 8000:8000
depends_on:
- db
volumes:
postgres_data:
is this intended use or am I doing something wrong?
The volumes: directive in your docker-compose.yml file is hiding literally everything your Dockerfile does. You'll solve your immediate problem by changing the two directories to match: in the volumes: directive, bind-mount ./django_app:/code.
In a more production-oriented workflow, I'd recommend making your Docker image totally self-contained: make sure it has a CMD that runs your application, and do not use volumes: to inject your code. Delete command: and volumes: from the docker-compose.yml and let the image provide its own code and default command. (To do development, use a Python virtual environment for local code isolation, and make sure all of your tests and a basic hand-run workflow pass before using Docker for anything.)
I know there are multiple examples (actually only a few) out there, and I've looked into some and tried to apply them to my case but then when I try to lift the container (docker-compose up) I end up with more or less the same error every time.
My folder structure is:
sails-project
--app
----api
----config
----node_modules
----.sailsrc
----app.js
----package.json
--docker-compose.yml
--Dockerfile
The docker-compose.yml file:
sails:
build: .
ports:
- "8001:80"
links:
- postgres
volumes:
- ./app:/app
environment:
- NODE_ENV=development
command: node app
postgres:
image: postgres:latest
ports:
- "8002:5432"
And the Dockerfile:
FROM node:0.12.3
RUN mkdir /app
WORKDIR /app
# the dependencies are already installed in the local copy of the project, so
# they will be copied to the container
ADD app /app
CMD ["/app/app.js", "--no-daemon"]
RUN cd /app; npm i
I tried also having RUN npm i -g sails instead (in the Dockerfile) and command:sails lift, but I'm getting:
Naturally, I tried different configurations of the Dockerfile and then with different commands (node app, sails lift, npm start, etc...), but constantly ending up with the same error. Any ideas?
By using command: node app you are overriding the command CMD ["/app/app.js", "--no-daemon"] which as a consequence will have no effect. WORKDIR /app will create an app folder so you don't have to RUN mkdir /app. And most important you have to RUN cd /app; npm i before CMD ["/app/app.js", "--no-daemon"]. NPM dependencies have to be installed before you start your app.