前端工程配置Nginx反向代理[通俗易懂]

前端工程配置Nginx反向代理HTTP配置HTTPS配置配置两个反向代理,一个代理http页面,一个代理https页面,前者监听80端口,后者监听443端口。配置后整个文件如下,其中有不少冗余,挑有用的看即可。#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid

大家好,又见面了,我是全栈君。

前端开发时,想要通过正式域名直接访问到本地的开发环境,可以通过配置反向代理的形式来实现,如果开了反向代理,就走本地,不开则走线上。

配置两个反向代理,一个代理http页面,一个代理https页面,前者监听80端口,后者监听443端口。配置后整个文件如下,其中有不少冗余,挑有用的看即可。


#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       80;
server_name  localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / { 

root   html;
index  index.html index.htm;
proxy_pass http://localhost:3000/;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html { 

root   html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ { 

# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ { 

# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht { 

# deny all;
#}
}
server { 

#监听443端口。443为知名端口号,主要用于HTTPS协议
listen       443 ssl;
#定义使用www.xx.com访问
server_name  dev.wapa.taobao.com;
#ssl证书文件位置(常见证书文件格式为:crt/pem)
ssl_certificate      /Users/liuzhenhui/Documents/Key/ssl.crt;
#ssl证书key位置
ssl_certificate_key  /Users/liuzhenhui/Documents/Key/ssl.key;
#ssl配置参数(选择性配置)
ssl_session_cache    shared:SSL:1m;
ssl_session_timeout  5m;
#数字签名,此处使用MD5
ssl_ciphers  HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers  on;
#编码格式
charset utf-8;
#代理配置参数
proxy_connect_timeout 180;
proxy_send_timeout 180;
proxy_read_timeout 180;
proxy_set_header Host $host;
proxy_set_header X-Forwarder-For $remote_addr;
#反向代理的路径(和upstream绑定),location 后面设置映射的路径
location / { 

proxy_ssl_server_name on;
proxy_pass https://localhost:3000/;
} 
#静态文件,nginx自己处理
location ~ ^/(images|javascript|js|css|flash|media|static)/ { 

root C:/XMCARES_X/WorkSpace/nginx/src/main/webapp/views;
#过期30天,静态文件不怎么更新,过期可以设大一点,如果频繁更新,则可以设置得小一点。
expires 30d;
}
#设定查看Nginx状态的地址
location /NginxStatus { 

stub_status           on;
access_log            on;
auth_basic            "NginxStatus";
auth_basic_user_file  conf/htpasswd;
}
#禁止访问 .htxxx 文件
location ~ //.ht { 

deny all;
}
#错误处理页面(可选择性配置)
#error_page 404 /404.html;
#error_page 500 502 503 504 /50x.html;
#location = /50x.html { 

# root html;
#
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server { 

# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / { 

# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server { 

# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / { 

# root html;
# index index.html index.htm;
# }
#}
include servers/*;
}

HTTP配置

如上面配置,具体http的配置主要如下

server { 

listen       80;//监听80端口
server_name  dev.taobao.com;//监听的域名
//要代理转向的目标配置
location / { 

root   html;
index  index.html index.htm;
proxy_pass http://localhost:3000/;
}
}

以上配置表示,nginx监听dev.taobao.com域名的80端口,当有请求来到dev.taobao.com:80时,把这个请求代理到localhost:3000,所以在前端工程启动后,node.js配置的是3000端口,但是浏览器直接访问80端口即可(即默认端口),无需显示指定域名后面的端口,直接访问dev.taobao.com就可以了,这样的好处是,直接用域名就能访问到本地的开发环境。

HTTPS配置


server { 

#监听443端口。443为知名端口号,主要用于HTTPS协议
listen       443 ssl;
#定义使用www.xx.com访问
server_name  dev.taobao.com;
#ssl证书文件位置(常见证书文件格式为:crt/pem)
ssl_certificate      /Users/liuzhenhui/Documents/Key/ssl.crt;
#ssl证书key位置
ssl_certificate_key  /Users/liuzhenhui/Documents/Key/ssl.key;

配置项跟http差不多,多了两条ssl的配置,首先生成证书,然后把证书信息填上即可,证书生成流程如下:

  1. 生成rsa私钥,des3算法,1024位强度,ssl.key是秘钥文件名。
    openssl genrsa -des3 -out ssl.key 1024
  2. 输入密码两次,填写一样即可,可随意填写,下一步就会删除
  3. 删除密码
    openssl rsa -in ssl.key -out ssl.key
  4. 生成CSR
    openssl req -new -key ssl.key -out ssl.csr
    需要输入一些信息,随便填写即可
  5. 生成自签名证书
    //这里3650是证书有效期(单位:天)
    openssl x509 -req -days 3650 -in ssl.csr -signkey ssl.key -out ssl.crt

证书生成完成,配置到文件中,既可以直接用https://dev.taobao.com来访问本地的开发环境了。

如果是mac系统,因为证书是自己的,需要添加到系统的信赖证书才能用,否则浏览器会拦截请求。用safari打开https://dev.taobao.com会提示证书不可用,这是选择证书信任,然后强制加载,就会把证书加入到信任列表了。

参考
https://www.cnblogs.com/shuiche/p/13557475.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/121300.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SMO算法最通俗易懂的解释

    SMO算法最通俗易懂的解释我的机器学习教程「美团」算法工程师带你入门机器学习已经开始更新了,欢迎大家订阅~任何关于算法、编程、AI行业知识或博客内容的问题,可以随时扫码关注公众号「图灵的猫」,加入”学习小组“,沙雕博主在线答疑~此外,公众号内还有更多AI、算法、编程和大数据知识分享,以及免费的SSR节点和学习资料。其他平台(知乎/B站)也是同名「图灵的猫」,不要迷路哦~SVM通常用对偶问题来求解,这…

  • 如何将inputstream转为字符串_string字符串转数组的方法

    如何将inputstream转为字符串_string字符串转数组的方法转载:https://blog.csdn.net/lmy86263/article/details/60479350在Java中InputStream和String之间的转化十分普遍,本文主要是总结一下转换的各种方法,包括JDK原生提供的,还有一些外部依赖提供的。1、InputStream转化为String1.1JDK原生提供方法一:byte[]bytes=newbyte[0]…

  • navicat注册码最新_navicat激活工具

    navicat注册码最新_navicat激活工具navicat10.1.7版本,亲测可用。名:NAVN-LNXG-XHHX-5NOO组织:NAVN-LNXG-XHHX-5NOO注册码:NAVN-LNXG-XHHX-5NOO

    2022年10月13日
  • gridview列的汇总

    gridview列的汇总

  • HTML+CSS登录界面[通俗易懂]

    HTML+CSS登录界面[通俗易懂]今天学习了一个HTML+CSS登录界面效果图如下:背景图片可以选取自己喜欢的,以下是实现代码:login.html<!DOCTYPEhtml><html><head><metacharset=”UTF-8″><title>登录</title><linkrel=”stylesheet”…

  • LinkedHashSet类「建议收藏」

    LinkedHashSet类「建议收藏」概述:LinkedHashSet:元素唯一,元素无索引,元素存取有序由哈希表结构保证元素唯一,由链表保证元素存取有序案例:publicclassDemo1{publicstaticvoidmain(String[]args){//1.创建一个LinkedHashSet集合,指定集合中元素的类型为String类型LinkedHashSet&l…

    2022年10月12日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号