docker搭建vue+nginx部署

Vue+nginx部署

1.首先安装ningx镜像

 　　

2.将nginx关键目录映射到本机

  首先在本机创建nginx的文件存储目录

    

 

 　 

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

　　logs: nginx日志目录

　　conf: nginx配置文件目录

 

2.1 如果有nignx配置文件 直接将nginx.conf 放在本机conf下跳转至步骤2.3，如果没有跳转至步骤2.2

 

2.2 运行nginx容器

 　　

 

 　　将nginx-test容器配置文件copy到本地  （容器id:容器目录 本机目录）

        

　　然后删除nginx-test 容器

 

nginx.conf中需要配置监听端口，以及指定项目根目录

　　

 

 

2.3 创建新容器nginx-web,并将www,logs,conf目录映射到本地

 　　

　　docker run -d -p 80:80 --name nginx-web -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

　　注意： -v 前面的本机目录 要使用绝对路径

 

3.拷贝vue项目到主机www目录下

将npm vue build出来的 dist目录下的 index等所有文件 拷贝到nginx/www目录下

 

4. 输入IP地址验证网站

访问主机ip:80 即可正常访问vue项目