Dockerize Vue.js App

    Let’s start by creating a in the root folder of our project:

    It may seem reduntant to first copy package.json and package-lock.json and then all project files and folders in two separate steps but there is actually (spoiler: it allows us to take advantage of cached Docker layers).

    Now let’s build the Docker image of our Vue.js app:

    1. docker build -t vuejs-cookbook/dockerize-vuejs-app .

    Finally, let’s run our Vue.js app in a Docker container:

    We should be able to access our Vue.js app on localhost:8080.

    In the previous example, we used a simple, zero-configuration command-line http server to serve our Vue.js app which is perfectly ok for quick prototyping and may even be ok for simple production scenarios. After all, the documentation says:

    Nevertheless, for realistically complex production use cases, it may be wiser to stand on the shoulders of some giant like or Apache and that is exactly what we are going to do next: we are about to leverage NGINX to serve our Vue.js app because it is considered to be one of the most performant and battle-tested solutions out there.

    Let’s refactor our Dockerfile to use NGINX:

    1. # build stage
    2. WORKDIR /app
    3. COPY package*.json ./
    4. RUN npm install
    5. COPY . .
    6. RUN npm run build
    9. FROM nginx:stable-alpine as production-stage
    10. COPY --from=build-stage /app/dist /usr/share/nginx/html
    11. CMD ["nginx", "-g", "daemon off;"]

    Ok, let’s see what’s going on here:

    • we have split our original Dockerfile in multiple stages by leveraging the Docker feature;
    • the first stage is responsible for building a production-ready artifact of our Vue.js app;
    • the second stage is responsible for serving such artifact using NGINX.Now let’s build the Docker image of our Vue.js app:

    Finally, let’s run our Vue.js app in a Docker container:

    1. docker run -it -p 8080:80 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app

    We should be able to access our Vue.js app on .

    If you are reading this cookbook, chances are you already know why you decided to dockerize your Vue.js app. But if you simply landed on this page after hitting the Google’s I'm feeling lucky button, let me share with you a couple of good reasons for doing that.

    • Microservices
    • DevOps
    • Continuous DeliveryLet’s see how these concepts actually affect our decision of dockerizing our Vue.js app.

    By adopting the microservices architectural style, we end up building a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms. These services are built around business capabilities and independently deployable by fully automated deployment machinery.

    So, committing to this architectural approach most of the time implies developing and delivering our front-end as an independent service.

    The adoption of culture, tools and agile engineering practices has, among other things, the nice effect of increasing the collaboration between the roles of development and operations. One of the main problem of the past (but also today in some realities) is that the dev team tended to be uninterested in the operation and maintenance of a system once it was handed over to the ops team, while the latter tended to be not really aware of the system’s business goals and, therefore, reluctant in satisfying the operational needs of the system (also referred to as “whims of developers”).

    So, delivering our Vue.js app as a Docker image helps reducing, if not removing entirely, the difference between running the service on a developer’s laptop, the production environment or any environment we may think of.

    By leveraging the Continuous Delivery discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called . The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matters).

    So, creating a Docker image for our Vue.js app is a good choice here because that would represent our final build artifact, the same artifact that would be verified against our continuous delivery pipeline and that could potentially be released to production with confidence.

    Common alternatives are:

    • leveraging an all-in-one platform like Netlify;