Docker: 部署 Nginx 反向代理

文章目录

Docker: 部署 Nginx 反向代理环境准备实验一：容器内部署 Nginx 静态资源服务器

目录结构静态资源准备Docker Compose 配置nginx 配置启动 & 效果 实验二：Nginx 反向代理本机服务

准备 Express 服务修改 Docker Compose 配置修改 nginx 配置测试 实验小结参考连接完整代码示例

环境准备

要求安装下列服务

DockerDocker Compose(Windows/MacOS 下 Docker Desktop 自带，可以不用额外安装)Node.js(用于启动一个 express 后端服务，如果有其他如 java+tomcat、golang 等服务的话可以不用下载) 实验一：容器内部署 Nginx 静态资源服务器

第一个实验的目标是在 docker 内启动一个 nginx 容器，访问并返回一个 html 页面

目录结构

.
├── Dockerfile
├── dist
│   └── index.html
├── docker-compose.yml
└── nginx.conf

静态资源准备

先准备一个 index.html

/dist/index.html

  
    
    
    
    
  
  
    
/dist/index.html by nginx container
  

Docker Compose 配置

接下来准备一个 docker-compose.yml 配置项

/docker-compose.yml

version: '3.7'

services:
  nginx:
    image: nginx
    ports:
      - 8991:80
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./dist:/usr/share/nginx/html
    command: /bin/bash -c "nginx -g 'daemon off;'"

从 volumes 可以看到我们将本地的 nginx.conf 来取代默认配置文件，并将静态文件目录 dist 映射到容器内

nginx 配置

最后根据 docker-compose 的端口映射，指定 nginx 服务监听的端口(docker 将本地 8991 端口映射到容器内的 80 端口，因此 nginx 配置应该设置为 80 端口；上面静态资源目录 ./dist 映射到 /usr/share/nginx/html，作为容器内的静态资源根目录)

/nginx.conf

events {
    worker_connections 1024;
}

http {
    server {
        listen          80;
        server_name     localhost;

        location / {
            root        /usr/share/nginx/html;
        }
    }
}

启动 & 效果

最后启动服务检查效果

docker-compose up -d

-d 表示启动在后台如果没有事先拉 nginx 镜像，会先自动拉根据 docker-compose.yml 启动容器根据 nginx.conf 启动 nginx 服务

最后访问 8991 应该就能看到页面了

实验二：Nginx 反向代理本机服务

实验二的目标是利用 nginx 容器反向代理回本地端口上的服务

准备 Express 服务

本篇使用 express 启动一个后端服务，其他任意一个服务也都可以

server.js

const express = require('express');

const app = express();

const port = 8080;

app.get('/', (req, res) => {
  res.send('Response from localhost:8080');
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`);
});

然后在本地安装依赖

npm init -y
npm install express
npm install nodemon -D

添加启动脚本

package.json

{
  // ...
  "scripts": {
    "start": "nodemon server.js"
  }
}

启动服务

npm run start

在本地访问端口测试服务是否启动成功

修改 Docker Compose 配置

实验二相较于实验一只需要增加一个新的端口映射即可

ports:
  - 8992:8999

完整的配置项

docker-compose.yml

version: '3.7'

services:
  nginx:
    image: nginx
    ports:
      - 8991:80
      - 8992:8999
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./dist:/usr/share/nginx/html
    command: /bin/bash -c "nginx -g 'daemon off;'"

修改 nginx 配置

由于我们为容器添加了一个新的端口映射，我们只需要在 nginx 内多配置一个 server 即可

nginx.conf

events {
    worker_connections 1024;
}

http {
    server {
        listen          8999;
        server_name     localhost;

        location / {
            proxy_pass  http://host.docker.internal:8080;
        }
    }
}

注意这里使用一个特别的域名 host.docker.internal，docker 会自动将发向该 host 的请求转发到本地机器上，也就能够访问到容器外部的本地服务了

测试

最后我们在本地访问 8992 端口，会先访问到 nginx 容器的 8999，并透过 proxy_pass 重新转发会本机上的 8080 端口

实验小结

本篇实践了以下技术

使用 docker-compose 启动 docker 容器使用 nginx 进行静态资源分发 & 服务转发使用特殊域名 host.docker.internal 从容器内部指向本地机器

---

参考连接

Title	link
Use Docker Compose - docker docs	https://docs.docker.com/get-started/08_using_compose/
nginx - DockerHub	https://hub.docker.com/_/nginx
Nginx 实战: 部署 React 前端项目	https://blog.csdn.net/weixin_44691608/article/details/120624970

完整代码示例

https://github.com/superfreeeee/Blog-code/tree/main/deployment/docker/docker_http_proxy_nginx