Nginx 容器挂载，与代理

一、Nginx 容器挂载，发布vue项目

1、 利用docker拉取nginx镜像

docker pull nginx

2、 创建需要挂载的相应的挂载目录

mkdir -p /home/vue_pro/conf

mkdir -p /home/vue_pro/html

mkdir -p /home/vue_pro/conf.d

mkdir -p /home/vue_pro/logs

将build的vue项目dist下的文件拷贝到/home/vue_pro/html中即可

3、创建conf/nginx.conf文件（这里我用的是官方默认的配置文件，可以替换成自己的配置文件）

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;


    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

4、 创建conf.d/default.conf文件

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

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  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;
    #}
}

5、挂载的文件路径

获取docker 镜像中nginx的文件路径（这里是我提前找好的，可以直接套用。如果想要自己尝试去寻找，可以先将镜像启动后，通过docker exec -it nginx bash命令进入到容器内部自己寻找）

html文件路径： /etc/nginx/html
配置文件路径：/etc/nginx/nginx.conf
 /etc/nginx/conf.d/default.conf
日志存放路径：/var/log/nginx

6、第六步 运行docker run命令启动容器 并将文件挂载出来

docker run -it --name=vue_nginx --privileged=true  -p 80:80 -v /home/vue_pro/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/vue_pro/html:/usr/share/nginx/html -v  /home/vue_pro/logs:/var/log/nginx -v /home/vue_pro/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx

IP+端口

完成！！！

如果需要修改挂载下的文件，每次修改后，需要进入容器中重新加载：

nginx -s reload

二、Nginx 容器挂载，代理其他容器（nodejs）

不满足上面的需求，进一步使用nginx的容器去代理nodejs容器容器之间的通信方式使用link，还可以使用更加方便的bridge，在其他博客介绍

1、建一个文件夹，准备好文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-coUGhMEZ-1621996855937)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20210524134738344.png)]

（1）server.js

监听80端口，并且访问ip/api，返回Hello World

const express = require('express');

// Constants
const PORT = 8081;
const HOST = '0.0.0.0';

// App
const app = express();
app.get('/api', (req, res) => {
  res.send('Hello World');
});

app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);

（2）package.json

{
  "name": "docker_web_app",
  "version": "1.0.0",
  "description": "Node.js on Docker",
  "author": "longlong <*****@example.com>",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.1"
  }
}

(3) Dockerfile

FROM node:12

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 8081
CMD [ "node", "server.js" ]

(4) .dockerignore

node_modules
npm-debug.log

2、构建镜像

docker build -t node_web_app .

查看我们新的nodejs镜像

3、停止运行上面的nginx容器

docker stop [容器id]

4、重新运行nginx容器

docker run -it --name=vue_nginx --privileged=true  -p 80:80 -v /home/vue_pro/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/vue_pro/html:/usr/share/nginx/html -v  /home/vue_pro/logs:/var/log/nginx -v /home/vue_pro/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx
--link node_web_app:node_web_app

注意：

• 第一步要先运行nodejs容器，再运行nginx容器
• –link node_web_app:node_web_app 如果找不到node_web_app容器，把这句话换成“–link [nodejs 容器id]:node_web_app”

5、修改nginx配置文件

default.conf

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

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        # root   /home/vue_pro/html;
        index  index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
	# ====================== 看这里 =======================
    location  ^~ /api {
        proxy_pass   http://node_web_app:8081/api;
    }
    
}

进入nginx容器：

nginx -s reload

测试nginx容器能够访问到nodejs容器

curl node_web_app:8081/api

6、外网访问

访问:http://47.____.82/

访问:http://47.___.82/api/

![image-20210524140420817](https://gitee.com/diyunlong/images-lib/raw/master/img/20210524140420.png