1、服务器拉取nginx镜像

2、打包vue项目，上传到服务器（目录事先创建好）

3、 在dist的同级目录下（/mydata/xxx/）创建和配置default.conf和Dockerfile

default.conf:
 

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
#后端接口地址
    location /api/ {
        proxy_pass http://*****:8080/;
    }

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

Dockerfile:

# 基础镜像使用Nginx
 FROM nginx
# # 作者
 MAINTAINER ***
# # 添加时区环境变量，亚洲，上海
 ENV TimeZone=Asia/Shanghai
# # 将前端dist文件中的内容复制到镜像/usr/share/nginx/html/目录下
 COPY ./dist/  /usr/share/nginx/html/
#将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置
 COPY default.conf /etc/nginx/conf.d/
# # 暴露端口
 EXPOSE 80

4、在/mydata/xxx/目录下构建docker镜像

注意：注意不要少了最后的“.”   -t是给镜像命名，. 是基于当前目录的Dockerfile来构建镜像

docker build -t myapp .

5、启动基于刚刚创建的镜像的容器

docker run -d -p 8021:80 --name xx myapp

说明：

docker run：基于镜像启动一个容器
 
-d：后台方式启动
 
-p 8021:80: 端口映射，将宿主机的8021端口映射到容器的80端口
 
--name：容器名，我的叫xx
 
myapp：要启动的镜像名称

6、docker ps查看容器是否启动 

7、浏览器输入地址访问vue项目

 

参考：Docker容器部署前端Vue服务——手把手教学_春夏丶秋冬的博客-CSDN博客