docker 运行nginx 挂载本地配置 Are you trying to mount a directory onto a fil docker nginx挂载目录

docker挂载nginx1.20.1部署vue以及静态图片服务器

前言

本文前提是在服务器安装了docker的前提之下，如何安装docker，请大家自行百度！！！

---

一、docker部署在当下已经是一种趋势的，你不会还在用最原始的方法安装nginx吧？

二、话不多说、让我们开始。

1.下载一个nginx:1.20.1的docker镜像

docker pull nginx:1.20.1

2.先启用一个测试容器

docker run -d  -p 80:80 --name nginx-test nginx:1.20.1

3.创建需要挂载的宿主机文件夹data

mkdir -p /data

4.复制容器内的nginx文件夹到宿主机的 /data 文件夹下，覆盖/data/nginx文件夹

docker cp nginx-test:/etc/nginx /data

5.创建需要挂载的宿主机文件夹,这里的www文件夹是存放静态文件的，logs是存放日志文件，这两个文件夹后面会用到

mkdir -p /data/nginx/logs
mkdir -p /data/nginx/www

6.停止之前测试的nginx容器，要不重新启动新容器端口80会被占用

docker stop nginx-test

7.启动新的nginx容器，并挂载宿主机配置文件以及日志和静态文件夹，如果不想以80端口启动的话需要修改/data/nginx/conf.d/default.conf下的默认80改成想要的端口即可

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

注：参数说明
-v -v /data/nginx/www:/usr/share/nginx/html 挂载容器内的静态文件夹到宿主机/data/nginx/www下
-v /data/nginx/nginx.conf:/etc/nginx/nginx.conf 挂载容器内的配置文件到宿主机/data/nginx/nginx.conf下
-v /data/nginx/logs:/var/log/nginx 挂载容器内logs文件到宿主机/data/nginx/logs下

8.下面给出我的default.conf配置内容跟如下

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;
    location /upload/ {
        root   /usr/share/nginx/html/;
	autoindex on;
    }
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
	#如果vue-router使用的是history模式，try_files $uri $uri/ /index.html; 必须配置
	try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

参数说明：

location /upload/ {
 root /usr/share/nginx/html/;
 autoindex on;
 }

这段配置是图片代理：
指定静态文件带http://ip/upoad/a.jpg访问的图片，比如说访问http://119.3.83.230/upload/test.jpeg 这就是访问宿主机/data/nginx/www/upload 文件夹下的test.jpeg图片

location / {
 root /usr/share/nginx/html;
 index index.html index.htm;
 #如果vue-router使用的是history模式，try_files $uri $uri/ /index.html; 必须配置
 try_files $uri $uri/ /index.html;
 }

这段配置用来部署前后端分离的vue项目：
访问http://ip，会显示/data/nginx/www下的index.html，即这个www下文件夹里是vue打包后dist里的全部文件，特别注意的是不能直接放入整个dist文件夹，而是dist里的全部文件

---

9.需要使用和我一样的default.conf,复制上面default.conf内容修改改/data/nginx/conf.d/default.conf即可

vim /data/nginx/conf.d/default.conf

10.重启nginx容器就可以了

docker restart nginx

11.测试下图片服务器以及vue首页

1.vue项目dist文件夹下内容如下

直接访问服务器ip返回后的vue首页

2. 图片服务器文件夹如下

访问ip/uload/test.jpeg返回的图片

总结

今天的docker挂载nginx部署vue以及静态图片服务器就讲到这里，有问题的小伙伴留言。