「免费开源」基于 Vue 和 Quasar 的前端 SPA 项目 crudapi 后台管理系统实战之 docker 部署（八）

crudapi

关注

发布于: 2021 年 04 月 13 日

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之docker部署（八）

基于 Vue 和 Quasar 的前端 SPA 项目实战之 docker 部署（八）

回顾

通过上一篇文章基于Vue和Quasar的前端SPA项目实战之业务数据（七）的介绍，crudapi-admin-web 基本功能全部实现了，本文主要介绍前端打包和 docker 部署相关内容。

简介

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux 或 Windows 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。采用 docker 技术可以很方便地实现持续集成和交付 CI/CD。

配置 quasar.conf.js

build: {  vueRouterMode: 'history',  publicPath: '/crudapi/',  distDir: `dist/${ctx.modeName}/crudapi`}

复制代码

通常将前端打包之后的文件放在一个子目录下，方便和其它系统集成，比如可以放在 spring boot 项目的 resources/static/crudapi 目录下，避免放在根目录，所以这里配置 publicPath 为 crudapi。

Dockefile

FROM node:lts-alpine as builder
COPY package.json /crudapi-admin-web/package.json
WORKDIR /crudapi-admin-webRUN npm install
COPY . /crudapi-admin-web/
WORKDIR /crudapi-admin-web
RUN npm run build
FROM nginx:latest
WORKDIR /crudapi-admin-web
COPY --from=builder /crudapi-admin-web/dist/spa .
COPY ./docker/default.conf  /etc/nginx/conf.d/default.conf
EXPOSE 80

复制代码

构建分为两个阶段：

利用 node 镜像编译打包
利用 nginx 镜像暴露 80 端口，提供 http 服务

优化：package.json 放在第一步 copy，目的是为了缓存，从而提高镜像构建速度，因为通常情况下 package.json 不会频繁修改，只要 package.json 不变，后面的 npm install 命令就不会重复构建。

nginx 配置

server {    listen       80;    server_name  localhost;
    charset 'utf-8';        error_page   500 502 503 504  /50x.html;    location = /50x.html {        root   /usr/share/nginx/html;    }
    location ~ /api {      proxy_pass  http://demo.crudapi.cn;    }
    location / {        root   /crudapi-admin-web;        index  index.html index.htm;        try_files $uri $uri/ /crudapi/index.html;    }}

复制代码

default.conf 中主要配置两个 location 规则

api 部分转发到 http://demo.crudapi.cn，可以替换为其它有效地址
其它内容永远访问/crudapi-admin-web/crudapi/index.html，vue 内部自动处理路由

.dockerignore 配置

.DS_Store.git.gitignorenode_modulesdist.quasar.vscode.dockerignorepackage-lock.jsonDockerfile*.md

复制代码

dockerignore 排除的不需要的文件，避免构建过程中 copy 无用文件。

docker 命令

本地打包 docker 和运行

docker build -t crudapi-admin-web:latest .docker rm -f crudapi-admin-webdocker run -d -p 80:80 --name crudapi-admin-web crudapi-admin-web:latestdocker ps | grep crudapi-admin-web

复制代码

最新的 docker 镜像已经自动上传到 docker 官网 hubhttps://hub.docker.com/repository/docker/crudapi/crudapi-admin-web，直接 pull 也可以。

docker pull crudapi/crudapi-admin-web:latestdocker tag crudapi/crudapi-admin-web:latest crudapi-nginx:latest

复制代码

进行验证

访问 http://127.0.0.1/crudapi

小结

本文主要介绍了 vue 前端打包和 docker 部署相关内容，到目前为止，crudapi-admin-web 代码已经完成，后续会继续优化代码，文档也会持续更新。每一篇文章对应的代码，都打上了 tag，命名规则为 t1,t2..., 欢迎下载代码学习和交流。

demo 演示

官网地址：https://crudapi.cn

测试地址：https://demo.crudapi.cn/crudapi/login

附源码地址

GitHub 地址

https://github.com/crudapi/crudapi-admin-web

Gitee 地址

https://gitee.com/crudapi/crudapi-admin-web

由于网络原因，GitHub 可能速度慢，改成访问 Gitee 即可，代码同步更新。

发布于: 2021 年 04 月 13 日阅读数: 25

原文链接:【http://xie.infoq.cn/article/1907293df46cbbf68d7f8cd47】。

crudapi

关注

crudapi是crud+api组合，表示增删改查接口 2019.06.19 加入

使用crudapi可以告别枯燥无味的增删改查代码，让您更加专注业务，节约大量成本，从而提高工作效率。crudapi的目标是让处理数据变得更简单!官网：https://crudapi.cn 演示：https://demo.crudapi.cn/crudapi/login

发布

暂无评论

创作场景

「免费开源」基于 Vue 和 Quasar 的前端 SPA 项目 crudapi 后台管理系统实战之 docker 部署（八）

基于 Vue 和 Quasar 的前端 SPA 项目实战之 docker 部署（八）

回顾

简介

配置 quasar.conf.js

Dockefile

nginx 配置

.dockerignore 配置

docker 命令

进行验证

小结

demo 演示

附源码地址

GitHub 地址

Gitee 地址

crudapi

评论