当前位置:   article > 正文

Nginx 容器挂载,与代理_基于nginx镜像启动名为testnovol的容器时,将myvol挂载到容器testnovol的/a

基于nginx镜像启动名为testnovol的容器时,将myvol挂载到容器testnovol的/app

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

1、 利用docker拉取nginx镜像

docker pull nginx
  • 1

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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

将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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

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;
    #}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

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
  • 1
  • 2
  • 3
  • 4

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
  • 1

IP+端口

在这里插入图片描述

完成!!!

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

nginx -s reload
  • 1

二、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}`);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

(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"
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

(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" ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

(4) .dockerignore

node_modules
npm-debug.log
  • 1
  • 2

2、构建镜像

docker build -t node_web_app .
  • 1

查看我们新的nodejs镜像

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

docker stop [容器id]
  • 1

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
  • 1
  • 2

注意:

  • 第一步要先运行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;
    }
    
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

进入nginx容器:

nginx -s reload
  • 1

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

curl node_web_app:8081/api

  • 1
  • 2

image-20210524140310849

6、外网访问

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

image-20210524141830248

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

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

image-20210524140447553

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/196138
推荐阅读
相关标签
  

闽ICP备14008679号