Vue.js应用程序容器化部署

为什么要对 Vue.js 应用程序进行容器化？

       在当今快节奏的开发环境中，容器化已成为一种必不可少的做法。Docker 提供了一个标准化的软件单元，确保的应用程序无论部署在哪里，都能以相同的方式运行。对 Vue.js 应用程序进行 Docker 化有以下几个好处：

一致性： 确保应用程序在所有环境（开发、测试、生产）中运行一致。
隔离性： 使应用程序与主机系统上的其他应用程序隔离，降低冲突风险。
可扩展性： 简化横向扩展应用程序的过程。
可移植性: 可在不同环境和云提供商之间轻松移动应用程序。

创建 Vue.js 示例应用程序

全局安装 Vue CLI
Vue CLI 是一种命令行工具，有助于轻松创建新的 Vue.js 项目。首先，使用 npm 在全局安装 Vue CLI：

npm install -g @vue/cli

创建新的 Vue 项目
创建一个名为 my-vue-app 的新 Vue.js 项目：

vue create my-vue-app

该命令将提示选择所需的功能。可以选择默认预设，也可以根据自己的要求进行定制

启动开发服务器
导航至项目目录并启动开发服务器：

cd my-vue-app
npm run serve

该命令将启动开发服务器，应用程序将可在 http://localhost:8080 上运行

理解 Dockerfile

Dockerfile 是一个包含一系列命令的脚本，用于组装映像。下面是 Vue.js 应用程序的 Dockerfile：

# Use the official node image as the base image
FROM node:16-alpine as build-stage
# Set the working directory
WORKDIR /app
# Copy the package.json and package-lock.json files to the working directory
COPY package*.json ./

# mirror of china taobao
RUN npm config set registry https://registry.npmmirror.com

# Install dependencies
RUN npm install
# Copy the rest of the application code to the working directory
COPY . .
# Build the Vue.js application for production
RUN npm run build
# Use the official nginx image as the base image for serving the application
FROM nginx:stable-alpine as production-stage
# Copy the built files from the build-stage to the nginx html directory
COPY --from=build-stage /app/dist /usr/share/nginx/html
# Copy custom nginx configuration files
COPY nginx.conf /etc/nginx/nginx.conf
COPY default.conf /etc/nginx/conf.d/default.conf
# Copy the entry point script
COPY start.sh /start.sh
# Make the entry point script executable
RUN chmod +x /start.sh
# Expose port 80
EXPOSE 80
# Set the entry point to the shell script
ENTRYPOINT ["/start.sh"]

Dockerfile 各部分说明

构建阶段：

从 node:16-alpine 作为构建阶段： 使用 Node.js 映像构建应用程序。
WORKDIR /app： 设置容器内的工作目录。
COPY package*.json ./： 复制软件包文件。
运行 npm install： 安装依赖项。
COPY ： 复制应用程序代码的其余部分。
运行 npm run build： 为生产构建应用程序

生产阶段：

FROM nginx:stable-alpine  作为生产阶段： 使用 Nginx 映像为已构建的应用程序提供服务。
COPY --from=build-stage /app/dist /usr/share/nginx/html： 将构建阶段的文件复制到 Nginx 的 html 目录。
COPY nginx.conf /etc/nginx/nginx.conf： 复制自定义 Nginx 配置文件。
COPY default.conf /etc/nginx/conf.d/default.conf： 复制自定义 Nginx 服务器配置文件。
COPY start.sh /start.sh： 复制入口脚本。
运行 chmod +x /start.sh： 使入口点脚本可执行。
EXPOSE 80：公开端口 80。
ENTRYPOINT [“/start.sh”]： 设置 shell 脚本的入口点

为了减少docker镜像体积，我们再优化Dockerfile

# 使用更小的基础镜像
FROM node:16-alpine as build-stage

# 设置工作目录
WORKDIR /app

# 仅复制必要的文件以减少层数
COPY package*.json ./

# 设置 npm 镜像为淘宝
RUN npm config set registry https://registry.npmmirror.com && \
     npm install

# 复制其余的应用代码
COPY . .

# 构建 Vue.js 应用程序
RUN npm run build && \
     rm -rf node_modules && \
     rm -rf src

# 使用 nginx 作为生产环境的基础镜像
FROM nginx:stable-alpine as production-stage

# 复制构建后的文件到 nginx 的 html 目录
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 复制自定义的 nginx 配置文件
COPY nginx.conf /etc/nginx/nginx.conf
COPY default.conf /etc/nginx/conf.d/default.conf

# 复制入口点脚本
COPY start.sh /start.sh

# 使入口点脚本可执行
RUN chmod +x /start.sh

# 暴露端口 80
EXPOSE 80

# 设置入口点为 shell 脚本
ENTRYPOINT ["/start.sh"]

理解 Nginx 配置

nginx.conf文件是Nginx的主要配置文件。下面是一个例子：

# /etc/nginx/nginx.conf

user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events
{
     worker_connections 1024;
}
http
{
     include /etc/nginx/mime.types;
     default_type application/octet-stream;
     log_format main '$remote_addr - $remote_user [$time_local] "$request" '
     '$status $body_bytes_sent "$http_referer" '
     '"$http_user_agent" "$http_x_forwarded_for"';
     access_log /var/log/nginx/access.log main;
     sendfile on;
     #tcp_nopush on;
     keepalive_timeout 65;
     #gzip on;
     include /etc/nginx/conf.d/*.conf;
}

nginx.conf配置重要节

User：定义 Nginx 的运行用户。
Worker Processes： 处理请求的工作进程数量。
Error Log： 错误日志文件的路径。
Events： 连接处理配置： 连接处理配置。
HTTP：HTTP 服务器配置的主要部分，包括 MIME 类型、日志记录和服务器包含

default.conf 文件用于定义应用程序的服务器配置, 已使用在线配置文件检查

# /etc/nginx/conf.d/default.conf

server
{
     listen 80;
     server_name localhost;
     location /
     {
         root /usr/share/nginx/html;
         index index.html index.htm;
         try_files $uri $uri/ /index.html;
     }
     error_page 500 502 503 504 /50x.html;
     location = /50x.html
     {
         root /usr/share/nginx/html;
     }
}

start.sh 入口点文件
start.sh 脚本用作 Docker 容器的入口点：

#!/bin/sh
# Exit immediately if a command exits with a non-zero status
set -e
# Start nginx
nginx -g "daemon off;"

start.sh 的说明
set -e： 确保脚本在任何命令失败时立即退出。
nginx -g “daemon off;”： 在前台启动 Nginx，这是 Docker 保持容器运行所必需的。
构建和运行 Docker 容器
构建 Docker 映像
使用以下命令构建 Docker 映像：

docker build -t my-vue-app .

运行 Docker 容器
使用以下命令运行 Docker 容器：

docker run -p 8080:80 my-vue-app

此命令将运行容器，将主机上的 8080 端口映射到容器中的 80 端口。现在， Vue.js 应用程序应该可以访问 http://localhost:8080

基于Docker-compose的docker-compose.yml

version: '3'
services:
   app:
     build:
       context: .
       dockerfile: Dockerfile
     container_name: my-vue-app
     ports:
       - 8080:80

要将 Docker 映像推送到 Docker Hub 存储库，请运行以下命令：

docker push <your_dockerhub_username>/<your_dockerhub_repository_name>:latest

部署于OpenShift

这可以通过网络界面或命令行工具 oc 来完成。首先，在 OpenShift 上创建一个新项目

$ oc new-project vue-app

然后，使用刚刚发布的容器部署新应用程序

$ oc new-app docker.io/<your-username>/vue-openshift

要验证应用程序是否已部署，可以使用

$ oc status

这将列出一个服务 (svc) 和一个部署配置 (dc)。打开网络控制台，就会看到一个 Pod 正在运行。

公开 Vue.js 应用程序的最后一步是创建一个路由，映射到 Pod 中的 8080 端口。可以使用以下命令创建路由：

$ oc expose service vue-openshift --port=8080

如果回头看一下的应用程序，就会在 Routes - External Traffic 标签下看到一个链接。这是指向 Vue.js 应用程序的链接。点击该链接，现在就能看到之前构建的已部署应用程序。

由 OpenShift 集群中的 Nginx 服务器提供服务。如果要对应用程序进行更改，需要重新创建 Vue.js 构建、重建容器、将其推送到注册表并部署应用程序。

$ npm run build
$ podman build -t vue-openshift .
$ podman push vue-openshift docker://docker.io/<your-username>/vue-openshift
$ oc rollout latest vue-openshift

部署Kubernetes

    通过定义部署对象，可以指定要使用的 Docker 映像、要运行的应用程序副本（实例）数量、网络配置等细节。Kubernetes 会使用这些信息来确保在集群中有效地部署和管理应用程序。此外，创建部署对象还能让 Kubernetes 处理扩展、负载平衡和自愈等重要方面。它能确保 Vue.js 应用程序始终可用并顺利运行，即使面对故障或流量增加也是如此。要创建部署对象，请在终端应用程序或命令提示符下创建一个名为 vue-deployment.yaml 的文件，并粘贴下面的配置设置：

在 Kubernetes 中，YAML 文件用于资源配置；在这种情况下，要定义应用程序所需的状态，就需要使用 .yaml 文件来定义。这将允许指定应用程序在 Kubernetes 环境中的部署和管理方式。

apiVersion: apps/v1
kind: Deployment
metadata:
   name: my-vue-app
spec:
   replicas: 3
   selector:
     matchLabels:
       app: my-vue-app
   template:
     metadata:
       labels:
         app: my-vue-app
     spec:
       containers:
         - name: my-vue-app-container
           image: '<your_dockerhub_username>/vue-app:latest'
           ports:
             - containerPort: 8080

此deployment定义了以下内容：

1. 定义名为 my-vue-app 的部署
2. 使用命令（replicas: 3）指示 Kubernetes 为 Vue 应用程序创建三个实例
3. 指定应匹配值为 my-vue-app 的标签，以确保正确选择
4. 在模板块中指定容器详细信息，如容器名称（my-vue-app-container）和来自 Docker Hub 的 Docker 映像（<your_dockerhub_username>/vue-app:late）

现在执行 kubectl 命令，在 Kubernetes 集群中创建该部署：

kubectl apply -f vue-deployment.yaml

要确认部署是否创建成功，请执行以下 kubectl 命令：

kubectl get deployments

要查看 Vue 应用程序的实例（也称为 pod），请执行以下 kubectl 命令：

kubectl get pods

既然已经成功创建了部署，接下来要做的就是为 my-vue-app 部署创建一个 Kubernetes 服务对象，这样就可以查看应用程序了。执行以下 kubectl 命令：

kubectl expose deploy my-vue-app --port 8080 --target-port=80 --type=NodePort

上述命令将通过名为 “my-vue-app ”的服务（类型为 NodePort）公开 my-vue-app 部署。它将在 8080 端口上公开来自 “my-vue-app ”部署的 pod，并将传入流量转发到 80 端口上的 pod。创建服务后，将看到以下输出：

接下来，执行以下命令查看服务：

kubectl get services

NodePort 通过群集中所有节点的特定端口向群集外部公开应用程序。它允许外部使用群集中任意节点的 IP 地址和分配的端口访问服务。在这种情况下，应该可以通过以下地址 <node-ip>:<NodePort-port> 查看 Vue 应用程序。但在此之前，请使用以下命令获取任何集群节点的 IP 地址：

kubectl get node <node-name> -o jsonpath='{.status.addresses[?(@.type=="InternalIP")].address}'

现在，请使用喜欢的浏览器访问以下地址 - <node-ip>:<NodePort-port> 以查看 Vue 应用程序。应该会在主页和关于路由上看到以下输出：

结论

在软件工程中，将Vue.js应用容器化部署到Docker容器中具有重要意义。这种做法不仅提升了应用的部署效率、可移植性和可扩展性，还增强了系统的稳定性和安全性。以下是具体的一些关键点：

1. 环境一致性：
   • Docker容器提供了一种轻量级、可移植的虚拟化环境，确保开发、测试和生产环境之间的一致性。对于Vue.js应用来说，这意味着无论在哪个环境中运行，应用的依赖、配置和行为都将保持一致，减少了因环境差异导致的问题。
2. 简化部署流程：
   • 使用Docker容器化Vue.js应用可以极大地简化部署流程。开发团队可以构建一个包含所有必需依赖和配置的Docker镜像，并通过简单的命令（如docker run）在任何支持Docker的服务器上部署应用。这消除了手动配置服务器和安装依赖的繁琐过程。
3. 提高可移植性：
   • Docker容器使得Vue.js应用可以在任何支持Docker的平台上运行，包括云环境、虚拟机或物理服务器。这种高度的可移植性使得应用能够轻松地在不同环境之间迁移，适应不同的业务需求。
4. 增强可扩展性：
   • 通过Docker容器，可以轻松地扩展Vue.js应用的部署规模。使用Docker Swarm、Kubernetes、OpenShift等容器编排工具，可以轻松地管理多个容器实例，并根据负载情况自动调整资源分配，从而实现应用的水平扩展。
5. 提高安全性：
   • Docker容器提供了额外的安全层。通过限制容器对宿主机的访问权限，可以减少潜在的安全风险。此外，Docker镜像的分层存储和签名机制也有助于确保镜像的完整性和来源可靠性。
6. 促进微服务架构：
   • 对于包含多个服务的复杂Vue.js应用（如前端应用与后端API分离），Docker容器化可以促进微服务架构的实施。每个服务都可以被封装在一个独立的容器中，从而实现服务的解耦和独立部署。
7. 简化版本控制和回滚：
• Docker镜像可以被视为应用的快照，通过版本控制系统（如Git）管理Docker镜像的源代码和构建脚本，可以方便地跟踪应用的变更历史。在需要时，可以快速回滚到之前的版本，降低因新版本引入问题而导致的风险。

如有想了解更多软件设计与架构, 系统IT,企业信息化, 团队管理 资讯，请关注我的微信订阅号：

作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 该文章也同时发布在我的独立博客中-Petter Liu Blog。