windows开发环境下docker部署vue项目
此文章主要介绍windows开发环境下docker部署vue项目。一、相关软件vscode、Windows版docker(安装教程见window10家庭版安装docker)、vue项目(自行搭建或使用vue-cli搭建皆可,保证可以正常打包运行即可)二、具体步骤1.首先使用vscode打开vue项目。2.本文选用 Nginx 镜像为基础来构建vue应用镜像,所以先拉取Nginx镜像到本地,在vsc
此文章主要介绍windows开发环境下docker部署vue项目。
一、相关软件
vscode、Windows版docker(安装教程见window10家庭版安装docker)、vue项目(自行搭建或使用vue-cli搭建皆可,保证可以正常打包运行即可)
二、具体步骤
1.首先使用vscode打开vue项目。
2.本文选用 Nginx 镜像为基础来构建vue应用镜像,所以先拉取Nginx镜像到本地,在vscode命令窗口输入如下命令:
docker pull nginx
可以看到拉取到的镜像为nginx:latest,也可打开docker desktop查看。
3.由于选用Nginx,所以前端需增加Nginx的相关配置文件,在项目根目录下创建 nginx 文件夹,该文件夹下新建 default.conf配置文件。
配置文件内容如下(Nginx相关配置说明可自行百度,此处不再介绍)
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 8086;
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;
}
#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;
}
}
4.在项目根目录下创建docker配置文件 Dockerfile 文件。
文件内容如下:
FROM nginx:latest
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
(1)FROM nginx:latest
表示该镜像是基于 nginx:latest 镜像构建的。
(2)COPY dist/ /usr/share/nginx/html/
表示将项目根目录下 dist 文件夹下的所有文件复制到镜像中 的/usr/share/nginx/html/ 目录下,在nginx的default.conf配置文件中也可看到相关路径配置。
(3)COPY nginx/default.conf /etc/nginx/conf.d/default.conf
表示将 nginx 目录下的 default.conf 文件复制到 etc/nginx/conf.d/default.conf,用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。
5.打包vue项目,本文使用yarn build
命令进行项目的打包。
6.打包完成之后,使用docker build -t test-docker:1.0.0 .
命令来构建 Vue 应用镜像,其中-t 是镜像的名字及标签,通常 name:tag 或者 name 格式,.是基于当前目录的 Dockerfile 来构建镜像。
构建成功后可在docker desktop中查看构建好的镜像。
也可通过docker命令docker image ls
查看已有镜像。
7.基于创建的test-docker:1.0.0镜像启动一个 Docker 容器,执行如下命令
docker run -p 3060:8086 -d --name vueApp test-docker:1.0.0
(1)-p 3060:8086
表示端口映射,将宿主的3060端口映射到容器的8086端口(此端口为nginx所配置端口)。
(2 )-d
表示后台运行容器,并返回容器ID。
(3)--name vueApp
表示容器名称。
(4)test-docker:1.0.0
表示基于的镜像名称。
启动容器成功后可在docker desktop中查看。
也可通过docker命令docker ps
查看。
8.在浏览器中访问:http://localhost:3060,访问成功表示部署完成。
9.将镜像保存成 tar 归档文件发布版本给到实施人员,命令如下:
docker save -o test-docker.tar test-docker:1.0.0
(1)-o
后面为存储的路径
注:
实际情况中通常前端存在静态配置文件需要实施人员去更改,在启动容器时可增加参数将本地宿主机的磁盘路径映射到镜像中,具体命令如下:
docker run -p 3070:8089 -v F:\public\static:/usr/share/nginx/html/static -d --name zongguiv zonggui-v
(1)-v
表示绑定一个卷
上述命令表示将本机的F:\public\static
与容器中/usr/share/nginx/html/static
路径进行映射绑定,之后即可修改F:\public\static
下的配置文件。/usr/share/nginx/html/static
路径下为前端配置文件所在路径(根据nginx配置文件或者Dockerfile配置文件可知前端发布在/usr/share/nginx/html
路径下)。
更多推荐
所有评论(0)