Nginx 前后端分离

前后端分离部署是一种常见的架构模式，其中前端和后端作为两个独立的服务运行，并通过API进行通信。

1. 前端部署

1.1 静态文件部署

前端静态文件需要放置到Nginx根目录的 html/www/ngx/ 下。

• 从 torchdb/data/static/ 目录拷贝所有文件和文件夹到 /html/www/ngx/。

1.2 配置前端环境变量

• 修改 index.html 文件，添加以下JavaScript代码片段以配置前端环境变量：

<script type="text/javascript">
  window.ngxConf = {
    "host": "https://host:port/ngraphx" // 不以斜杆结尾
  };
</script>

• 请将 "https://host:port/ngraphx" 替换为实际的 Nginx 代理转发的后端服务地址。

2. Nginx 配置

2.1 代理设置

• 配置 Nginx 以代理前端请求到后端服务。

2.2 代理转发规则

• 对于 /ngraphx/ 路径的请求，使用以下配置进行代理转发：

  location /ngraphx/ {
        proxy_pass http://localhost:9090/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Connection '';
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_buffering off;
        proxy_cache off;
    }

如果工作流API需要跨域调用

location /ngraphx/share/ {

  add_header 'Access-Control-Allow-Origin' '*' always;
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
  add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' always;

  if ($request_method = 'OPTIONS') {
      return 204;
  }

  proxy_pass http://localhost:9090/share/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Proto $scheme;

  proxy_set_header Connection '';
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_buffering off;
  proxy_cache off;
}

2.3 开启GZip压缩

在 /etc/nginx/nginx.conf 配置文件中打开被注释的选项。

  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_buffers 16 8k;
  gzip_http_version 1.1;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

注意

前端静态文件较大，建议开启，提升使用体验