Based on this guide:
https://shekhargulati.com/2019/01/18/dockerizing-a-vue-js-application/
I have created a sample VueJS app and created a docker image:
docker build -t myapp .
based on the below Dockerfile:
# base image
FROM node:10.15.0
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install -g #vue/cli
# start app
CMD ["npm", "run", "serve"]
Next I run a docker container with:
docker run -it -v ${PWD}:/usr/src/app -v /usr/src/app/node_modules -p 5000:5000 myapp
and get this (successfull) output:
DONE Compiled successfully in 4644ms 4:05:10 PM
No type errors found
No lint errors found
Version: typescript 3.4.3, tslint 5.15.0
Time: 4235ms
App running at:
- Local: http://localhost:8080/
It seems you are running Vue CLI inside a container.
Access the dev server via http://localhost:<your container's external mapped port>/
Note that the development build is not optimized.
To create a production build, run npm run build.
I then try to access the application from my browser on: http://localhost:5000/ but I just get a The connection was reset error.
I have also tried to inspect the port information on the running container with:
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
755d2745bce2 myapp "npm run serve" 22 seconds ago Up 18 seconds 0.0.0.0:5000->5000/tcp confident_mirzakhani
$ docker port confident_mirzakhani
5000/tcp -> 0.0.0.0:5000
But that basically confirms the port info I passed to the run command.
Any suggestion on how to access the VueJS application in the container from the browser on my host?
Related
I'm trying to figure why Nodemon is not restarting from within docker when passing in an environment variable. It worked previously when I was not trying pass in an env variable and instead in my Dockerfile the final command was CMD ["npm", "run", "devNoClient"]
I can see Nodemon launching in the terminal but doesn't restart the server when I update a file.
Makefile
node_dev:
echo 'Starting Node dev server in Docker Container'
docker build -t node_dev .
docker run -it --env-file variables.env -p 8080:8080 node_dev
Dockerfile
WORKDIR /chord-app
# copy package.json into the container
COPY package.json /chord-app/
# install dependencies
RUN npm install
# Copy the current directory contents into the container at /chord-app
COPY . /chord-app/
# Make port 8080 available to the world outside this container
EXPOSE 8080
# Env is required to persist variable into built image.
# Docker run can now accept variable and it will be assigned here.
# default is run in dev mode
ENV run_mode_env=devNoClient
# Run the app when the container launches
# Due to variable, CMD syntax must change for this to work https://stackoverflow.com/a/40454758
CMD npm run $run_mode_env
package.json
"scripts": {
"devNoClient": "nodemon --exec babel-node src/server/start.js",
},
I realized it was not working because I don't have any binding volumes to my local machine when starting my docker image. So the container does not what files on my machine to watch for saves so it can restart the server with nodemon.
I can't access my Vue app on localhost:8080 anymore after Dockerizing the app.
I have a Dockerfile with the following contents:
# Base the image off of the NodeJS image
FROM node
# Set the working directory to be the HOME directory
WORKDIR /root
# Install NPM dependencies early in the build process
COPY ./package.json /root
COPY ./package-lock.json /root
RUN npm install
# Specify what port will be available - necessary for VPC network
EXPOSE 8080
# Copy our application files to the image
COPY ./.browserslistrc /root
COPY ./.eslintrc.js /root
COPY ./.env /root
COPY ./babel.config.js /root
COPY ./README.md /root
COPY ./vue.config.js /root
COPY ./public /root/public
COPY ./src /root/src
# Start the container running our Node app
CMD ["npm", "run", "serve"]
(Before Dockerizing, npm run serve allowed me to access the Vue app through my web browser.)
Then I run the PS command docker build:
PS C:\Users\User\mealSocial-dev> docker build -t finalvue app
Sending build context to Docker daemon 126.8MB
Step 1/15 : FROM node
---> 448d0873ea84
[...]
Step 15/15 : CMD ["npm", "run", "serve", "--port", "\"8080\""]
---> Running in c4840f98e5dc
Removing intermediate container c4840f98e5dc
---> 904928fa859c
Successfully built 904928fa859c
Successfully tagged finalvue:latest
SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.
...Then docker run -p 8080:8080:
PS C:\Users\User\mealSocial-dev> docker run -p 8080:8080 finalvue
> meal-app#0.1.0 serve /root
> vue-cli-service serve
INFO Starting development server...
<s> [webpack.Progress] 0% compiling
[...]
DONE Compiled successfully in 8147ms11:39:59 AM
<s> [webpack.Progress] 100%
App running at:
- Local: http://localhost:8080/
It seems you are running Vue CLI inside a container.
Access the dev server via http://localhost:<your container's external mapped port>/
Note that the development build is not optimized.
To create a production build, run npm run build.
Despite it saying It seems you are running Vue CLI inside a container. Access the dev server via http://localhost:<your container's external mapped port>/, I get This page isn’t working. localhost didn’t send any data. ERR_EMPTY_RESPONSE:
I'm EXPOSE-ing the port in the Dockerfile and adding the -p 8080:8080 tag when I run docker run. What am I missing?
from the comment section:
add --host 0.0.0.0 to npm run serve
or
add host: 0.0.0.0 to a config (./vue.config.js)
I try to create nanoc Markdown Documentation page deployment using docker.
Docker container was created successfully.
While running the container i am getting the nanoc configuration error and container stopped.
I have mentioned the steps followed for implementation.
Followed Steps
Step 1
Docker file
FROM ruby:latest
# Create app directory
WORKDIR /usr/src/app
COPY Gemfile .
# Copy the files
COPY . ./docs
RUN bundler install
RUN apt update
# Start the development/staging server
EXPOSE 3000
CMD ["bundler","exec","nanoc","view" ]
Step 2
docker build -t nanoc:latest .
Step 3
docker run -p 0.0.0.0:3000:3000 --name nanoc-latest -t -d nanoc:latest
Docker Logs container ID
Docker file update:
FROM ruby:2.3
RUN mkdir -p /user/src/app
COPY . /usr/src/app
WORKDIR /usr/src/app/docs
RUN bundle install
RUN bundle exec nanoc
EXPOSE 3000
CMD bundle exec nanoc view
This configuration will sole the above error.
I've created an image using this Docker file...
FROM node:8
# Create application directory
WORKDIR /usr/src/app
# Install application dependencies
# By only copying the package.json file here, we take advantage of cached Docker layers
COPY package.json ./
RUN npm install
# This will install dev dependencies as well.
# If dev dependencies have been set, use --only-production when deploying to production
# Bundle app source code
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]
But when I run it using $ docker run -d --rm -p 3000:3000 62 I can't cUrl the API running inside the container from the Docker host (OS X) using curl http://localhost:3000/About
If I exec into the container I get a valid response from the API via cUrl. Looks like a Linux firewall in the container but I don't see one running.
any ideas?
Your node server is most likely not listening on all interfaces, make sure it binds to 0.0.0.0 instead of 127.0.0.1
What I'm trying to achieve
Follow the Saleor docker install instructions.
https://saleor.readthedocs.io/en/latest/customization/docker.html#
Steps to reproduce the problem
docker-compose build
docker-compose run web python3 manage.py migrate
docker-compose run web python3 manage.py collectstatic
docker-compose run web python3 manage.py populatedb --createsuperuser
docker-compose up
Goto http://127.0.0.1:8000
What I expected to happen
I expect to see the Saleor homepage
What I actually happens
Error reading ./webpack-bundle.json. Are you sure webpack has generated the file and the path is correct?
System information
Operating system: MacOS High Sierra 10.13.3
Browser: Chrome 67.0.3396.99 (Official Build) (64-bit)
Docker Engine: 18.06.0-ce
Docker Compose: 1.22.0
Docker Machine: 0.15.0
Running yarn run build-assets does not resolve the issue, as yarn is not installed on the docker container.
It seems that /app/webpack-bundle.json is not being copied from build-nodejs (node:8.6.0) as instructed in the Dockerfile.
COPY --from=build-nodejs /app/webpack-bundle.json /app/
npm run build-assets --production which runs webpack -p --progress should have created /app/webpack-bundle.json.
A log of the output of docker-compose up
Step 25/35 : COPY --from=build-nodejs /app/webpack-bundle.json /app/ ---> 68c7bcd63e49
and docker history shows the /app/webpack-bundle.json being copied to the container.
68c7bcd63e49 20 minutes ago /bin/sh -c #(nop) COPY file:8bbd3e3203b94232… 1.18kB
https://github.com/mirumee/saleor/issues/2506