"Free and open source" docker deployment of the front-end SPA project crudapi background management system based on Vue and Quasar (8)


Docker deployment of front-end SPA project based on Vue and Quasar (8)


via previous postBusiness data of front-end SPA project based on Vue and Quasar (7)The basic functions of crudapi-admin-web are all realized. This article mainly introduces the front-end packaging and docker deployment related content.


Docker is an open source application container engine that allows developers to package their applications and dependencies into a portable image, which can then be distributed to any popular Linux or Windows machine, and can also be virtualized. Containers are completely sandboxed and do not have any interface with each other. Continuous integration and delivery of CI/CD can be easily achieved using docker technology.

Configure quasar.conf.js

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

Usually, the front-end packaged files are placed in a subdirectory to facilitate integration with other systems. For example, they can be placed in the resources/static/crudapi directory of the spring boot project to avoid placing them in the root directory. Therefore, publicPath is configured here as crudapi.


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


The build is divided into two phases:

  1. Compile and package with node image
  2. Use nginx mirror to expose port 80 to provide http service

The package.json is placed in the first step of copy, the purpose is to cache, thereby improving the image construction speed, because usually package.json is not frequently modified, as long as the package.json remains unchanged, the subsequent npm install command will not repeat the construction .

nginx configuration

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;

Two location rules are mainly configured in default.conf

  1. The api part is forwarded to http://demo.crudapi.cn, which can be replaced with other valid addresses
  2. Other content will always visit /crudapi-admin-web/crudapi/index.html, and vue will automatically process routing internally

.dockerignore configuration


Unnecessary files excluded by dockerignore avoid copying useless files during the build process.

docker command

Package docker locally and run

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

The latest docker image has been automatically uploaded to the docker official website hubhttps://hub.docker.com/repository/docker/crudapi/crudapi-admin-web, you can also pull directly.

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




This article mainly introduces the contents of Vue front-end packaging and docker deployment. So far, the crudapi-admin-web code has been completed, and the code will continue to be optimized in the future, and the documentation will continue to be updated. The code corresponding to each article is tagged, and the naming rules are t1, t2…, welcome to download the code to learn and communicate.


Official website address:https://crudapi.cn
Test address:https://demo.crudapi.cn/crudapi/login

With source code address

GitHub address


Gitee address


Due to network reasons, GitHub may be slow, you can change it to access Gitee, and the code will be updated synchronously.

Recommended Today

Flink + Iceberg, Tencent's tens of billions of real-time data into the lake for actual combat

Introduction:Shanghai Station Flink Meetup shared content, and case sharing of Tencent Data Lake's tens of billions of data scenarios. This article is compiled from "Ten Billions of Real-Time Data into the Lake Actual Combat" shared by Chen Junjie, senior engineer of Tencent Data Lake R&D, at the Flink Meetup at Shanghai Station on April 17. […]