单机下Vue项目通过Nginx配置反向代理(1)，零基础web前端开发

events {

worker_connections 1024;

}

http {

include mime.types;

default_type application/octet-stream;

#log_format main '$remote_addr - $remot{e}_{u}ser[$time_local] “$request” ’

'$status $bod{y}_{b}yte{s}_{s}ent"$http_referer" ’

‘“$htt{p}_{u}se{r}_{a}gent""$http_x_forwarded_for”’;

#access_log logs/access.log main;

sendfile on;

#tcp_nopush on;

#keepalive_timeout 0;

keepalive_timeout 65;

#gzip on;

server {

一开始应该是默认的8080端口

listen 7788;

server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

root html;

index index.html index.htm;

}

还有其他的一些配置……

这是单机版的Nginx，我们只需要做如下修改：

1. listen 配置自己的监听端口，可以是8080，8081 等等，随便你的;

2. server_name 配置你的服务名，比如taobao.com 等等，这里是本机的，也可以配置IP地址;

3. root 你项目的根目录地址,这里就是刚才npm run build得到的dist文件夹;

4. 设置代理需要重写/api,因为在开发的时候所有的接口都是以/api开头的，所以在请求代理的时候和proxyTable一样的逻辑，需要rewrite重写(格式是正则表达式)。

location /api {

rewrite ^.+api/?(.*)$ /$1 break; # url重写

proxy_pass http://localhost:8899; # 代理过去的目标地址

proxy_redirect off;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

最终的配置文件:

#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 - $remot{e}_{u}ser[$time_local] “$request” ’

'$status $bod{y}_{b}yte{s}_{s}ent"$http_referer" ’

‘“$htt{p}_{u}se{r}_{a}gent""$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 7788;

服务器名

server_name localhost;

前端项目根目录

root /Users/mac/WebstormProjects/sims/dist;

#charset koi8-r;

#access_log logs/host.access.log main;

#location / {

root html;

index index.html index.htm;

#}

#location / {

try_files $uri $uri/ /index.html;

#}

前端项目中的/api重写

location /api {

rewrite ^.+api/?(.*)$ /$1 break;

proxy_pass http://localhost:8899;

proxy_redirect off;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

#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;

#}

}

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/*;

}

检查是否成功

======================================================================

在本机运行后台项目（我这里的是SpringBoot项目）。

然后在浏览器上访问，注意是serve_name 和 端口号都是在 上面的 配置文件里面的，而不是后

端的端口号，这就实现了真正服务地址的隐藏，这也正是所谓的反向代理！

访问成功！

1. 附录 —— 菜鸟的vim教程

2. 参考 —— 关于Nginx的URL重写问题

---

最近新换了Mac，在新电脑上配了一下。

#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 - $remot{e}_{u}ser[$time_local] “$request” ’

'$status $bod{y}_{b}yte{s}_{s}ent"$http_referer" ’

‘“$htt{p}_{u}se{r}_{a}gent""$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 7788;

服务器名

server_name localhost;

前端项目根目录

root /Users/jisongyang/WebstormProjects/sims/dist;

#charset koi8-r;

#access_log logs/host.access.log main;

#location / {

root html;

index index.html index.htm;

#}

#location / {

try_files $uri $uri/ /index.html;

#}

前端项目中的/api重写

location /api {

rewrite ^.+api/?(.*)$ /$1 break;

proxy_pass http://localhost:8899;

proxy_redirect off;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取

基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**

[外链图片转存中…(img-MAcM9knq-1712319428138)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取

[外链图片转存中…(img-PEcWqiW5-1712319428139)]

[外链图片转存中…(img-CrP06Y1y-1712319428139)]

[外链图片转存中…(img-oIXljCLA-1712319428139)]