前言：

前几天有FlyFish社区开发者私聊问我，使用FlyFish设计好大屏后会生成网页吗？这个网页是保存在哪里？

看到这个问题后我想应该有不少人社区开发者有这样的疑问，首先，使用FlyFish在应用开发模块添加并开发的应用，就是一个部署到服务器上就能访问浏览的可视化大屏网页。FlyFish大屏组件以及数据保存在lcapWww目录以及数据库中的，用户开发设计完大屏只需导出大屏源码使用Nginx等web服务器部署大屏源码即可。

接下来教大家如何使用Nginx快速部署上线一张使用FlyFish开发的可视化大屏。

正文：

前提

系统：CentOS7.6

Nginx（默认nginx版本：1.20.1）

FlyFish版本：FlyFish-2.1.x

FlyFish大屏源码，来自FlyFish官方演示环境中的大屏。

部署路径：/data/app/

导出大屏源码，修改压缩包名字。默认压缩包名字是screen加ID，部署后不方便运维人员查看和后期维护修改，因此，可以根据个人需求修改为合适的名字，例如我这里修改为“screenDemo”，上传至/data/app/目录下并解压。

修改FlyFish大屏源码配置文件

FlyFish大屏配置文件，有且仅有 config/env.production.js 文件。

使用Nginx部署FlyFish，需要考虑用户服务器是否可以为大屏申请开通一个端口还是和服务器上其他产品页面公用共一个端口，不同的需求，需要修改不同的配置。因此这里分为两种方案。

FlyFish大屏单独占用一个端口

添加Nginx配置

server {    listen 3800;    server_name localhost;    location / {        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';        add_header Access-Control-Allow-Origin *;        add_header Access-Control-Allow-Credentials: true;        root /data/app/screenDemo;    }}

验证

访问大屏url：

FlyFish大屏和其他产品页面公用一个端口

修改配置

componentsDir：'screenDemo/components'

添加Nginx配置

server {    listen 18080;    server_name localhost;      # 其他产品    location / {        # ……    }      # FlyFish demo 大屏    location /screenDemo {        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';        add_header Access-Control-Allow-Origin *;        add_header Access-Control-Allow-Credentials: true;        alias /data/app/screenDemo;    }}

验证

访问大屏url：

总结：

看完本篇教程的你有没有get到FlyFish大屏的快速部署方法？