docker: 打包h5项目的镜像

生成docker 镜像

编译h5应用

本文实验使用的是vue,但想来现在h5项目的编译命令都差不多吧。
执行npm 命令编译h5项目:

npm run build

打包镜像

新建目录: docker-h5
将h5项目编译生成的目录dist移动到docker-h5 目录中
在docker-h5目录中新建文件 “dockerfile”, 文件内容如下:

# 基于nginx:1.20镜像
FROM nginx:1.20
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/dist/
# 用本地的 nginx.conf 配置来替换nginx镜像里的默认配置
COPY nginx.conf /etc/nginx/nginx.conf

新建nginx.conf文件,文件内容:

#user  nobody;
worker_processes  1;
events {
    
    
    worker_connections  1024;
}
http {
    
    
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;

    # HTTP server
    server {
    
    
        listen 80;
        server_name  localhost;

        location / {
    
    
            root   /usr/share/nginx/html/dist;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
    
    
            root   html;
        }
    }
}

运行打包命令:

docker build -t demo-istio-h5:v1.0 .

运行docker 镜像

docker run

运行打包好的h5项目镜像

docker run -d --privileged=true --name demo-istio-h5 --restart always -p 8080:80 demo-istio-h5:1.0

参数解释:

--privileged=true        #容器内部拥有root权限
--restart always         #自启动
--net=host               #网络与宿主机保持一致
-p 							# 绑定宿主机端口:  {hostPort}:{continerPort}
--name						#容器名称

通过url http://localhost:8080就能访问h5应用了。

kubernetes pod

创建yam文件 : demo-h5-pod.yaml

apiVersion: v1 #定义k8s api的版本v1
kind: Pod #kind资源 Pod
metadata: #属性,名字叫nginx,标签叫app : web(键值对)
  name: demo-istio-h5
  labels:
    app: demo-istio-h5
spec: #详细
  containers: #容器信息
    - name: demo-istio-h5 #容器叫nginx
      image: demo-istio-h5:v1.0 #使用的镜像,这样是使用本地nginx镜像,当然可以使用私有仓库镜像*.*.*.*:5000/nginx:latest
      ports: #容器开放的端口
        - containerPort: 80

执行kubectl 命令创建pod

kubectl apply -f demo-h5-pod.yaml

通过以下命令查看pod是否创建成功

kubectl get pod

如下图:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Mr_rain/article/details/126044289