Nginx 反向代理 API 与 Nginx 教程

安装

下载地址：http://nginx.org/en/download.html

下载解压到 D:nginx/

Nginx基础命令

查看nginx的版本号：nginx -v
验证配置是否正确: nginx -t
启动命令：start nginx
快速停止命令：nginx -s stop
正常停止命令：nginx -s quit
配置文件修改重载命令：nginx -s reload

配置

打开 conf 目录下的 nginx.conf 文件，并进行配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;
	
	server {
        listen       8000;
        server_name  localhost;
		
		location / {
			proxy_pass http://127.0.0.1:8080;  #项目启动地址
        }
		
		location /api {
			proxy_pass http://127.0.0.1:3030; # 后台 API 地址 
        }

		location  /v2 {
			proxy_pass https://api.douban.com/v2; # 豆瓣 API 地址
		}
    }
}

一个简单的代理就配置好了，接下来启动 nginx。

启动

CMD 运行命令：

D:
cd nginx
start nginx

在项目中调用代理的 API 即可：

	// 豆瓣 https://api.douban.com/v2/movie/top250?start=25&count=25
    axios
      .get('/v2/movie/top250?start=25&count=25')
      .then(response => {
        console.log('douban', response)
      })
      .catch(function(error) {
        console.log('error', error)
      })

    // api
    axios
      .get('/api/todos')
      .then(response => {
        console.log('api', response)
        const todos = response.data.todos
        this.store.setTodo(todos)
      })
      .catch(function(error) {
        console.log('error', error)
      })

在浏览器，在新端口 8000 打开项目，就能看到代理的 API 已经可以使用了。

教程

Nginx入门到进阶的教程
前端必会的 Nginx入门文字与视频教程(共11集)