vue 前端+nginx+反向代理(swoole或者golang) 配置

參考資料:

https://www.easyswoole.com/Introduction/proxy.html

https://wiki.swoole.com/wiki/page/326.html

 

1.vue + swoole + nginx

nginx配置如下 多多入口配置:

server {
        listen       80;
        server_name  123.com;
        root   /mnt/hgfs/abc/Views;
        autoindex on;
        index  index.html index.htm;
		
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
		
        #這段是配置ssl的 
        ssl on;
        ssl_certificate  /var/www/abcd/abcd.pem;
        ssl_certificate_key /var/www/abcd/abcd.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;



        #如果後端是多個模塊 如admin/home  這樣配置
        #這個是解決vue刷新後頁面404問題
        location /home {
            try_files $uri $uri/ /home/index.html;
        }

        location /admin {
            try_files $uri $uri/ /admin/index.html;
        }

        location / {
            proxy_http_version 1.1;
            proxy_set_header Connection "keep-alive";
            proxy_set_header X-Real-IP $remote_addr;
            if (!-f $request_filename) {
                proxy_pass http://127.0.0.1:9501;
            }
        }

 nginx 單入口配置

server {
	listen       8080;
	server_name    api.com;
	root    /var/www/html/abc/20191126/html;
	index  index.html index.htm;
	
    
    #location /  :表示域名 訪問之後直接展示的目錄,比如直接渲染index.html
	location / {
		#index  index.html index.htm index.php;
		try_files $uri $uri/ /index.html;
	
	}

	#location /Manager  :表示前端和後端進行接口交互時(標誌就是Manager)被nginx轉發至9501端口
	location /Manager {
		proxy_http_version 1.1;
		proxy_set_header Connection "keep-alive";
		proxy_set_header X-Real-IP $remote_addr;
		if (!-f $request_filename) {
			proxy_pass http://127.0.0.1:9501;
		}
	}
}

nginx proxy_pass 代理轉發多臺服務器

    upstream biz {
        server 192.168.10.78:9501 weight=1;
        server 192.168.10.75:9501 weight=1;
    }

    server {
        listen       80;

        server_name  aaa.com;
        root         /var/www/html/bb;
        index index.html index.htm index.php;


        location / {
            proxy_http_version 1.1;
            proxy_set_header Connection "keep-alive";
            proxy_set_header X-Real-IP $remote_addr;
            if (!-f $request_filename) {
                proxy_pass http://biz;
            }
        }

        
    }

如果是vue+apache+swoole:

<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  #RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]  fcgi下無效
  RewriteRule ^(.*)$  http://127.0.0.1:9501/$1 [QSA,P,L]
   #請開啓 proxy_mod proxy_http_mod request_mod
</IfModule>

2.vue在nginx/apache 代理下頁面刷新問題

nginx:

#這個是解決vue刷新後頁面404問題
location /home {
    try_files $uri $uri/ /home/index.html;
}

#或者
try_files $uri $uri/ /index.html;

 

apache:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

 

3. nginx 代理websocket

https://www.nginx.com/blog/websocket-nginx/

#wsapp 標識是路由的第一層級, 一般路由是三個層級. 第一個是表文件夾; 第二個是表class; 第三個是表method

location /wsapp/ {
    proxy_pass http://wsbackend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
}

 

4. 字體跨域

 

location ~* \.(eot|ttf|woff|svg|otf)$ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}