I created a simple VueJS app with a very basic configuration. I used the webpack configuration to do this.
vue init webpack app
I build this simple Dockerfile
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 both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
# install project dependencies
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
# build app for production with minification
RUN npm run build
EXPOSE 3838
CMD [ "http-server", "dist" ]
This app should run of a plattform which only listens to port 3838. Changing the Dockerfile to EXPOSE 3838 did not work unfortunately.
sudo docker run -it -p 3838:3838 vuetest
Starting up http-server, serving dist
Available on:
http://127.0.0.1:8080
The container runs, but stil on 8080.
I´m quite unfamiliar with both VueJS and deploying, so can anyone help me? I guess the configuration to listen to 8080 might be set in a different file and the Dockerfile ignores it.
Your application server runs by default on 8080
https://www.npmjs.com/package/http-server
Use flag -p 3838 to serve on that port.
Docker is doing its job correctly, adjust in your CMD
CMD [ "http-server", "-p 3838", "dist" ]
You can try just use the port 8080 of the continer and map it to port 3838 of your host.
#Dockerfile: delete the line -> Expose 3838
#Command line : $ sudo docker run -it -p 3838:8080 vuetest
This is an option not to add more lines to the Dockerfile.
Bye
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)
TL:DR - I am trying to deploy my MERN stack application to GCP's Cloud Run. Struggling with what I believe is a port issue.
My React application is in a client folder inside of my Node.js application.
Here is my one Dockerfile to run both the front-end and back-end:
FROM node:13.12.0-alpine
WORKDIR /app
COPY . ./
# Installing components for be connector
RUN npm install --silent
WORKDIR /app/client
RUN npm install --silent
WORKDIR /app
RUN chmod +x /app/entrypoint.sh
ENTRYPOINT [ "/app/entrypoint.sh" ]
... and here is my entrypoint.sh file:
#!/bin/sh
node /app/index.js &
cd /app/client
npm start
docker-compose up works locally, and docker run -p 8080:8080 -p 3000:3000 <image_id> runs the image I built. Port 8080 is for Node and port 3000 for the React app. However, on Cloud Run, the app does not work. When I visit the app deployed to Cloud Run, the frontend initially loads for a split second, but then the app crashes as it attempts to make requests to the API.
In the Advanced Settings, there is a container port which defaults to 8080. I've tried changing this to 3000, but neither works. I cannot enter 8080,3000, as the field takes valid integers only for the port. Is it possible to deploy React + Node at the same time to Cloud Run like this? How can I have Cloud Run listen on both 8080 and 3000, as opposed to just 1 of the 2?
Thanks!
It's not currently possible.
Instead, you can run multiple processes inside Cloud Run, but instead use nginx to proxy requests between them depending on the URL, similar to what's recommended in this answer.
I'm new at docker and I want to make an image of my node.js api and webapp.
I'm on Windows.
I tried following in my Dockerfile and then execute these commands but nothing happens.
Container runs well but I can't reached my webapp on localhost:8080
docker run -d -p 8080:8080 web3-webapp-image
FROM node:10
# Create app directory
WORKDIR /app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm#5+)
COPY package*.json ./
RUN npm install
# If you are building your code for production
# RUN npm ci --only=production
# Bundle app source
COPY . .
EXPOSE 8080
CMD [ "npm", "start" ]
Your node application must also be listening to the same port that is being exposed.
If your app is listening to port 3000 and you're publishing port 8080, then your app isn't going to be able to open up communication back to your localhost.
You can fix this by either publishing the same port the node app is listening on, or change the port your node app is listening to.
Thank's problem is solved. App was listening on port 3000 et I was not publishing on the same port.
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