使用Node.js后端对vue应用进行docker化

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.

Docker是企业就绪的容器平台，使组织可以在任何地方无缝地构建，共享和运行任何应用程序。 几乎每家公司都在对其应用程序进行容器化，以实现更快的生产工作负载，从而使它们可以随时随地部署，有时一天部署几次。 我们可以使用多种方式来构建Vue.js应用。 一种方法是使用nodejs后端对Vue.js应用程序进行docker化并创建一个docker映像，以便我们可以每天或有时每天多次部署该映像。

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.

在本文中，我们将查看示例项目，并逐步了解如何使用nodejs作为服务器对Vue.js应用进行泊坞操作。

• Introduction

  介绍

• Example Project

  示例项目

• Dockerizing the App

  Docker化应用

• Running The App on Docker

  在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.

如今，借助容器编排引擎(例如Docker Swarn或Kubernetes)在生产中对Docker映像进行Docker化和部署是非常普遍的。 我们将对应用程序进行Docker化并创建映像，然后在本地计算机上的Docker上运行它。 我们还可以将该映像推送到Docker中心，并在需要时随时随地将其拉出。

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.

这是有关如何使用nodejs作为后端服务器开发Vue.js应用程序的完整指南。 如果您不熟悉此过程，或者想在学习本指南之前先了解一下，建议您仔细阅读。

How To Develop and Build Vue.js App With NodeJS

如何使用NodeJS开发和构建Vue.js应用

先决条件 (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 for Desktop(无论您的操作系统是什么)。 请点击此链接在笔记本电脑上安装Docker。 安装后，您可以使用以下命令检查Docker信息或版本。

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.

这是一个简单的项目，演示了如何使用NodeJS开发和运行Vue应用程序。 我们有一个简单的应用程序，可以在其中添加用户，计数并在侧面显示它们，并在需要时检索它们。

Example project 示例项目

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

这是此示例项目的Github链接，您可以在本地计算机上使用。

// 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.

如果要创建Docker映像并在本地Docker上运行，请按照以下步骤操作。

// 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

Docker化应用 (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.

我们使用多阶段构建来获得高效的docker映像。 构建有效的Docker映像对于加快下载速度和减少表面攻击非常重要。 在此多阶段构建中，第一步是构建一个Vue项目并将这些静态资产放在dist文件夹中。 第二步涉及获取这些静态构建文件，并将其与节点服务器一起使用。

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

让我们使用Dockerfile构建映像。 这是我们构建图像所需的东西。

阶段1 (Stage 1)

• Start from the base image node:10

  从基本映像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.
  package.json文件有两个：一个用于nodejs服务器，另一个用于VueUI。 我们需要将它们复制到Docker文件系统中并安装所有依赖项。
• 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.
  Vue使用CLI服务来构建应用程序。 因此，安装CLI并安装所有依赖项。

• 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.

  运行npm run build来构建Vue App，所有资产将在my-app文件夹中的dist文件夹下创建。

第二阶段 (Stage 2)

• Start from the base image node:10

  从基本映像node:10

• Take the build from stage 1 and copy all the files into ./my-app/dist folder.

  从阶段1开始进行构建，然后将所有文件复制到中。 / my-app / dist文件夹。

• Copy the nodejs package.json
  复制nodejs package.json
• Install all the dependencies
  安装所有依赖项
• Finally, copy the server.js
  最后，复制server.js

• Have this command node server.js with the CMD. This automatically runs when we run the image.

  将此命令node server.js与CMD一起使用。 当我们运行图像时，它将自动运行。

FROM node:10 AS ui-build
WORKDIR /usr/src/app
COPY my-app/ ./my-app/
RUN cd my-app && npm install && npm run build


FROM node:10 AS server-build
WORKDIR /root/
COPY --from=ui-build /usr/src/app/my-app/dist ./my-app/dist
COPY api/package*.json ./api/
RUN cd api && npm install
COPY api/server.js ./api/


EXPOSE 3080


CMD ["node", "./api/server.js"]

Let’s build the image with the following command.

让我们使用以下命令构建映像。

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

在Docker上运行应用程序 (Running The App on Docker)

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

构建Docker映像后。 您可以使用以下命令运行该映像。

// 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 在端口3080上运行Docker容器

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

您可以通过以下地址访问Web上的应用程序：http：// localhost：3080。

Project Running on Docker 在Docker上运行的项目

执行到正在运行的容器中 (Exec into a running container)

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

您可以使用此命令执行到正在运行的容器中，并浏览文件系统。

exec into the running container 执行到正在运行的容器中

摘要 (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.
  如今，借助容器编排引擎(例如Docker Swarn或Kubernetes)在生产中对Docker映像进行Docker化和部署是非常普遍的。
• We use the multi-stage builds for efficient docker images.
  我们使用多阶段构建来获得高效的docker映像。
• Building efficient Docker images are very important for faster downloads and lesser surface attacks.
  构建有效的Docker映像对于加快下载速度和减少表面攻击非常重要。

• You can build the image with this command docker build -t vue-node-image.

  您可以使用此命令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.

  您可以使用以下命令运行Docker镜像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

  您可以使用以下命令执行到正在运行的容器中： 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.

始终将多阶段构建与此类型的体系结构一起使用。 它使Docker映像更小并且更不容易受到攻击。

翻译自: https://medium.com/bb-tutorials-and-thoughts/dockerizing-vue-app-with-nodejs-backend-33645f0f50ec