nginx 配置反向代理

蔚落 2023-05-29 06:51 10阅读 0赞

一、vue项目中,开发阶段可以自己配置代理,将localhost+端口映射成实际的 ip+端口,不过vue在实际打包后这个代理会失效,不会有这种映射关系存在,所以就会出现访问路径是 localhost+端口的情况,此时肯定是访问不了的,需要通过代理将监听localhost+端口 将监听到的转到 实际的 IP+端口。

二、Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。作用很多,今天就先说反向代理配置。

三、下载nginx,下载地址:链接:https://pan.baidu.com/s/1gIN2MblSsNSnqEMXv-BsEg 提取码:fg90 这是我个人的有空搞的一个软件包,里面有很多可以用得到的软件,其中有nginx,可自行选择下载。

四、下载好的包,找个目录解压解压后目录如下:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Mjk3NTYz_size_16_color_FFFFFF_t_70

在该目录下打开cmd,输入命令:start nginx,之后打开浏览器,直接访问localhost,如果是nginx的欢迎界面,证明安装成功,步骤很简单。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Mjk3NTYz_size_16_color_FFFFFF_t_70 1

4.1 反向代理配置

打开nginx中conf文件夹,之后编辑nginx.conf文件

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Mjk3NTYz_size_16_color_FFFFFF_t_70 2

现假设现在vue写的项目打包,包名为dist,放到:D:/cjdbh_web02/dist; 这个目录,然后要通过 www.cjdbh.com 来访问该项目,(这里要强调一下,如果通过 www.cjdbh.com 这种是狭义上的域名,也就是说只有自己可以用,需要将本地host文件中配置www.cjdbh.com,映射为127.0.0.1,如果不想配置,那就不用这种域名,直接写成localhost即可,我这里就用域名),然后将访问路径通过:http://192.168.102.124:8088/; 这种实际的IP+端口 或者域名来做代理。配置如下:

  1. server {
  2. listen 80;#如果这个地方80被占用了,就换任意其他的没被占用的即可
  3. server_name www.cjdbh.com; #这个地方用localhost代替也行
  4. root D:/cjdbh_web02/dist; #这个地方是vue的包放的位置,注意root是全局的,其他地方不能再有了
  5. #charset koi8-r;
  6. #access_log logs/host.access.log main;
  7. location /api/ {
  8. proxy_pass http://192.168.102.124:8088/; # 这个是反向代理地址
  9. # 以下都是解决跨域需要添加的请求头信息
  10. proxy_set_header Host $http_host;
  11. proxy_set_header X-Real-IP $remote_addr;
  12. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  13. add_header Access-Control-Allow-Origin *;
  14. add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
  15. add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  16. }

4.2 配置好后,通过 nginx -s reload

20191105142424171.png

4.3,测试,通过访问 www.cjdbh.com 测试是否能够访问到项目,如果访问不到,最大可能是浏览器缓存原因,可以清楚缓存再测试测试,如果任然访问不到,那就关闭nginx,然后在重新启动,在清缓存,在访问,如果任然访问不同,那就是配置有问题,检测一下配置,nginx相关命令如下:

查看Nginx的版本号:nginx -V

启动Nginx:start nginx

快速停止或关闭Nginx:nginx -s stop

正常停止或关闭Nginx:nginx -s quit

配置文件修改重装载命令:nginx -s reload

关闭之后打开window的任务管理器,找到如下显示:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Mjk3NTYz_size_16_color_FFFFFF_t_70 3

选中,然后停止运行,我这里有几个可能是我重启了几次,具体我也不清楚为何会有多个。

发表评论

表情:
评论列表 (有 0 条评论,10人围观)

还没有评论,来说两句吧...

相关阅读