同等性： 确保应用程序在所有情况（开发、测试、生产）中运行同等。
隔离性： 使应用程序与主机体系上的其他应用程序隔离，低落冲突风险。
可扩展性： 简化横向扩展应用程序的过程。
可移植性: 可在不同情况和云提供商之间轻松移动应用程序。
npm install -g @vue/cli创建新的 Vue 项目
vue create my-vue-app该命令将提示选择所需的功能。可以选择默认预设，也可以根据自己的要求举行定制
cd my-vue-app该命令将启动开发服务器，应用程序将可在 http://localhost:8080 上运行
npm run serve
# Use the official node image as the base imageDockerfile 各部分说明
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"]
从 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 脚本的入口点
# 使用更小的基础镜像
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"]
# /etc/nginx/nginx.confnginx.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;
}
# /etc/nginx/conf.d/default.confstart.sh 入口点文件
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;
}
}
#!/bin/shstart.sh 的说明
# Exit immediately if a command exits with a non-zero status
set -e
# Start nginx
nginx -g "daemon off;"
docker build -t my-vue-app .运行 Docker 容器
docker run -p 8080:80 my-vue-app此命令将运行容器，将主机上的 8080 端口映射到容器中的 80 端口。现在， Vue.js 应用程序应该可以访问 http://localhost:8080
version: '3'
services:
app:
build:
context: .
dockerfile: Dockerfile
container_name: my-vue-app
ports:
- 8080:80
docker push /:latest
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
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 servicesNodePort 通过群会合所有节点的特定端口向群集外部公开应用程序。它允许外部使用群会合任意节点的 IP 地址和分配的端口访问服务。在这种情况下，应该可以通过以下地址 : 查看 Vue 应用程序。但在此之前，请使用以下命令获取任何集群节点的 IP 地址：
kubectl get node -o jsonpath='{.status.addresses[?(@.type=="InternalIP")].address}'现在，请使用喜欢的浏览器访问以下地址 - : 以查看 Vue 应用程序。应该会在主页和关于路由上看到以下输出：
| 欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) | Powered by Discuz! X3.4 |