1、使用Docker和Nginx部署Vue项目的步骤

1、准备好VUE项目，已打包编译

2、docker环境已完成安装

3、本地环境上创建nginx目录，下包括conf，html，logs目录。用于容器映射（其实是方便修改文件，因为在容器中不方便修改，在修改后restart容器即可加载）

4、拉取nginx镜像

5、创建容器并映射至之前的目录

6、启动容器

7、验证

2、详细步骤

2.1、准备Vue项目

确保Vue项目已构建完成，生成静态文件。在项目根目录运行以下命令：

npm run build

2.2、docker环境已安装

docker info

2.3、创建本地映射目录

在本地环境中自定义一个目录：示例是在/home/d_app/nginx

# 容器映射目录
mkdir -p /usr/share/nginx/conf
mkdir -p /usr/share/nginx/html
mkdir -p /usr/share/nginx/logs

在conf目录下创建配置文件：

# conf配置文件
touch /usr/share/nginx/conf/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 {
        listen     8080;
        server_name  localhost;

        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
	    }
        # 代理转发请求至网关，prod-api标识解决跨域问题
	    # location /prod-api/ {
        #    proxy_pass http://0.0.0.0:9999/;
	    # }
    }
}

2.4、拉取镜像

# 拉取镜像
docker pull nginx

# 查看镜像
docker images

2.5、创建容器并启动

docker run -it -d \
--name nginx \
-p 8080:8080 \
-v /usr/share/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /usr/share/nginx/html:/usr/share/nginx/html \
-v /usr/share/nginx/logs:/usr/share/nginx/logs \
--restart=always \
nginx 

• 重新启动新的容器
  下面代码-v前面被处理过，可直接复制使用，\ 表示换下一行继续
  -d: 后台启动
  -p: 宿主机的80端口映射容器的80端口
  -v: 挂载宿主机文件或目录到容器，分别表示配置文件和nginx工作空间目录的映射，冒号左边是宿主机，右边是容器的，这样修改宿主机的配置文件和工作空间就可以同步到容器
  –restart=always: 伴随docker重启自动重启该容器

2.6、创建容器并启动

# 查看容器

docker ps -a

# 查看nginx启动日志

docker logs nginx

2.7、启动、关闭、重启nginx

# 启动
docker start nginx

# 停止
docker stop nginx

# 重启
docker restart nginx

2.8、验证部署

访问http://localhost:8080，确认前端应用正常运行。

3、注意事项

• 确保dist目录已生成且包含index.html。
• 若需支持SPA路由，必须配置Nginx的try_files规则。

• 拉取镜像时，有可能会报错：Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection