Windows10 docker 部署Vue项目

docker 部署Vue项目

---

简介

前置条件如下：

1. Vue build后的静态文件
2. Dockerfile文件编写
3. Nginx下 conf文件配置

---

一、Vue build后的静态文件

示例：Vue项目打包就不赘述，下面展示下我这边vue项目打包后的文件：

打包后的文件放在自己定义的文件夹下，后续添加Dockerfile文件和conf文件，注意Dockerfile文件名必须大写，否则执行命令找不到文件，conf文件名可自己定义。

二、Dockerfile文件编写

配置文件内容如下（示例）：

#标准的nginx镜像,我们需要基于标准的nginx镜像制作自己的镜像
FROM nginx 
#设置生成镜像的Author 
MAINTAINER sugar 
#拷贝当前目录的文件到指定文件夹下，改文件夹为镜像中的文件夹
COPY . /usr/share/nginx/html/ 
#拷贝.conf文件到镜像下，替换掉原有的nginx.conf
COPY sugar.conf /etc/nginx/nginx.conf 
#输出完成
RUN echo 'build img ok!' 

三、Nginx下 conf文件配置

配置文件内容如下（示例）：

worker_processes auto;

events {
    worker_connections 1024;
}

http {
 include             mime.types;
 
 default_type        application/octet-stream;
 
 sendfile            on;
 
 keepalive_timeout 65;
 
 client_max_body_size 20m;
 
 ###### blogapp begin #######
    server {
        listen       80;
        server_name  localhost;
       
	    gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
		
		location / {
			root /usr/share/nginx/html; #配置Vue项目根路径,与
			index index.html index.html; #配置首页
			try_files $uri $uri/ /index.html; #防止刷新报404
        }


        location /EappPM-SV/ {
            proxy_pass   http://172.17.0.3:8080; 
	        proxy_set_header  X-Real-IP  $remote_addr; 
	        proxy_set_header  Host $host:$server_port;
	        client_max_body_size 200m;
	    }

        #error_page 404 /404.html;
            #location = /40x.html {
        #}

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

注意nginx监听的是虚拟机的端口号，代理到对应服务的虚拟ip和端口号

部署

1、进入静态文件目录
2、 构建镜像

docker build -t eapppm-sv . 
#-t  为容器重新分配一个伪输入终端，通常与 -i 同时使用；
#sugar   为镜像名称
#.  该点为当前目录

3、启动容器

docker run --name EappPM-SV-it -p 8085:80 eapppm-sv
#--name EappPM-SV--name为配置容器名称，空格后跟容器名称
#-it  容器的 Shell 映射到当前的 Shell，然后你在本机窗口输入的命令，就会传入容器。
#-p  为配置容器端口映射，容器中的80端口映射到本机的9002端口（默认容器内端口为80）
#eapppm-sv  镜像名称
#**在执行当前命令时，会进行容器日志打印，使用ctrl+c可跳出，同时容器会终止，需重新启动容器，否则，如果不需要查看日志，可以使用-d参数**

操作完成，vue项目即可访问