I am writing here a new question, because i can't find solution of my problem.
I am trying to build this for two days.
TLDR:
I am building a vue project with vite. Everything is fine, when i use npm run dev
Also, everything looks fine when i build docker-compose inside frontend directory.
I need to place docker-compose outside of this dir, cuz i would like to create more dockers like backend, nginx, postress.
Dockerfile:
# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
RUN npm install -g npm
COPY package*.json ./
RUN npm install
docker-compose.yml:
version: "3.9"
services:
frontend:
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: volume
source: node_modules
target: /app/node_modules
ports:
- 8080:8080
volumes:
node_modules:
project build:
this is project location
okey, so, when i use docker-compose -f docker-compose.yml up --build
i got this output:
Recreating project_frontend_1 ... done
Attaching to project_frontend_1
frontend_1 |
frontend_1 | > frontend#0.0.0 dev
frontend_1 | > vite --host 0.0.0.0
frontend_1 |
frontend_1 | sh: vite: not found
project_frontend_1 exited with code 127
If you need more information, i will add. I know that most ppl use dockers, but i can't find solution that can help me with it. Someone said that vite is not installed globaly, i can't finde npm install comand to install as dependency in package.json.
Related
I have created a NX monorepo with angular and nestJS apps and tried very hard to make the reload work inside containers but to no avail. Even though the directories are mounted correctly and I verified that changes in the host are being written inside the container but somehow the process is not picking them up.
I have created a standalone nestJS application and successfully made it work with the container.
Github repo: https://github.com/navdbaloch/dockerized-development-with-nx-monorepo-angular-nestjs
ENV: windows 10 with WSL2, Docker Desktop 4.2.0
Follow is the docker-compose.xml file
version: '3.7'
services:
frontend:
container_name: test-frontend
hostname: poirot_frontend
image: poirot_frontend
build:
context: .
dockerfile: ./apps/fwa/Dockerfile.angular
target: development
ports:
- 4200:4200
networks:
- poirot-network
depends_on:
- api
volumes:
- .:/usr/src
- /usr/src/node_modules
command: npm run start:app
api:
container_name: test-api
hostname: poirot_api
image: poirot_api
build:
context: .
dockerfile: ./apps/fwa-api/Dockerfile.api
target: development
volumes:
- .:/usr/src
- /usr/src/node_modules
ports:
- 3333:3333
- 9229:9229
command: npm run start:api
env_file:
- .env
networks:
- poirot-network
networks:
poirot-network:
driver: bridge
Dockerfile.angular
FROM node:14-alpine As development
WORKDIR /usr/src
COPY package*.json ./
RUN npm install minimist && \
npm install --only=development
COPY . .
RUN npm run build:app
#! this is the production image
FROM nginx:latest as production
COPY ./docker/angular.conf /etc/nginx/nginx.conf
COPY --from=development /usr/src/dist/apps/fwa /usr/share/nginx/html
Dockerfile.api
FROM node:14-alpine As development
WORKDIR /usr/src
COPY package*.json ./
RUN npm install minimist &&\
npm install --only=development
COPY . .
RUN npm run build:api
#! this is the production image
FROM node:14-alpine as production
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
WORKDIR /app
COPY package*.json ./
RUN npm install minimist typescript ts-node lodash reflect-metadata tslib rxjs #nestjs/platform-express #types/bcrypt && \
npm install --only=production
COPY . .
COPY --from=development /usr/src/dist/apps/fwa-api ./dist
EXPOSE 3333
#! Migration runenr command: node_modules/ts-node/dist/bin.js migration-runner.ts
CMD ["node", "dist/main"]
Finally, I was able to make it work after a lot of trial and error.
For angular application, changed server command from npx nx serve to npx nx serve --host 0.0.0.0 --poll 2000.
For the Api, add "poll": 2000 option in angular.json at projects.api.architect.build.options
I have also updated Github repo for reference to anyone looking for the same solution.
I am new in docker. I've built an application with VueJs2 that interacts with an external API. I would like to run the application on docker.
Here is my docker-compose.yml file
version: '3'
services:
ew_cp:
image: vuejs_img
container_name: ew_cp
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
ports:
- '8080:8080'
Here is my Dockerfile:
FROM node:14.17.0-alpine as develop-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
RUN yarn install
COPY . .
EXPOSE 8080
CMD ["node"]
Here is the building command I run to build my image an container.
docker-compose up -d
The image and container is building without error but when I run the container it stops immediately. So the container is not running.
Are the DockerFile and compose files set correctly?
First of all you run npm install and yarn install, which is doing the same thing, just using different package managers. Secondly you are using CMD ["node"] which does not start your vue application, so there is no job running and docker is shutting down.
For vue applicaton you normally want to build the app with static assets and then run a simple http server to serve the static content.
FROM node:lts-alpine
# install simple http server for serving static content
RUN npm install -g http-server
# make the 'app' folder the current working directory
WORKDIR /app
# copy 'package.json' to install dependencies
COPY package*.json ./
# install dependencies
RUN npm install
# copy files and folders to the current working directory (i.e. 'app' folder)
COPY . .
# build app for production with minification
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]
Your docker-compose file could be as simple as
version: "3.7"
services:
vue-app:
build:
context: .
dockerfile: Dockerfile
container_name: vue-app
restart: always
ports:
- "8080:8080"
networks:
- vue-network
networks:
vue-network:
driver: bridge
to run the service from docker-compose use command property in you docker-compose.yml.
services:
vue-app:
command: >
sh -c "yarn serve"
I'm not sure about the problem but by using command: tail -f /dev/null in your docker-compose file , it will keep up your container so you could track the error within it and find its problem. You could do that by running docker exec -it <CONTAINER-NAME> bash and track the error logs in your container.
version: '3'
services:
ew_cp:
image: vuejs_img
container_name: ew_cp
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
command: tail -f /dev/null
ports:
- '8080:8080'
In your Dockerfile you have to start your application e.g. npm run start or any other scripts that you are using for running your application in your package.json.
I need to up a vue js app with docker-compose, but when docker trying 'npm install', the logs shows that npm cannot find a file package.json. Notice that i created a vue js project with vue js cli before i trying to up app with docker-compose* I verified if the directory is wrong, but i cannot see anything wrong . I'm running docker commands on vue project root. The docker-compose file is inside another project
My Dockefile:
FROM node:lts-alpine
RUN mkdir /globostore-frontend
WORKDIR /globostore-frontend
ENV PATH /globostore-frontend/node_modules/.bin:$PATH
COPY package.json /globostore-frontend
RUN npm install
RUN npm install -g #vue/cli
CMD ["npm", "run", "serve"]
My docker-compose.yml:
version: "3.8"
services:
db:
image: mysql:5.7
ports:
- '3306:3306'
environment:
MYSQL_DATABASE: 'Globostore'
MYSQL_USER: 'wendel'
MYSQL_PASSWORD: 'wendel12'
MYSQL_ROOT_PASSWORD: 'wendel12'
volumes:
- ./db:/docker-entrypoint-initdb.d/:ro
web:
build: .
command: flask run
volumes:
- .:/app
ports:
- '5000:5000'
depends_on:
- db
links:
- db
environment:
FLASK_ENV: development
bff:
build: ./../globostore-bff/
ports:
- 5001:5001
volumes:
- .:/app
environment:
FLASK_ENV: development
command: flask run
frontend:
build: ./../globostore-frontend/
volumes:
- .:/globostore-frontend
ports:
- 8080:8080
Error:
frontend_1 | npm ERR! code ENOENT
frontend_1 | npm ERR! syscall open
frontend_1 | npm ERR! path /globostore-frontend/package.json
frontend_1 | npm ERR! errno -2
frontend_1 | npm ERR! enoent ENOENT: no such file or directory, open '/globostore-frontend/package.json'
frontend_1 | npm ERR! enoent This is related to npm not being able to find a file.
frontend_1 | npm ERR! enoent
frontend_1 |
frontend_1 | npm ERR! A complete log of this run can be found in:
frontend_1 | npm ERR! /root/.npm/_logs/2021-02-02T17_00_23_137Z-debug.log
This is my project directory structure
I start the application through the docker-compose file at globostore-api directory
Issue
It looks like your error does not come from docker build. It looks like it comes from from this command: npm run serve executed during container start.
During docker build your npm install will work, because the package.json exists - You copy it.
But when you run docker-compose up this file does not exists because you override entire directory with volumes for frontend.
You have docker-compose.yaml next to those files:
.gitignore
app.py
Dockerfile
Readme.md
requirements.txt
There is no package.json file, in that directory, you mount inside the docker-compose.yaml
In docker-compose you have this section:
frontend:
build: ./../globostore-frontend/
volumes:
- .:/globostore-frontend
ports:
- 8080:8080
So you are overwriting volume here: - .:/globostore-frontend, you copied in docker build.
Solution
Remove this line
Replace .:/globostore-frontend to ./globostore-frontend:/globostore-frontend
Do debugging yourself
You can do debugging yourself. Please find tutorial and follow my instructions:
1. Add command to docker-compose.yaml for the frontend service
You need to add this line: command: ["sleep", "10000"]
So your definition will look like:
frontend:
build: ./../globostore-frontend/
volumes:
- .:/globostore-frontend
ports:
- 8080:8080
command: ["sleep", "1000"]
Then try to run docker-compose up and see if your container is working.
2. Find docker container ID
Run docker ps and find container id - this is container hash.
3. Shell into container
Run docker exec -ti CONTAINER_ID sh. Now you are in the container and you can see if the package.json exists in the /globostore-frontend directory.
But the package.json will be missing because you override the /globostore-frontend dir with volume for a frontend in this lines:
volumes:
- .:/globostore-frontend
FROM node:latest
WORKDIR /frontend/
ENV PATH /frontend/node_modules/.bin:$PATH
COPY package.json /frontend/package.json
COPY . /frontend/
RUN npm install --silent
RUN npm install react-scripts#3.0.1 -g --silent
CMD ["npm", "run", "start"]
This is my Dockerfile for the frontend of my project.
I put this as one of the services in my docker-compose.yml file, and when I run docker-compose up -d --build, it gives me
Step 6/8 : RUN npm install --silent
---> Running in 09a4f59a96fa
ERROR: Service 'frontend' failed to build: The command '/bin/sh -c npm install --silent' returned a non-zero code: 1
My docker-compose file looks like below for your reference:
# Docker Compose
version: '3.7'
services:
frontend:
container_name: frontend
build:
context: frontend
dockerfile: Dockerfile
ports:
- "3000:3000"
volumes:
- '.:/frontend'
- '/frontend/node_modules'
backend:
build: ./backend
ports:
- "5000:5000"
volumes:
- .:/code
Thanks in advance
EDIT: Error in the frontend after build
For docker-compose, I think it should be like
- ./frontend/:/frontend'
as the build context is frontend.
Second, thing if you are using volume then why you are installing and copying code in Dockerfile? If you are using bind volume then remove these from your Dockerfile as these will be overridden from the host code.
COPY package.json /frontend/package.json
COPY . /frontend/
I am using a .npmrc file to configure a private repo (font-awesome-pro).
It works well without docker.
But with docker, the npm install fails:
npm ERR! code E401
npm ERR! 404 401 Unauthorized: #fortawesome/fontawesome-pro-light#https://npm.fontawesome.com/7D46BEC2-1565-40B5-B5FC-D40C724E60C6/#fortawesome/fontawesome-pro-light/-/fontawesome-pro-light-5.0.12.tgz
I have read the doc from NPM : Docker and private packages, but I don't know how to apply it with docker-compose.yml and I not sure passing variables is the solution (?).
Is it possible that the .npmrc file is not read during installation inside the docker instance ? Am I missing something ?
Here is my docker-compose.yaml :
version: '2.1'
services:
app:
image: node:8.9.4
# restart: always
container_name: jc-vc
environment:
- APP_ENV=${JC_ENV:-dev}
- HOST=0.0.0.0
- BASE_URL=${JC_BASE_URL}
- BROWSER_BASE_URL=${JC_BROWSER_BASE_URL}
working_dir: /usr/src/app
volumes:
- ${DOCKER_PATH}/jc/vc/app:/usr/src/app
command: npm install
# command: npm run dev
# command: npm run lintfix
# command: npm run build
# command: npm start
expose:
- 3000
nginx:
image: nginx
logging:
driver: none
# restart: always
volumes:
- ${DOCKER_PATH}/jc/vc/nginx/www:/usr/share/nginx/html
- ${DOCKER_PATH}/jc/vc/nginx/default.${JC_ENV:-dev}.conf:/etc/nginx/nginx.conf
- ${DOCKER_PATH}/jc/vc/nginx/.htpasswd:/etc/nginx/.htpasswd
- ${DOCKER_PATH}/jc/letsencrypt:/etc/letsencrypt
container_name: jc-nginx-vc
depends_on:
- app
ports:
- ${PORT_80:-4020}:${PORT_80:-4020}
- ${PORT_443:-4021}:${PORT_443:-4021}
and my .npmrc (with replaced token) :
#fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX
The correct way to fix this, as documented in the link you reference, is to use arg variables in the dockerfile. I think the bit you're missing is how to do this in compose:
version: "3"
services:
myapp:
build:
context: "."
args:
NPM_TOKEN: "s3kr!t"
You need to reference this argument in your dockerfile and create a .npmrc file in the root of your project:
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
I like to generate this in the dockerfile to minimise the risk of exposure (but, be aware, the token is still stored in the image's layers), so it would look something like this:
FROM node:current-buster-slim
ARG NPM_TOKEN
WORKDIR /app
COPY package.json /app/package.json
RUN echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > /app/.npmrc && \
npm install && \
rm -f /app/.npmrc
COPY . /app/
CMD npm start
You can then run docker-compose build myapp and get a good result. This solution still suffers from having the secret in your compose file and in the docker images, but this is only a sketch for SO. In the real world you'd not want to put your secrets in your source-files so realistically you'd replace the secret with a dynamic secret that has a short Time To Live (TTL) and a single-use policy (and you'd probably want to use Hashicorp Vault to help with that).
In the root directory of your project, create a custom .npmrc file with the following contents:
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
Now add these commands to Dockerfile
COPY .npmrc .npmrc
COPY package.json package.json
RUN npm install
RUN rm -f .npmrc
That should fix the issue, hope that helps
package-lock.json needs to be re-generate with the new .npmrc file. Delete it package-lock.json and recreate it with npm install then redeploy the image.