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

张春  金牌会员 | 7 天前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 570|帖子 570|积分 1710

为什么要对 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 /:latest


部署于OpenShift

这可以通过网络界面或命令行工具 oc 来完成。起首，在 OpenShift 上创建一个新项目
  1. <font size="3">$ oc new-project vue-app

  3. </font>
复制代码
  1. <font size="3">然后，使用刚刚发布的容器部署新应用程序</font>
复制代码
  1. <font size="3">$ oc new-app docker.io/<your-username>/vue-openshift</font>
复制代码
要验证应用程序是否已部署，可以使用
  1. <font size="3">$ oc status</font>
复制代码
这将列出一个服务 (svc) 和一个部署配置 (dc)。打开网络控制台，就会看到一个 Pod 正在运行。
公开 Vue.js 应用程序的末了一步是创建一个路由，映射到 Pod 中的 8080 端口。可以使用以下命令创建路由：
  1. <font size="3">$ oc expose service vue-openshift --port=8080</font>
复制代码
如果转头看一下的应用程序，就会在 Routes - External Traffic 标签下看到一个链接。这是指向 Vue.js 应用程序的链接。点击该链接，现在就能看到之前构建的已部署应用程序。
由 OpenShift 集群中的 Nginx 服务器提供服务。如果要对应用程序举行更改，需要重新创建 Vue.js 构建、重建容器、将其推送到注册表并部署应用程序。
  1. <font size="3">$ npm run build
  2. $ podman build -t vue-openshift .
  3. $ podman push vue-openshift docker://docker.io/<your-username>/vue-openshift
  4. $ oc rollout latest vue-openshift</font>
复制代码
部署Kubernetes

    通过定义部署对象，可以指定要使用的 Docker 映像、要运行的应用程序副本（实例）数目、网络配置等细节。Kubernetes 会使用这些信息来确保在集群中有效地部署和管理应用程序。此外，创建部署对象还能让 Kubernetes 处置惩罚扩展、负载平衡和自愈等重要方面。它能确保 Vue.js 应用程序始终可用并顺利运行，即使面对故障或流量增加也是云云。要创建部署对象，请在终端应用程序或命令提示符下创建一个名为 vue-deployment.yaml 的文件，并粘贴下面的配置设置：
  1. <font size="3">在 Kubernetes 中，YAML 文件用于资源配置；在这种情况下，要定义应用程序所需的状态，就需要使用 .yaml 文件来定义。这将允许指定应用程序在 Kubernetes 环境中的部署和管理方式。</font>
复制代码
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: '/vue-app:latest'
           ports:
             - containerPort: 8080


此deployment定义了以下内容：

  • 定义名为 my-vue-app 的部署
  • 使用命令（replicas: 3）指示 Kubernetes 为 Vue 应用程序创建三个实例
  • 指定应匹配值为 my-vue-app 的标签，以确保正确选择
  • 在模板块中指定容器详细信息，如容器名称（my-vue-app-container）和来自 Docker Hub 的 Docker 映像（/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 地址和分配的端口访问服务。在这种情况下，应该可以通过以下地址 : 查看 Vue 应用程序。但在此之前，请使用以下命令获取任何集群节点的 IP 地址：
kubectl get node  -o jsonpath='{.status.addresses[?(@.type=="InternalIP")].address}'
现在，请使用喜欢的浏览器访问以下地址 - : 以查看 Vue 应用程序。应该会在主页和关于路由上看到以下输出：



结论

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

  • 情况同等性：

    • Docker容器提供了一种轻量级、可移植的虚拟化情况，确保开发、测试和生产情况之间的同等性。对于Vue.js应用来说，这意味着无论在哪个情况中运行，应用的依靠、配置和举动都将保持同等，减少了因情况差别导致的问题。

  • 简化部署流程：

    • 使用Docker容器化Vue.js应用可以极大地简化部署流程。开发团队可以构建一个包含所有必须依靠和配置的Docker镜像，并通过简单的命令（如docker run）在任何支持Docker的服务器上部署应用。这消除了手动配置服务器和安装依靠的繁琐过程。

  • 提高可移植性：

    • Docker容器使得Vue.js应用可以在任何支持Docker的平台上运行，包括云情况、虚拟机或物理服务器。这种高度的可移植性使得应用能够轻松地在不同情况之间迁移，适应不同的业务需求。

  • 增强可扩展性：

    • 通过Docker容器，可以轻松地扩展Vue.js应用的部署规模。使用Docker Swarm、Kubernetes、OpenShift等容器编排工具，可以轻松地管理多个容器实例，并根据负载情况主动调解资源分配，从而实现应用的水平扩展。

  • 提高安全性：

    • Docker容器提供了额外的安全层。通过限制容器对宿主机的访问权限，可以减少潜伏的安全风险。此外，Docker镜像的分层存储和签名机制也有助于确保镜像的完整性和来源可靠性。

  • 促进微服务架构：

    • 对于包含多个服务的复杂Vue.js应用（如前端应用与后端API分离），Docker容器化可以促进微服务架构的实行。每个服务都可以被封装在一个独立的容器中，从而实现服务的解耦和独立部署。

  • 简化版本控制和回滚：

    • Docker镜像可以被视为应用的快照，通过版本控制体系（如Git）管理Docker镜像的源代码和构建脚本，可以方便地跟踪应用的变更汗青。在需要时，可以快速回滚到之前的版本，低落因新版本引入问题而导致的风险。

本日先到这儿，希望对云原生，技能向导力， 企业管理，体系架构设计与评估，团队管理, 项目管理, 产品管理，信息安全，团队建设 有参考作用 , 您可能感爱好的文章:
构建创业公司突击小团队
国际化情况下体系架构演化
微服务架构设计
视频直播平台的体系架构演化
微服务与Docker先容
Docker与CI连续集成/CD
互联网电商购物车架构演变案例
互联网业务场景下消息队列架构
互联网高效研发团队管理演进之一
消息体系架构设计演进
互联网电商搜刮架构演化之一
企业信息化与软件工程的迷思
企业项目化管理先容
软件项目成功之要素
人际沟通风格先容一
精益IT组织与分享式向导
学习型组织与企业
企业创新文化与品级观念
组织目标与个人目标
初创公司人才招聘与管理
人才公司情况与企业文化
企业文化、团队文化与知识共享
高效能的团队建设
项目管理沟通筹划
构建高效的研发与主动化运维
某大型电商云平台实践
互联网数据库架构设计思路
IT基础架构规划方案一(网络体系规划)
餐饮行业解决方案之客户分析流程
餐饮行业解决方案之采购战略制定与实行流程
餐饮行业解决方案之业务设计流程
供应链需求调研CheckList
企业应用之性能及时度量体系演变 如有想相识更多软件设计与架构, 体系IT,企业信息化, 团队管理 资讯，请关注我的微信订阅号：

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

张春

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表