docker部署vue项目

基本步骤

1. 在本地打包vue项目成docker镜像（image）
2. 上传至服务器加载镜像

拉取nginx

docker pull nginx

• 不指定版本会拉取最新版latest

vue项目根目录中创建nginx配置文件default.conf

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

• root /usr/share/nginx/html – 这个目录和下面创建的Dockerfile中目录要保持一致

vue项目根目录下创建Dockerfile

FROM nginx

MAINTAINER beizhu

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

• FROM nginx – 打包容器的底层来刚才先拉取的nginx
• MAINTAINER beizhu – 备注
• RUN rm /etc/nginx/conf.d/default.conf – 删除目录下的default.conf文件
• ADD default.conf /etc/nginx/conf.d/ – 将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置
• COPY dist/ /usr/share/nginx/html/ – 将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下上一步root地址

构建vue项目

npm run build

• 项目目录
  

打包docker镜像image

docker build -t zz-mms-tx .

• . – 表示打包本目录下文件必填
• -t – 给镜像取名
• 打开docker桌面软件查看是否打包成功

• Images – 镜像
• Containers / Apps – 容器，运行镜像的东西

本地试运行

docker run -d -p 9090:80 --name mms-tx zz-mms-tx:latest

• -d – 后台方式启动

• -p – 端口映射 9090本地端口 80docker端口

• --name mms-tx zz-mms-tx:latest – mms-tx给容器起名 zz-mms-tx:latest要运行的镜像名:版本不填就是latest

• 本地访问127.0.0.1:9090发现正常访问
  

部署到服务器

• 通过阿里云镜像服务中转（上篇文章已讲）
• 通过自建镜像服务中转（harbor部署以后讲解）
• 手动部署（本文使用方法）

将镜像压缩成tar文件

docker save zz-mms-tx > zz-mms-tx.tar

• save – 压缩镜像
• zz-mms-tx – 待压缩的镜像名
• zz-mms-tx.tar – 压缩后的文件名
• 也可以将container（容器）commit成新镜像，然后压缩新镜像
• 打包后tar文件会出现在访问目录中，例如在vue项目目录中打包，就出现在vue项目根目录

复制zz-mms-tx.tar到目的主机下任意文件下

• 一般放在/usr目录下
• 使用sftp工具复制，如 Termius ，SecureCRT
• Termius可以直接拖拽，无命令

恢复zz-mms-tx.tar为镜像

cat zz-mms-tx.tar | docker load

运行容器

docker run -d -p 80:80 --name mms zz-mms-tx:latest

外网访问 外网IP:80 访问成功，部署完成

参考文档

docker–部署vue项目
Docker容器迁移到其他服务器的5种方法详解
将Docker容器转移至另一服务器