一键前端代理,一行命令开启nginx容器,代理前端页面
我们在前端开发的过程中,在对接口时候,往往需要跨域请求,那么及其简便的方法就是使用nginx反向代理,但是存在几点缺点
1.在新的一个项目下,我们需要找到安装nginx目录的nginx.conf文件并且修改代理内容,重启才能有效
2.如果修改错误,还会影响之前正确的代理端口
3.这个配置文件非常复杂,不利于新手编写
于是有没有更好的方式呢,答案是肯定的,前段时间学习了docker的内容,发现nginx容器可以实现非常多的代理,而且可以随时关闭随时开启,但是命令行输入还是显得比较麻烦,于是我自己就封装了一下,现在实现前端代理就只需要一行命令。如果想学docker,推荐阮大神的博客 docker入门
一.首先,你需要下载docker,关于docker实在是一个非常好用的东西,在我们这个教程你完全不需要了解它,只需要下载它
1.mac 下载地址 https://docs.docker.com/docker-for-mac/install/
2.windows https://docs.docker.com/docker-for-windows/install/
下载好,运行下列命令,验证是否安装成功
docker version
如果没有启动docker,使用下列命令启动
# service 命令的用法 $ sudo service docker start # systemctl 命令的用法 $ sudo systemctl start docker
二.下载镜像
1.使用命令
docker image pull nginx
这就是下载了nginx镜像,想了解具体ngxin镜像怎么玩(完全可以不需要了解)推荐阮大神 nginx容器教程
三. 简单配置代理,代理到你想要的地址
1.去往 https://github.com/jiangzhenfei/docker-nginx 将文件夹下的文件(一共两个文件)拷贝到你需要代理的index.html目录
其中:
add.conf 这个文件是你需要配置代理,配置非常简单,我也在里面写了几个配置的例子,当然不配置也是可以的,但是就不能代理到你想要的地址了
location /blog/ { #遇到/blob/开头的ajax就代理到http://47.93.103.19:30010这个地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://47.93.103.19:30010/; proxy_redirect off; }
nginx.js 这个文件是启动文件,不需要任何修改
四. 启动和关闭
1.node nginx.js 启动,这个时候你只需要 打开http://localhost:8080/ 就能看见你的html页面了,并且里面接口的转发都是正确的
2.如果想关闭整个代理,只需要执行 node nginx.js stop 即可,再次访问就访问不到了