團隊vue基礎映象選擇思考

李福春發表於2022-03-30
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:latest

WORKDIR /data/cycube/

COPY . /data/cycube/

RUN npm config set registry=https://packages.aliyun.com/61516fe9bdfa1bd1b630ac57/npm/npm-registry/
RUN npm install
RUN npm run build

######################分階段構建######################

FROM registry.cn-shanghai.aliyuncs.com/cycube/app:nginx-1.20.2-alpine

EXPOSE 80

COPY --from=0 /data/cycube/dist/ /usr/share/nginx/html/
COPY --from=0 /data/cycube/nginx.conf /etc/nginx/conf.d/default.conf

RUN ln -snf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo Asia/Shanghai > /etc/timezone

ENTRYPOINT ["nginx"]
CMD ["-g","daemon off;"]

執行成功；

openresty

FROM openresty/openresty:1.19.9.1-4-alpine

EXPOSE 80

COPY ./dist/ /usr/share/nginx/html/
COPY nginx_front.conf /etc/nginx/conf.d/default.conf

ENV TZ=Asia/Shanghai

RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

ENTRYPOINT ["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寫的快速介面執行：

file

正常前端訪問：

file

小結

最終採用openresty作為前端的基礎映象，後續一些短平快的介面實現，直接使用lua搞定；基礎映象大了一部分，但是能力也大大增加了。

因為前端node版本不同，打包結果和耗時比較隨機，這裡跟前端妹子約定了版本號，後續的開發環境的版本也使用這個 node:17.3.0

參考資料

openresty作為閘道器
https://blog.csdn.net/Xavider/article/details/103544222

原創不易，關注誠可貴，轉發價更高！轉載請註明出處，讓我們互通有無，共同進步，歡迎溝通交流。

相關文章