This post will show how to create a simple Vue.js single page application and host it in a docker container.
Create the application
Install the Vue command line interface (cli) from here. I’ll be using yarn for this example..
yarn global add @vue/cli
Create a new hello-world application and change into the application’s folder.
# this places the new application in a ./hello-world folder vue create hello-world cd hello-world yarn install
Build a Docker image
Now that we have a working Vue.js application, we can put it in a container and serve it up using nginx.
We’ll use a multi-stage docker build to first build the application and the serve it.
Create a file called “Dockerfile” in the root directory of your project. It should look like this:
FROM node WORKDIR /app COPY package.json ./ COPY yarn.lock ./ RUN yarn install COPY . . RUN yarn build FROM nginx COPY --from=0 /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
After creating the Dockerfile, build the image.
docker build -t hello-world .
Now you can run a container with you application. Notice the exposed port 8080 that allows your application to be reached on that port.
docker run -d -p 8080:80 --name hello-world hello-world
You should be able to access your application at http://localhost:8080