Docker 部署 vue 项目的详细流程

docker pull nginx

mkdir -p /usr/local/nginx

server {
    listen       80;
    server_name  localhost;
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    #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;
    }
}

npm run build  # 执行该指令后，在项目根目录中生成dist文件夹

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
COPY ./default.conf /etc/nginx/conf.d/default.conf

docker build -t nginx_vue3 .
# 查看镜像：docker images

docker run -d -p 80:80 --name nginx -v /usr/local/nginx/dist:/usr/share/nginx/html --restart=always nginx
-d # 后台运行容器
-p # 将宿主机的80端口映射到容器的80端口
--name # 指定容器的名称
-v 挂载宿主机的目录或文件 到 容器中的目录或文件，实现文件数据同步
----restart=always  # 将容器设置为服务自启动（运行docker服务时，容器也就会跟着启动）
# 最后的nginx_vue3为创建的镜像名称