「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之docker部署(八)

简介: Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口。采用docker技术可以很方便地实现持续集成和交付CI/CD。本文主要介绍了vue前端打包和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-web
RUN 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

构建分为两个阶段:

  1. 利用node镜像编译打包
  2. 利用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规则

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

.dockerignore配置

.DS_Store
.git
.gitignore
node_modules
dist
.quasar
.vscode
.dockerignore
package-lock.json
Dockerfile
*.md

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

docker命令

本地打包docker和运行

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

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

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

进行验证

demo
访问 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即可,代码同步更新。

目录
相关文章
|
1月前
|
存储 JavaScript 前端开发
前端技术分享:使用Vue.js与Vuex管理状态
【10月更文挑战第1天】前端技术分享:使用Vue.js与Vuex管理状态
44 6
|
1月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
65 41
|
4天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
22天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
22天前
|
关系型数据库 MySQL Linux
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
187 2
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
7天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
1月前
|
JavaScript 前端开发 API
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
17 2
|
1月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
1月前
|
前端开发 开发工具 git
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
31 5