Free AI web copilot to create summaries, insights and extended knowledge, download it at here

2983

Abstract

n></figure><p id="7188">Here is a Github Link for this example project that you can on your local machine.</p><div id="acfd"><pre>// <span class="hljs-keyword">clone</span> <span class="hljs-title">the</span> project git <span class="hljs-keyword">clone</span> <span class="hljs-title">https</span>://github.com/bbachi/vuejs-nodejs-example.git</pre></div><div id="fbb0"><pre><span class="hljs-comment">// strat the api</span> <span class="hljs-keyword">cd</span> api npm install npm <span class="hljs-keyword">run</span> dev</pre></div><div id="a56e"><pre><span class="hljs-comment">// start the vue app</span> <span class="hljs-keyword">cd</span> my-<span class="hljs-keyword">app</span> npm install npm <span class="hljs-keyword">run</span> serve</pre></div><p id="d23f">If you want to create a Docker image and run it on the local Docker, here are the steps.</p><div id="6974"><pre>// create an image docker build -t vue-<span class="hljs-keyword">node</span><span class="hljs-title">-image</span> .</pre></div><div id="0b32"><pre>// running on Image docker run -it -p <span class="hljs-number">3080</span>:<span class="hljs-number">3080</span> --name vue-<span class="hljs-keyword">node</span><span class="hljs-title">-ui</span> vue-<span class="hljs-keyword">node</span><span class="hljs-title">-image</span></pre></div><h1 id="f86a">Dockerizing the App</h1><p id="83e1">We use the multi-stage builds for efficient docker images. Building efficient Docker images are very important for faster downloads and lesser surface attacks. In this multi-stage build, building a Vue project and put those static assets in the dist folder is the first step. The second step involves taking those static build files and serve those with node server.</p><p id="cc11">Let’s build an image with the Dockerfile. Here are the things we need for building an image.</p><h2 id="d7bd">Stage 1</h2><ul><li>Start from the base image <code>node:10</code></li><li>There are two package.json files: one is for nodejs server and another is for VueUI. We need to copy these into the Docker file system and install all the dependencies.</li><li>We need this step first to build images faster in case there is a change in the source later. We don’t want to repeat installing dependencies every time we change any source files.</li><li>Copy all the source files.</li><li>Vue uses CLI Service to build the app. So, install CLI and install all the dependencies.</li><li>Run <code>npm run build</code> to build the Vue App and all the assets will be created under <code>dist</code> a folder within a my-app folder.</li></ul><h2 id="7a9a">Stage 2</h2><ul><li>Start from the base image <code>node:10</code></li><li>Take the build from stage 1 and copy all the files into .<b>/my-app/dist </b>folder.</li><li>Copy the nodejs package.json</li><li>Install all the dependencies</li><li>Finally, copy the server.js</li><li>Have this command <code>node server.js</code> with the CMD. This automatically runs when we run

Options

the image.</li></ul> <figure id="3c2f"> <div> <div>

            <iframe class="gist-iframe" src="/gist/bbachi/bea03cea20ba4e795757357bb8693342.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="f15a">Let’s build the image with the following command.</p><div id="4342"><pre>// build the image

docker build -t vue-<span class="hljs-keyword">node</span><span class="hljs-title">-image</span> .</pre></div><div id="a1aa"><pre>//<span class="hljs-built_in"> check </span>the images docker images</pre></div><h1 id="6a38">Running The App on Docker</h1><p id="be00">Once the Docker image is built. You can run the image with the following command.</p><div id="6ffb"><pre>// run the image docker run -d -it -p <span class="hljs-number">3080</span>:<span class="hljs-number">3080</span> --name vue-<span class="hljs-keyword">node</span><span class="hljs-title">-ui</span> vue-<span class="hljs-keyword">node</span><span class="hljs-title">-image</span></pre></div><div id="f6e7"><pre>//<span class="hljs-built_in"> check </span>the container docker ps</pre></div><figure id="932a"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*kFxkDuxy-jVpXd2CramMGQ.png"><figcaption><b>Running Docker container on port 3080</b></figcaption></figure><p id="f7b9">You can access the application on the web at this address <a href="http://localhost:3080./">http://localhost:3080.</a></p><figure id="9ea7"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*hyUVeJjC4yu7ki6uT5XVNw.png"><figcaption><b>Project Running on Docker</b></figcaption></figure><h2 id="3f91">Exec into a running container</h2><p id="e4fb">You can exec into the running container with this command and explore the file system.</p><figure id="48c0"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*H9k-eUYSEyRsEmwshEOdYg.png"><figcaption><b>exec into the running container</b></figcaption></figure><h1 id="6387">Summary</h1><ul><li>Nowadays, it’s very common to dockerize and deploy the Docker image in the production with the help of container orchestration engines such as Docker Swarn or Kubernetes.</li><li>We use the multi-stage builds for efficient docker images.</li><li>Building efficient Docker images are very important for faster downloads and lesser surface attacks.</li><li>You can build the image with this command <code>docker build -t vue-node-image</code>.</li><li>You can run the Docker image with this command <code>docker run -d -it -p 3080:3080 --name vue-node-ui vue-node-image.</code></li><li>You can exec into the running container with this command <code>docker exec -it vue-node-ui /bin/sh</code></li></ul><h1 id="56fd">Conclusion</h1><p id="3ad5">Always use multi-stage builds with this type of architecture. It makes Docker images smaller and less prone to attacks.</p></article></body>

Dockerizing Vue.js App With NodeJS Backend

Learn How to Dockerize and make it a deployable image

Docker is an enterprise-ready container platform that enables organizations to seamlessly build, share, and run any application, anywhere. Almost every company is containerizing its applications for faster production workloads so that they can deploy anytime and sometimes several times a day. There are so many ways we can build a Vue.js App. One way is to dockerize the Vue.js app with nodejs backend and create a docker image so that we can deploy that image any time or sometimes several times a day.

In this post, we look at the example project and see the step by step guide on how we can dockerizing the Vue.js app with nodejs as a server.

Introduction
Example Project
Dockerizing the App
Running The App on Docker
Summary
Conclusion

Introduction

Nowadays, it’s very common to dockerize and deploy the Docker image in the production with the help of container orchestration engines such as Docker Swarn or Kubernetes. We are going to Dockerize the app and create an image and run it on Docker on our local machine. We could also push that Image into Docker hub and pull it whenever and wherever we need it.

Here is the complete guide on how to develop a Vue.js app with nodejs as a backend server. If you are not familiar with the process or you want to know before studying this guide, I would recommend you going through it.

How To Develop and Build Vue.js App With NodeJS

Prerequisite

As a prerequisite, you have to install Docker for Desktop (whatever your OS is). Please follow this link to install Docker on your laptop. Once installed you can check the Docker info or version with the following commands.

docker info
docker --version

Example Project

This is a simple project which demonstrates developing and running Vue application with NodeJS. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

Here is a Github Link for this example project that you can on your local machine.

// clone the project
git clone https://github.com/bbachi/vuejs-nodejs-example.git

// strat the api
cd api
npm install
npm run dev

// start the vue app
cd my-app
npm install
npm run serve

If you want to create a Docker image and run it on the local Docker, here are the steps.

// create an image
docker build -t vue-node-image .

// running on Image
docker run -it -p  3080:3080 --name vue-node-ui vue-node-image

Dockerizing the App

We use the multi-stage builds for efficient docker images. Building efficient Docker images are very important for faster downloads and lesser surface attacks. In this multi-stage build, building a Vue project and put those static assets in the dist folder is the first step. The second step involves taking those static build files and serve those with node server.

Let’s build an image with the Dockerfile. Here are the things we need for building an image.

Stage 1

Start from the base image node:10
There are two package.json files: one is for nodejs server and another is for VueUI. We need to copy these into the Docker file system and install all the dependencies.
We need this step first to build images faster in case there is a change in the source later. We don’t want to repeat installing dependencies every time we change any source files.
Copy all the source files.
Vue uses CLI Service to build the app. So, install CLI and install all the dependencies.
Run npm run build to build the Vue App and all the assets will be created under dist a folder within a my-app folder.

Stage 2

Start from the base image node:10
Take the build from stage 1 and copy all the files into ./my-app/dist folder.
Copy the nodejs package.json
Install all the dependencies
Finally, copy the server.js
Have this command node server.js with the CMD. This automatically runs when we run the image.

Let’s build the image with the following command.

// build the image
docker build -t vue-node-image .

// check the images
docker images

Running The App on Docker

Once the Docker image is built. You can run the image with the following command.

// run the image
docker run -d -it -p  3080:3080 --name vue-node-ui vue-node-image

// check the container
docker ps

**Running Docker container on port 3080**

You can access the application on the web at this address http://localhost:3080.

Exec into a running container

You can exec into the running container with this command and explore the file system.

Summary

Nowadays, it’s very common to dockerize and deploy the Docker image in the production with the help of container orchestration engines such as Docker Swarn or Kubernetes.
We use the multi-stage builds for efficient docker images.
Building efficient Docker images are very important for faster downloads and lesser surface attacks.
You can build the image with this command docker build -t vue-node-image.
You can run the Docker image with this command docker run -d -it -p 3080:3080 --name vue-node-ui vue-node-image.
You can exec into the running container with this command docker exec -it vue-node-ui /bin/sh

Conclusion

Always use multi-stage builds with this type of architecture. It makes Docker images smaller and less prone to attacks.