团队vue基础镜像选择思考

前端镜像可以考虑使用nginx或者openresty;

镜像	大小	说明
nginx:1.20.2-alpine	8.41 MB	最小最新版本
nginx:1.21.4	50.95 MB	最新版本
nginx:stable 1.20.2	52.27 MB	稳定版本
openresty/openresty:1.19.9.1-4-alpine	33.14 MB	最小最新版本
openresty/openresty:1.19.9.1-4-alpine-fat	109.68 MB	最小最新功能最全版本

vue工程

分阶段打包脚本：

FROM node:17.3.0#FROM node:latestWORKDIR /data/cycube/COPY . /data/cycube/RUN npm config set registry=https://packages.aliyun.com/61516fe9bdfa1bd1b630ac57/npm/npm-registry/RUN npm installRUN npm run build######################分阶段构建######################FROM registry.cn-shanghai.aliyuncs.com/cycube/app:nginx-1.20.2-alpineEXPOSE 80COPY --from=0 /data/cycube/dist/ /usr/share/nginx/html/COPY --from=0 /data/cycube/nginx.conf /etc/nginx/conf.d/default.confRUN ln -snf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo Asia/Shanghai > /etc/timezoneENTRYPOINT ["nginx"]CMD ["-g","daemon off;"]

运行成功；

openresty

FROM openresty/openresty:1.19.9.1-4-alpineEXPOSE 80COPY ./dist/ /usr/share/nginx/html/COPY nginx_front.conf /etc/nginx/conf.d/default.confENV TZ=Asia/ShanghaiRUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezoneENTRYPOINT ["nginx"]CMD ["-g","daemon off;"]

配置文件：

server {    listen       80;    server_name  localhost;    root         /usr/share/nginx/html/;    location / {      try_files $uri $uri/ @router;      index index.html;    }     location /test {         default_type text/html;         content_by_lua_block {             ngx.say("<p>hello, openresty!!!</p>")         }     }    error_page  404              /404.html;    error_page   500 503 504  /50x.html;    location = /50x.html {        root   /usr/share/nginx/html;    }    error_page 502 =200  @jump_to_error;    location @jump_to_error {        default_type application/json;        return 200 '{"ret":503,"msg":"服务器正在重启,请稍候"}';    }}

打包，

docker build -t frontrest:v1 -f Dockerfile2resty ./

测试；

docker run --name frontrest:v1 -p 80:80 -d frontrest:v1

lua写的快速接口运行：

正常前端访问：

小结

最终采用openresty作为前端的基础镜像，后续一些短平快的接口实现，直接使用lua搞定；基础镜像大了一部分，但是能力也大大增加了。

因为前端node版本不同，打包结果和耗时比较随机，这里跟前端妹子约定了版本号，后续的开发环境的版本也使用这个 node:17.3.0

参考资料

openresty作为网关
https://blog.csdn.net/Xavider/article/details/103544222

原创不易，关注诚可贵，转发价更高！转载请注明出处，让我们互通有无，共同进步，欢迎沟通交流。