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后面加上对外端口)
成功!
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐