nginx代理配置

发表于 | 分类于

想了解下nginx是怎么做反向代理的，所以就下载了一个在本地搭建环境试试看。

本地后端服务器地址是http://localhost:3000，采用nodeJs的框架express搭建

前端打包后的静态文件放在G:\vue-express\dist

nginx配置

配置文件地址：G:\mySoft\nginx-1.12.2\nginx-1.12.2\conf\nginx.conf （即nginx下载包下的conf/nginx.conf文件）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
server {
        listen       8088;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   G:/vue-express/dist;
            index  index.html index.htm; 
        }
        location /api {
            proxy_pass http://127.0.0.1:3000/api;
        }
}

nginx.exe 文件所在文件夹，使用CMD命令，运行start nginx即可开启 nginx 服务。

浏览器打开http://127.0.0.1:8088/#/ 就可以访问到放置在 G:/vue-express/dist 目录下的静态文件，api请求也能正确请求到 http://127.0.0.1:3000 上的资源。

nginx说明

网上找的一些资料，待完善

------nginx.conf文件中的一些配置含义------

    listen: 监听端口，加ssl 为https通信方式。

    server_name:网站服务名，主机头

    error_page:错误页

    location: 虚拟位置，如 “/” 根目录，如“/images/”，“/50x.htm"等等

    root:文件实际位置

    index:起始页

    ssl_certificate：ssl证书存放位置（由证书颁发机构提供）

    ssl_certificate_key:ssl证书私钥存放位置（由证书颁发机构提供）

------命令------

    启动nginx： `start nginx`

    停止nginx：`nginx -s stop` 或 `nginx -s quit`

    nginx停止命令stop与quit参数的区别在于stop是快速停止nginx，可能并不保存相关信息，quit是完整有序的停止nginx，并保存相关信息。

    重载nginx命令：`nginx -s reload` 

    当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx

vue配置

上面是生产环境的配置，使用 vue-cli 创建的项目，不需要在前端配置什么内容，vue-cli 弄好了。

开发环境需要手动去配置一下，配置方式也很简单。

打开 config/index.js文件，配置proxyTable：

1
2
3
4
5
6
7
8
9
proxyTable: {
    '/api':{
        target:'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
            '^/api': '/api'
        }
    }
}

就大功告成了！

显示 Gitment 评论