背景
随着互联网的快速发展，前端开发变得越来越重要，前端工程师承担了越来越多的工作。在前后端分离的架构中，前端的工作不再只是制作页面，还涉及到部署、优化等。其中，Nginx 反向代理是前端工程师必须掌握的重要技能之一。
然而，搭建 Nginx 反向代理环境需要配置复杂的参数，容易出错。而 Docker 的出现可以方便地搭建环境，并且避免了环境不一致的问题。本文将介绍如何通过 Docker 搭建 Nginx 反向代理环境，以及如何配置反向代理。
环境准备
在开始之前，需要先安装好 Docker 和 Docker Compose。
创建 Docker-compose 配置文件
我们需要创建一个 docker-compose.yml 文件来描述反向代理环境的组成。
version: '3'
services:
nginx:
image: nginx
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf
- ./nginx/conf.d:/etc/nginx/conf.d
ports:
- "80:80"
depends_on:
- api
api:
image: my-api
environment:
- VIRTUAL_HOST=my-api.example.com这个文件描述了两个容器：
- nginx：使用官方的 Nginx 镜像，将配置文件挂载到容器内部
/etc/nginx目录下，并将容器的 80 端口映射到主机的 80 端口。另外，指定了该容器依赖于api容器。 - api：使用我们自己的镜像，设置环境变量
VIRTUAL_HOST为my-api.example.com，这个变量会被 Nginx 容器通过反向代理使用。
需要注意的是，VIRTUAL_HOST 变量是通过 jwilder/nginx-proxy 这个镜像来实现的，它可以自动感知容器的环境变量，从而配置相应的反向代理规则。
编写 Nginx 配置文件
在 nginx 目录下，创建 nginx.conf 文件，并写入以下内容：
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
server_names_hash_bucket_size 128;
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;
tcp_nodelay on;
keepalive_timeout 65;
include /etc/nginx/conf.d/*.conf;
}这个配置文件包含了基本的 Nginx 配置，其中要注意：
worker_processes参数为自动选择 CPU 核数作为 worker 进程数。events块中的参数可以根据实际情况进行调整。
接着，在 nginx/conf.d 目录下，创建一个以 VIRTUAL_HOST 变量为名的 .conf 文件，例如 my-api.example.com.conf，并写入以下内容：
upstream my-api {
server api:8080;
}
server {
listen 80;
server_name my-api.example.com;
location / {
proxy_pass http://my-api;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
}
}这个配置文件指定了反向代理规则，将 my-api.example.com 反向代理到 api 容器的 8080 端口。
启动容器
在当前目录下，使用以下命令启动容器：
docker-compose up -d
这个命令会自动创建两个容器，并根据 docker-compose.yml 文件中的描述进行配置，启动成功后，就可以访问 my-api.example.com 来验证反向代理是否生效了。
总结
通过 Docker 搭建 Nginx 反向代理环境，可以方便地配置和部署反向代理服务。在前端开发中，熟练掌握反向代理技术，能够有效地提高 Web 应用的性能和可用性，具有重要的实用和学习意义。
完整的示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a25df6add4f0e0ffa803d0