1.安装docker for windows
2.配置文件
将打包好的vue项目放在一个目录下
新建 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
可以查看当前正在运行的容器