Vue项目部署到Docker（Nginx）

Vue项目部署到Docker

1.安装nginx docker镜像

使用以下命令安装nginx

docker pull nginx

安装完成后查看镜像

docker images

使用docker命令创建nginx容器实例

docker run -id --name nginx -p 80:80 nginx

使用本地访问，使用服务器ip地址进行访问，出现以下页面说明成功

2.使用nginx代理vue

在服务器root目录，创建以下文件，用于nginx配置文件映射

mkdir -p /root/nginx/www /root/nginx/logs /root/nginx/conf

www: nginx存储网站网页的目录

logs: nginx日志目录

conf: nginx配置文件目录

将刚才启动的nginx容器配置文件复制到刚才创建的文件
（容器id：刚才创建的nginx容器id，可通过docker ps -a命令进行查看）

docker cp nginx容器id:/etc/nginx/nginx.conf /root/nginx/conf

停止刚才的nginx容器，因为以下容器会占用80端口，不然会出现端口占用问题而导致新的容器创建失败

docker stop nginx容器id

docker rm nginx容器id

再次创建nginx容器

docker run -d -p 80:80 --name nginx-vue -v /root/nginx/www:/usr/share/nginx/html -v /root/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /root/nginx/logs:/var/log/nginx nginx

启动容器

docker start nginx-vue

在vue项目中使用以下命令，创建dist文件夹

npm run build

出现dist文件夹后，把dist文件夹里的所有文件（所有），复制到刚才创建的
/root/nginx/www目录下

完成后重新访问本服务器的ip地址（如果在创建容器时-p命令有修改对外端口号，访问时需要在ip后面加上对外端口）
成功！