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 serverserver {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-h5labels:app: demo-istio-h5
spec: #详细containers: #容器信息- name: demo-istio-h5 #容器叫nginximage: demo-istio-h5:v1.0 #使用的镜像，这样是使用本地nginx镜像，当然可以使用私有仓库镜像*.*.*.*:5000/nginx:latestports: #容器开放的端口- containerPort: 80

执行kubectl 命令创建pod

kubectl apply -f demo-h5-pod.yaml

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

kubectl get pod

如下图：

docker: 打包h5项目的镜像相关推荐

2021-01-22 使用 Docker 打包 Python 项目
使用 Docker 打包 Python 项目 1. 获取 Python 的镜像文件项目的封装可以建立在已有镜像的基础上,在 Ubuntu 中可通过 docker pull python:3.6.8- ...
docker打包Python项目
docker打包Python项目 Step1: 配置运行环境文档项目结构如下 docker_test ├── Dockerfile ├── (myapps) │ └── BPNN.py └── re ...
hbuilderx打包h5项目遇到的问题
参考更多打包h5遇到的问题 https://blog.csdn.net/weixin_45067120/article/details/106749113?spm=1001.2101.3001.665 ...
uni-app 打包H5项目
配置 uni-app 命令打包 1.启动服务 npm run serve 2.编译项目 npm run build %H5% 3.启动项目查看效果 npm run build cd dist cd b ...
老调重弹，Android Studio 打包H5项目（2020版）
我是目录一.下载Android Studio 二.新建安卓项目三.一个完整的安卓应用需要哪些东西 1. 能访问网络 2. 能回退,像App一样 3. 自定义App图标,不要是个默认的Android ...
hbuilderx打包h5项目白屏
打包之前在根目录新建vue.config.js文件,写入 module.exports={publicPath: "./" } 之后在进行打包
Maven打包SpringBoot项目镜像并推送至私有Harbor仓库
1 准备工作: 1.1 搭建harbor 因为harbor是基于docker的,并且依赖于docker-compose,所以先要准备好dockers环境再安装好compose工具 1.1.1 dock ...
docker打包 python镜像
1.安装python3 这里有一个bug,由于centos系统自带python2,而且python的软连接是默认指向python2的, 所以,当安装python3之后,就需要修改软连接,将python ...
linux运行dock打包的镜像,Linux部署之Docker方式部署项目
Linux部署之Docker方式部署项目 1. 使用Docker对前端vue项目进行部署 1.1 环境准备服务器或者虚拟机上先安装好Nginx和相关配置 docker pull nginx 拉去最新 ...