使用docker部署vue项目

前置条件

1. 一台Linux服务器，本项目使用的是 centos 7.8 系统
2. 安装docker，本项目docker 版本为 20.10.12
3. 安装docker-compose 本项目使用版本为 1.29.2

准备阶段

1. 在项目根目录新建docker目录

2. 在docker目录下编写Dockerfile

   FROM nginx:latest
   # 维护者信息
   MAINTAINER xxx@163.com
   
   # 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/naive-admin 目录下 naive-admin 为项目名称
   ADD dist /usr/share/nginx/html/naive-admin/
   ADD default.conf /etc/nginx/conf.d/default.conf
   

3. 创建nginx config 配置文件

   在docker目录下创建 default.conf，写入如下内容

   
   root /usr/share/nginx/html;
   
   # 开启nginx静态压缩
   gzip_static  on;
   gzip_proxied expired no-cache no-store private auth;
   
   server {
       listen 8000;
       listen [::]:8000;
       server_name localhost;
   
       #charset koi8-r;
       #access_log  /var/log/nginx/host.access.log  main;
   
       location / {
           root /usr/share/nginx/html;
           index index.html index.htm;
       }
   
       location /naive-admin {
           root /usr/share/nginx/html;
           index index.html index.htm;
           try_files $uri $uri/ /naive-admin/index.html;
       }
   }
   

4. 编写docker-compose

   在docker目录下创建docker-compose.yml，内容如下

   version: '3.8'
   services:  #服务列表，下一级的key为服务名称
     naive-admin:  #服务名称
       container_name: naive-admin # 启动的容器名称
       restart: always # docker 重启后自动运行该容器
       build:  # 指定包含构建上下文的路径, 或作为一个对象，该对象具有 context 和指定的 dockerfile 文件以及 args 参数值
         context: ./  #dockerfile所在的目录
         dockerfile: Dockerfile #dockerfile文件名称
       image: naive-admin:latest #使用的镜像名称
       ports:  #暴露的端口
         - "8000:8000"
       volumes: #映射的磁盘
         - /etc/localtime:/etc/localtime
   

5. 编写启动脚本

   在docker目录下创建 start.sh，内容如下

   cd /home/app/naive-admin
   echo "---------------------- docker-compose stop --------------------"
   docker-compose down # 停止运行的容器，并且会删除已停止的容器以及已创建的所有网络
   echo "---------------------- docker-compose build ----------------------"
   docker-compose -f docker-compose.yml  build
   echo "---------------------- docker-compose up ----------------------"
   docker-compose up -d
   

至此，准备工作完成

部署

1. 将docker目录下的全部文件上传到服务器 /home/app/naive-admin 目录下

2. 执行 start.sh 脚本

至此，使用docker部署vue项目已经完成