基本步骤
- 在本地打包vue项目成docker镜像（image）
- 上传至服务器加载镜像
拉取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
-
项目目录
vue项目目录.png
打包docker镜像image
docker build -t zz-mms-tx .
-
.-- 表示打包本目录下文件必填 -
-t-- 给镜像取名 - 打开
docker桌面软件查看是否打包成功
镜像.png
-
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发现正常访问
容器.png
部署到服务器
- 通过阿里云镜像服务中转（上篇文章已讲）
- 通过自建镜像服务中转（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
