基于Docker搭建vue前端项目

新建一个vue项目，或clone下仓库上的项目在你的工作目录vue

npm install && npm run build

打包生成vue的一个dist

image.png

基于nginx镜像生成一个vue前端项目的容器
映射项目文件地址：./web/dist:/usr/share/nginx/html/
并映射nginx配置80端口配置：./vue.conf:/etc/nginx/conf.d/default.conf
vue.conf配置为：

server {
    listen       80;
    server_name  localhost;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

docker-compose.yml

version: "3"
services:
  vue:
    image: nginx:latest
    container_name: vue
    hostname: vue
    ports:
      - "4000:80"
    volumes:
      - ./web/dist:/usr/share/nginx/html/  #创建项目根目录
      - ./vue.conf:/etc/nginx/conf.d/default.conf
    restart: always

执行命令docker-compose up -d，然后可以访问前端静态项目了。