Nginx配置后端接口转发(API)、前端(Vue,React)项目部署基础配置
·
Nginx配置教程
nginx的特点
- 更快:
- 单次请求会得到更快的响应。
- 在高并发环境下,Nginx 比其他 WEB 服务器有更快的响应。
- 高扩展性:
- Nginx 是基于模块化设计,由多个耦合度极低的模块组成,因此具有很高的扩展性。许多高流量的网站都倾向于开发符合自己业务特性的定制模块。
- 高可靠性:
- Nginx 的可靠性来自于其核心框架代码的优秀设计,模块设计的简单性。另外,官方提供的常用模块都非常稳定,每个 worker 进程相对独立,master 进程在一个 worker 进程出错时可以快速拉起新的 worker 子进程提供服务。
- 低内存消耗:
- 一般情况下,10000个非活跃的 HTTP Keep-Alive 连接在 Nginx 中仅消耗 2.5MB 的内存,这是 Nginx 支持高并发连接的基础。
- 单机支持10万以上的并发连接:理论上,Nginx 支持的并发连接上限取决于内存,10万远未封顶。
- 热部署:
- master 进程与 worker 进程的分离设计,使得 Nginx 能够提供热部署功能,即在 7x24 小时不间断服务的前提下,升级 Nginx 的可执行文件。当然,它也支持不停止服务就更新配置项,更换日志文件等功能。
- 最自由的 BSD 许可协议:
- 这是 Nginx 可以快速发展的强大动力。BSD 许可协议不只是允许用户免费使用 Nginx ,它还允许 用户在自己的项目中直接使用或修改 Nginx 源码,然后发布。
nginx配置前端静态页面代码
- nginx的html目录中创建一个自己命名的文件夹,我在html文件夹下创建了screen和report文件夹。
- 直接看配置文件内容:
- 输入 http://192.168.18.131/即可直接访问screen内容。
server {
listen 80; #监听端口
server_name localhost; #本机192.168.18.131,也就是localhost
#charset koi8-r;
#access_log logs/host.access.log main; #日志
location / {
root html/screen/; #screen是我创建的文件夹,用来放置前端解压后的代码文件
proxy_connect_timeout 3s;
proxy_read_timeout 5s;
proxy_send_timeout 3s;
index index.html index.htm;
try_files $uri $uri/ /index.html;#刷新页面的时候需要此配置,不配置刷新页面找不到页面
}
}
- 问题来了,如果我要配置多个前端项目,比如PC端,H5,钉钉等
- 输入 http://192.168.18.131/report/ 访问report文件下的网页内容
- alias配置如下
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/screen/;
proxy_connect_timeout 3s;
proxy_read_timeout 5s;
proxy_send_timeout 3s;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /report {
alias html/report/;
proxy_connect_timeout 3s;
proxy_read_timeout 5s;
proxy_send_timeout 3s;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
- 使用alias一定要注意的几个点:
- 目录名后面要加 /,否则找不到文件。
- alias只能位于location块中。
nginx配置后端接口
- 输入 http://192.168.18.131/ding/ yuqihai访问http://web-dingtalk.wuhu.xip.io/yuqihai接口
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/screen/;
proxy_connect_timeout 3s;
proxy_read_timeout 5s;
proxy_send_timeout 3s;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /report {
alias html/report/;
proxy_connect_timeout 3s;
proxy_read_timeout 5s;
proxy_send_timeout 3s;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /ding/ {
proxy_pass http://web-dingtalk.wuhu.xip.io/;#注意这里/和不加/区别很大哟
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
- proxy_pass http://web-dingtalk.wuhu.xip.io 则转发到http://web-dingtalk.wuhu.xip.io/ding/yuqihai
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)