win10环境docker部署vue项目

1,050 阅读2分钟

1.安装docker for windows

docs.docker.com/desktop/win…

2.配置文件

将打包好的vue项目放在一个目录下

image.png

新建 dockerfile 文件

dockerfile 配置:

#从docker官网拉取标准的nginx镜像,我们需要基于标准的nginx镜像制作自己的镜像
FROM nginx
#拷贝当前目录的文件到指定文件夹下,改文件夹为镜像中的文件夹
COPY ./dist  /usr/share/nginx/html
#拷贝nginx.conf文件到镜像下,替换掉原有的nginx.conf
COPY ./nginx.conf /etc/nginx/nginx.conf 
#输出完成标志
RUN echo 

新建 nginx.conf 文件

nginx.conf 配置:

worker_processes  1;
events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        #这里也稍微进行了修改,表示前端部署到容器中的端口,在docker部署时端口对应这里即可。
        listen       80;
        server_name  localhost;
		
        location /proxy {
            root /usr/share/nginx/html/;                    
            proxy_pass http://host.docker.internal:8079;    
            rewrite "^/proxy/(.*)$" /$1 break;
        }
        location / {
            root   /usr/share/nginx/html/;
            try_files $uri $uri/ /html/index.html last;
            index  index.html index.htm;
        }
    }
}

3.生成镜像

配置完成后,在当前文件夹下,文件夹处(该文件夹因包含dist、Dockerfile、nginx.conf)打开命令行执行下面的命令即可生成镜像文件,镜像生成后可以docker images查看新生成的镜像文件。

#-t指定一个镜像的名字,譬如 nginx-image,注意最后的‘.’不能省略
docker build -t nginx-image .

执行成功后,输入docker images 可以查看镜像

4.启动docker容器

通过镜像生成并运行一个容器

-d

表示后端运行

--name

表示服务的名字

-p

表示映射的端口(前者是前端的访问端口。后者是docker容器的服务端口)

最后跟创建所需镜像。

# -p :配置端口映射,格式是外部访问端口:容器内端口
# -d :后台运行  
# --name : 给容器取名
# docker run -p 8089:80 -d --name [容器名字][镜像名字]
 docker run -p 8099:80 -d --name vue-project nginx-image

启动完成后执行docker ps 可以查看当前正在运行的容器