hello-dock
application resides inside the sub-directory with the same name.package.json
file into the image.vite
development server by executing npm run dev
command.Dockerfile.dev
, the file should look like as follows:FROM
instruction here sets the official Node.js image as the base giving you all the goodness of Node.js necessary to run any JavaScript application. The lts-alpine
tag indicates that you want to use the Alpine variant, long term support version of the image. Available tags and necessary documentation for the image can be found on node hub page.USER
instruction sets the default user for the image to node
. By default Docker runs containers as the root user and according to Docker and Node.js Best Practices this can pose a security threat. So a better idea is to run as a non-root user whenever possible. The node image comes with a non-root user named node
which you can set as the default user using the USER
instruction.RUN mkdir -p /home/node/app
instruction creates a directory called app
inside the home directory of the node
user. The home directory for any non-root user in Linux is usually /home/<user name>
by default.WORKDIR
instruction sets the default working directory to the newly created /home/node/app
directory. By default the working directory of any image is the root. You don't want any unnecessary files sprayed all over your root directory, do you? Hence you change the default working directory to something more sensible like /home/node/app
or whatever you like. This working directory will be applicable to any subsequent COPY
, ADD
, RUN
and CMD
instructions.COPY
instruction here copies the package.json
file which contains information regarding all the necessary dependencies for this application. The RUN
instruction executes npm install
command which is the default command for installing dependencies using a package.json
file in Node.js projects. The .
at the end represents the working directory.COPY
instruction copies rest of the content from the current directory (.
) of the host filesystem to the working directory (.
) inside the image.CMD
instruction here sets the default command for this image which is npm run dev
written in exec
form.vite
development server by default runs on port 3000
hence adding an EXPOSE
command seemed like a good idea, so there you go.Dockerfile.dev
you can execute the following command:Dockerfile
you have to explicitly pass the filename using the --file
option. A container can be run using this image by executing the following command:http://127.0.0.1:3000
to see the hello-dock
application in action.vite
development server. Changes made to the file system inside the container will reflect on your local file system as well.--volume
or -v
option for the container run
or container start
commands. Just to remind you, the generic syntax is as follows:hello-dock-dev
container, and start a new container by executing the following command:--detach
option and that's to demonstrate a very important point. As you can see that the application is not running at all now.node_modules
directory on the project root.node_modules
directory containing all the dependencies. Hence the vite
package goes missing.hello-dock
container with both volumes should be as follows:node_modules
directory from inside the container and tuck it away in some other directory managed by the Docker daemon on your host file system and will mount that directory as node_modules
inside the container.npm run serve
command starts a development server that serves the application to the user. That server not only serves the files but also provides the hot reload feature.npm run build
command compiles all your JavaScript code into some static HTML, CSS and JavaScript files. To run these files you don't need node or any other runtime dependencies. All you need is a server like nginx
for example.node
as the base image and build the application.nginx
inside the node image and use that to serve the static files.node
image is big and most of the stuff it carries is unnecessary to serve your static files. A better approach to this scenario is as follows:node
image as the base and build the application.node
image to a nginx
image.nginx
and discard all node
related stuff.Dockerfile
inside your hello-dock
project directory and put following content in there:Dockerfile
looks a lot like your previous ones with a few oddities. Explanation for this file is as follows:node:lts-alpine
as the base image. The as builder
syntax assigns a name to this stage so that it can be referred to later on.RUN npm run build
command actually compiles the entire application and tucks it inside /app/dist
directory where /app
is the working directory and /dist
is the default output directory for vite
applications.nginx:stable-alpine
as the base image.EXPOSE 80
is added.COPY
instruction. The --from=builder
part indicates that you want to copy some files from the builder
stage. After that it's a standard copy instruction where /app/dist
is the source and /usr/share/nginx/html
is the destination. The destination used here is the default site path for NGINX so any static file you put inside there will be automatically served.nginx
base image containing only the files necessary for running the application. To build this image execute following command:http://127.0.0.1:8080
address:hello-dock
application in all it's glory. Multi-staged builds can be very useful if you're building large applications with a lot of dependencies. If configured properly, images built in multiple stages can be very optimized and compact.git
for some time now, you may know about the .gitignore
files in projects, containing a list of files and directories to be excluded from the repository. Well Docker has a similar concept. The .dockerignore
file contains a list of files and directories to be excluded from image builds. You can find a pre-created .dockerignore
file in the hello-dock
directory..dockerignore
file has to be in the build context. Files and directories mentioned here will be ignored by the COPY
instruction but if you do a bind mount, the .dockerignore
file will have no effect. I've added .dockerignore
files where necessary in the project repository.