前端怎样使用Nginx署理dist网页，署理websocket，署理后端 ...

本文将引导您怎样配置Nginx以署理前后端分离的项目，并特殊说明确对WebSocket的署理设置。通过本教程，您将可以或许实现一次性配置，进而使项目可以或许在任意局域网服务器上摆设，并可通过IP地址或域名访问服务。
笔者建议 先速览本文相识大致内容后再复制对应的代码。本文情况基于Windows VUE3 typescript 理论通用于linux
前提条件

• 已安装Nginx
  
• 前后端项目代码摆设在服务器上
  

Nginx配置步骤

基础署理配置
编辑Nginx配置文件，通常位于/etc/nginx/nginx.conf或/etc/nginx/conf.d/目次下的某个.conf文件。例如：

1. server {
2.    listen       80; # 监听端口
3.    server_name  localhost; # 服务器名称 局域网内一般就是localhost
4. ​
5.    location / {
6.        proxy_pass http://前端项目地址; # 前端项目代理
7.        proxy_set_header Host $host;
8.        proxy_set_header X-Real-IP $remote_addr;
9.        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
10.    }
11. ​
12.    location /api/ {
13.        proxy_pass http://后端项目地址; # 后端接口代理
14.        proxy_set_header Host $host;
15.        proxy_set_header X-Real-IP $remote_addr;
16.        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
17.    }
18. }

复制代码

为了主动化区分生产情况和开发情况，我们必要使用到“.env”

如图通过.env.development      .env.production  然后修改 package.json

即可主动区分情况。然后再请求代码中这样写

1. export const BASE_URL = import.meta.env.VITE_APP_BASE_API

复制代码

以下为笔者实例配置

2. #user  nobody;
3. worker_processes  2;
5. #error_log  logs/error.log;
6. #error_log  logs/error.log  notice;
7. #error_log  logs/error.log  info;
9. pid        logs/nginx.pid;
12. events {
13.     worker_connections  2048;
14. }
17. http {
18.     include       mime.types;
19.     default_type  application/octet-stream;
21.     #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
22.     #                  '$status $body_bytes_sent "$http_referer" '
23.     #                  '"$http_user_agent" "$http_x_forwarded_for"';
25.     #access_log  logs/access.log  main;
27.     sendfile        on;
28.     #tcp_nopush     on;
30.     #keepalive_timeout  0;
31.     keepalive_timeout  65;
33.     #gzip  on;
34.     server {
35.     listen 8119;
36.     server_name localhost;
38.     # 指定根目录为 dist 文件夹
39.     root ./dist;
40.     index index.html;
42.     location / {
43.         try_files $uri $uri/ /index.html;
44.     }
45.     # 将以/api开始的请求代理到本机的8112端口的后端服务，并且去掉URL中的/api
46.     location /api/ {
47.         proxy_pass http://localhost:8112/; # 注意这里的尾部斜线
48.         proxy_set_header Host $host;
49.         proxy_set_header X-Real-IP $remote_addr;
50.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
51.         proxy_set_header X-Forwarded-Proto $scheme;
52.         # 其他可能需要的代理设置...
53.     }
55.     # 添加通用 WebSocket 代理
56.     location /ws/ {
57.         proxy_pass http://localhost:8112;
58.         proxy_http_version 1.1;
59.         proxy_set_header Upgrade $http_upgrade;
60.         proxy_set_header Connection "Upgrade";
61.         proxy_set_header Host $host;
62.         proxy_read_timeout 60s;
63.         proxy_send_timeout 60s;
64.         
66.     }
72.     }
74.     server {
75.         listen       80;
76.         server_name  localhost;
78.         #charset koi8-r;
80.         #access_log  logs/host.access.log  main;
82.         location / {
83.             root   html;
84.             index  index.html index.htm;
85.         }
87.         #error_page  404              /404.html;
89.         # redirect server error pages to the static page /50x.html
90.         #
91.         error_page   500 502 503 504  /50x.html;
92.         location = /50x.html {
93.             root   html;
94.         }
96.         # proxy the PHP scripts to Apache listening on 127.0.0.1:80
97.         #
98.         #location ~ \.php$ {
99.         #    proxy_pass   http://127.0.0.1;
100.         #}
102.         # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
103.         #
104.         #location ~ \.php$ {
105.         #    root           html;
106.         #    fastcgi_pass   127.0.0.1:9000;
107.         #    fastcgi_index  index.php;
108.         #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
109.         #    include        fastcgi_params;
110.         #}
112.         # deny access to .htaccess files, if Apache's document root
113.         # concurs with nginx's one
114.         #
115.         #location ~ /\.ht {
116.         #    deny  all;
117.         #}
118.     }
121.     # another virtual host using mix of IP-, name-, and port-based configuration
122.     #
123.     #server {
124.     #    listen       8000;
125.     #    listen       somename:8080;
126.     #    server_name  somename  alias  another.alias;
128.     #    location / {
129.     #        root   html;
130.     #        index  index.html index.htm;
131.     #    }
132.     #}
135.     # HTTPS server
136.     #
137.     #server {
138.     #    listen       443 ssl;
139.     #    server_name  localhost;
141.     #    ssl_certificate      cert.pem;
142.     #    ssl_certificate_key  cert.key;
144.     #    ssl_session_cache    shared:SSL:1m;
145.     #    ssl_session_timeout  5m;
147.     #    ssl_ciphers  HIGH:!aNULL:!MD5;
148.     #    ssl_prefer_server_ciphers  on;
150.     #    location / {
151.     #        root   html;
152.     #        index  index.html index.htm;
153.     #    }
154.     #}
156. }

复制代码

其中前端的dist目次笔者使用的是相对路径，也就意味着/conf/nginx.conf中./ 相对的根目次是conf的同级目次。这也是实现通用化摆设的关键。这样配置在其他地方解压后仍然可以见效。

而后端则是全部以 /api 作为默认的请求的url，然后通过nginx反向署理到真实的后端。
例如请求的是 /api/login 到服务器 则被署理后为 http://localhost:8112/login  即指向了服务器自身。

WebSocket署理配置
在配置文件中增加针对WebSocket的署理设定。这段代码除了服务地址和指定的署理的路径“/ws/”别的部分是固定配置。

1.     # 添加通用 WebSocket 代理
2.     location /ws/ {
3.         proxy_pass http://localhost:8112;
4.         proxy_http_version 1.1;
5.         proxy_set_header Upgrade $http_upgrade;
6.         proxy_set_header Connection "Upgrade";
7.         proxy_set_header Host $host;
8.         proxy_read_timeout 60s;
9.         proxy_send_timeout 60s;
10.         
11.     }

复制代码

而websocket则必要再代码中这样写

1. socket = new WebSocket(`ws://${window.location.host}/ws/upgrade_log`);

复制代码

此行代码用于创建一个新的WebSocket连接。具体解释如下：

• ws://${window.location.host}/ws/upgrade_log：这是一个模板字符串，用来定义WebSocket服务器的URL。
  
  
  
  • ws://：是WebSocket协议的前缀，表现这是一个WebSocket连接。在安全情况中（例如使用HTTPS时），会使用wss://作为前缀。
    
  • ${window.location.host}：这部分代码使用了JavaScript的模板字符串语法来嵌入一个表达式。window.location.host获取当前欣赏器窗口中显示的文档的主机名（即域名或IP地址加端口号）。这意味着WebSocket连接到当前页面所在的域名或IP地址上。
    
  • /ws/upgrade_log：这是WebSocket服务在服务器上的具体路径。在Nginx配置中，我们可能设置了一个location块来监听/ws/路径，并将其署理到实际运行WebSocket服务的后端服务器。
    
  
  

所以，整行代码的作用是，在客户端创建一个WebSocket连接，连接到与当前网页类似host的服务器上，特定的/ws/upgrade_log路径。当这个WebSocket连接建立后，就可以用于双向通信，客户端和服务器可以相互发送消息。
然后通过Nginx的署理实现任何通过ip访问前端网页时都能连接到服务器的websocket服务。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。