标签：容器 web vue nginx 静态 apps Nginx docker

一、Docker 搭建 Nginx 

参考

https://www.cnblogs.com/mangoubiubiu/p/16796373.html

二、部署 静态vue项目

1、将你打好的包上传至服务器 

2、修改nginx配置 

           #管理台
               location ~ /{
                root /apps/web/zeal-admin/dist;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
               }

3、访问链接 http://192.168.56.15/index

你以为这就完事了？ 不对  这个时候你会很惊喜的发现 报 404

为什么会报404?

静态vue 项目 虽然放到了宿主机的目录 ， 但是容器里面这个目录有吗 ？ nginx配置  root /apps/web/zeal-admin/dist; 是映射的容器里面的文件路径，你又没有配数据卷映射  容器里面当然没有这个路径

4、配置数据卷映射 映射静态 vue项目

docker run -p 80:80 --name nginx \
 -v /apps/docker/nginx/html:/usr/share/nginx/html \
 -v /apps/docker/nginx/logs:/var/log/nginx \
 -v /apps/docker/nginx/conf:/etc/nginx \
 -v /apps/web/images:/apps/web/images \
  -v /apps/web/zeal-admin:/apps/web/zeal-admin \
 -d nginx:1.10

再次访问   http://192.168.56.15/index

注意 如果你的 css等样式没有加载  要在http块那里配上以下2个配置

 include /etc/nginx/mime.types;

default_type application/octet-stream;

三、映射静态资源

如果静态资源和vue项目 在一台nginx上同时代理 建议静态资源和 vue项目 各用一个端口，为什么要各用一个端口 因为如果vue项目是管理台这种的话  没有登录情况访问任意地址就被转发到了登录页  静态资源就访问不到了

1、将你的静态资源包上传至服务器 

略过

2、修改nginx配置 

server {
            #监听的端口,这里为80
                listen       8078;
                #server_name就是域名,
                server_name  localhost;
              #静态资源
              location ~ /images/{
               root /apps/web/;
               autoindex on; #列出images目录
              }

        }

3、访问链接 http://192.168.56.15:8078/images/

这时候你会发现 报错了

无法访问此网站

192.168.56.15 拒绝了我们的连接请求。

 为什么呢 ？ 因为docker 要配端口映射

docker run -p 80:80 -p 8078:8078 --restart=always --name nginx \
 -v /apps/docker/nginx/html:/usr/share/nginx/html \
 -v /apps/docker/nginx/logs:/var/log/nginx \
 -v /apps/docker/nginx/conf:/etc/nginx \
 -v /apps/web/images:/apps/web/images \
  -v /apps/web/zeal-admin:/apps/web/zeal-admin \
 -d nginx:1.10

 SUCCESS !!!!!

四、注意：每次修改Nginx配置 要重启容器 

docker stop 容器id前三位   停掉容器

docker rm 容器id前三位      移除容器

docker start 容器id前三位    启动容器

docker restart 容器id前三位  重启容器

 

 

 

 

标签：容器,web,vue,nginx,静态,apps,Nginx,docker
From： https://www.cnblogs.com/mangoubiubiu/p/17084471.html