windows下利用Docker部署Vue前端项目
利用Dockerfile方式制作镜像,基础镜像选用最简单的nginx:latest
- 安装windows版本的Docker Decktop
- 在vue项目中创建Dockerfile配置文件,与vue项目打包后的dist文件夹同级即可。Dockerfile的内容如下:
# 该镜像是基于 nginx:latest 镜像构建的
FROM nginx:latest
# 将项目根目录下 dist 文件夹下的所有文件复制到镜像中 的/usr/share/nginx/html/ 目录下,在nginx的default.conf配置文件中也可看到相关路径配置。
COPY dist/ /usr/share/nginx/html/
# 将 nginx 目录下的 default.conf 文件复制到 etc/nginx/conf.d/default.conf,用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
3.创建nginx的配置文件nginx/default.conf, dist文件夹同级即可,内容如下:
gzip on; #开启或关闭gzip on off
gzip_disable "msie6";
gzip_buffers 4 16k;
gzip_comp_level 8;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
server {
listen 10086;
server_name localhost;
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
add_header 'Access-Control-Allow-Headers' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Origin' '*';
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /prod-api/xx {
proxy_pass http://ip:port/xx;
}
location /prod-api/xxx {
proxy_pass http://ip:port/xx;
}
#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 Desktop,选用 Nginx 镜像为基础来构建vue应用镜像,所以先拉取Nginx镜像到本地,在vscode命令窗口输入如下命令:
docker pull nginx
- 基于nginx:lastet基础镜像构建Vue应用镜像,命令如下:
docker build -t kbs-ui-docker:1.0.0 .
- 基于创建的kbs-ui-docker:1.0.0镜像启动一个 Docker 容器,-v 挂载本地的nginx配置方便修改代理,–restart=always设置容器自启动 命令如下:
docker run -p 10086:10086 -d --name xxx -v E:\\project\\docker\\front\\conf:/etc/nginx/conf.d --restart=always xxx-docker:1.0.0
- 将镜像保存成 tar 归档文件发布版本给到实施人员、命令如下:
docker save -o xxx.tar xxx-docker:1.0.0
- 具体实施人员将打好的tar包导入docker中,命令如下:
docker load -i xxx.tar
- 制作一个docker-build.bat文件方便打包更新tar包,内容如下:
@REM 构建镜像
docker build -t xxx-docker:1.0.0 .
@REM 生成tar包
docker save -o xxx-docker.tar xxx-docker:1.0.0