Docker中Nginx部署多前端与解决跨域问题实战

本示例提供了在Docker环境下部署Nginx服务器以承载多个前端应用的方法，同时解决了跨域问题。适用于使用阿里云CentOS7系统和Docker 20.10.6版本的场景，涉及到的技术栈包括Nginx 1.19.5、Docker、Java和SpringBoot。 第一部分：部署第1个前端Nginxdev环境 首先，从Docker Hub拉取官方Nginx镜像： ``` docker pull nginx ``` 然后，不挂载任何配置启动一个Nginx容器，用于后续复制配置文件： ``` docker run --name nginx-web-p8080:80 -d nginx dev ``` 通过`docker ps`获取容器ID，接着将容器内的Nginx配置文件复制到宿主机上便于管理： ``` docker cp <容器ID>:/etc/nginx/nginx.conf /mnt/nginx/conf docker cp <容器ID>:/etc/nginx/conf.d/default.conf /mnt/nginx/conf/conf.d/ ``` 停止并删除该临时容器： ``` docker stop <容器ID> docker rm <容器ID> ``` 最后，正式挂载配置文件、日志、缓存和部署目录，并解决时区问题： ``` docker run --name nginx-web -d -p 8080:80 \ -v /etc/localtime:/etc/localtime:ro \ -v /mnt/nginx/cache/files:/etc/nginx/cache/files \ -v /mnt/nginx/upload:/etc/nginx/upload \ -v /mnt/nginx/www:/usr/share/nginx/html \ -v /mnt/nginx/logs:/var/log/nginx \ -v /mnt/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \ -v /mnt/nginx/conf/conf.d:/etc/nginx/conf.d nginx dev ``` 配置Nginx以服务前端应用，例如在`/mnt/nginx/www`目录下上传测试页面，可以通过`http://serverIp(或者dev域名):8080`访问。 第二部分：部署第2个前端Nginxtest环境 创建一个新的Dockerfile，内容如下： ```Dockerfile FROM nginx # 在这里可以添加自定义配置，如复制额外的配置文件或设置环境变量 ``` 构建Docker镜像： ``` docker build -t nginx-test . ``` 运行新的Nginxtest容器，挂载相应的目录： ``` docker run --name nginx-web-test -d -p 8081:80 \ -v /mnt/nginx/test:/usr/share/nginx/html \ -v /mnt/nginx/conf/nginx-test.conf:/etc/nginx/nginx.conf \ -v /mnt/nginx/test-logs:/var/log/nginx \ -v /mnt/nginx/conf/test-conf.d:/etc/nginx/conf.d nginx-test ``` 在`/mnt/nginx/test`目录下部署前端应用，使用不同的端口（如8081）访问。 第三部分：处理跨域问题 对于前端调用Java后端的应用，需在Nginx配置文件中添加CORS策略。例如，在`/mnt/nginx/conf/nginx.conf`或对应的`default.conf`或`nginx-test.conf`中添加以下配置： ```nginx http { ... add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; if ($request_method = 'OPTIONS') { return 204; } ... } ``` 这样，Nginx会允许来自任何源的请求，并处理跨域预检请求。 总结，这个示例展示了如何在Docker中高效利用Nginx部署多个前端应用，同时通过配置Nginx解决跨域限制，确保前端与后端服务之间的通信顺畅。