ElAdmin后台管理系统容器化实践

最新推荐文章于 2024-03-27 09:50:53 发布

VIP文章 Josen Winter

最新推荐文章于 2024-03-27 09:50:53 发布

阅读量425

点赞数

文章标签： vue.js git npm

本文链接：https://blog.csdn.net/weixin_43991978/article/details/129484190

版权

ElAdmin后台管理系统容器化实践

项目介绍

前后端分离项目
前端：https://gitee.com/agagin/eladmin-web.git
后端： https://gitee.com/agagin/eladmin.git
要素：vue npm springboot mysql redis

前端容器化

思路：

前端构建需要node环境，构建结果通常为dist静态文件，项目运行仅需要web服务器即可。因此采用多阶构建
确认基础镜像：docker search vue-node

验证构建，最终采用codemantn/vue-node作为基础镜像

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set registry https://registry.npm.taobao.org
npm install
npm run build:prod

运行环境采用nginx:alpine作为基础镜像，启动容器熟悉镜像的启动目录等信息
把构建的dist拷贝到镜像的/usr/share/nginx/html/即可

因此，综合得到多阶构建的Dockerfile

[root@localhost ~]# cd /2023/demo/
[root@localhost demo]# git clone --depth=1 https://gitee.com/agagin/eladmin-web.git
[root@localhost demo]# cd eladmin-web/
[root@localhost eladmin-web]# vi Dockerfile
FROM codemantn/vue-node AS builder

LABEL maintainer="[email protected]"

# config npm
RUN npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ && \
    npm config set registry https://registry.npm.taobao.org

WORKDIR /opt/eladmin-web
COPY  . .

# build
RUN ls -l && npm install && npm run build:prod


FROM nginx:alpine

WORKDIR /usr/share/nginx/html

COPY --from=builder /opt/eladmin-web/dist /usr/share/nginx/html/

EXPOSE 80

[root@localhost eladmin-web]# docker build . -t eladmin-web:v1 -f Dockerfile

构建：

docker build . -t eladmin-web:v1 -f Dockerfile.multi

附加：手动构建

[root@localhost ~]# docker search vue-node

[root@localhost ~]# docker run -ti codemantn/vue-node sh
/ # sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
/ # apk add git
/ # git clone --depth=1 https://gitee.com/agagin/eladmin-web.git
/ # cd eladmin-web/
/eladmin-web # npm config set sass_binary_site https://npm.taobao.or