前端服务容器化：Vue 项目构建、静态资源打包与镜像制作

# 宿主机上创建项目目录
[root@node01 ~]# mkdir springcloud

# 下载源码
[root@k8s-node01 ~]# cd springcloud/
[root@k8s-node01 springcloud]# git clone https://gitee.com/dukuan/demo-ui.git

# 宿主机上创建缓存目录(如果上面做过此步骤可忽略)
[root@k8s-node01 springcloud]# mkdir -p /data/m2

# 启动临时容器
[root@node01 ~]# cd /root/springcloud
[root@k8s-node01 springcloud]# 
docker run -it --rm \
  -v /data/m2:/root/.m2 \
  -v "$(pwd)/demo-ui:/mnt" \
  registry.cn-hangzhou.aliyuncs.com/abroad_images/node:16.17.0-apline-cnpm sh
/ # cd /mnt/
/mnt # sed -i 's/"@vitejs\/plugin-vue": "^5.0.4"/"@vitejs\/plugin-vue": "^4.3.4"/' package.json
/mnt # sed -i 's/"vite": "^5.2.0"/"vite": "^4.4.9"/' package.json
/mnt # npm install --registry=https://registry.npmmirror.com
/mnt # npm run build

# 出现✓字样，代表成功
> demo-ui@0.0.0 build
> vite build

vite v4.5.9 building for production...
✓ 64 modules transformed.
dist/index.html                  0.45 kB │ gzip:  0.29 kB
dist/assets/index-819d4460.css   1.27 kB │ gzip:  0.65 kB
dist/assets/index-c04d2758.js   94.87 kB │ gzip: 37.59 kB
✓ built in 1.22s

# 检查宿主机目录
[root@k8s-node01 springcloud]# ll /root/springcloud/demo-ui/dist/
总用量 8
drwxr-xr-x 2 root root   57  3月 23 10:55 assets
-rw-r--r-- 1 root root  449  3月 23 10:55 index.html
-rw-r--r-- 1 root root 1497  3月 23 10:55 vite.svg

# 宿主机上同样查看，观察到已生成target目录
[root@k8s-node01 ~]# cd /root/springcloud/demo-ui/
[root@k8s-node01 demo-ui]# ll
总用量 80
drwxr-xr-x  3 root root    54  3月 23 10:55 dist
-rw-r--r--  1 root root   357  3月 23 10:54 index.html
drwxr-xr-x 43 root root  4096  3月 23 10:55 node_modules
-rw-r--r--  1 root root   335  3月 23 10:54 package.json
-rw-r--r--  1 root root 59193  3月 23 10:55 package-lock.json
drwxr-xr-x  2 root root    22  3月 23 10:54 public
-rw-r--r--  1 root root   440  3月 23 10:54 README.md
drwxr-xr-x  4 root root    85  3月 23 10:54 src
-rw-r--r--  1 root root   157  3月 23 10:54 vite.config.js

# 编写Dockfile文件
[root@k8s-node01 ~]# cd /root/springcloud/demo-ui/
[root@k8s-node01 demo-ui]# vim Dockerfile
# 基础镜像可以按需修改，可以更改为公司自有镜像
FROM registry.cn-hangzhou.aliyuncs.com/abroad_images/nginx:1.22.1-alpine3.17
# 复制文件
COPY dist /usr/share/nginx/html

[root@k8s-node01 demo-receive]# docker build -t registry.cn-hangzhou.aliyuncs.com/abroad_images/demo-ui:v0.0.1 .

# 上传镜像到阿里云仓库
[root@k8s-node01 demo-eureka]# docker push registry.cn-hangzhou.aliyuncs.com/abroad_images/demo-ui:v0.0.1