F1V3.0-24 UI前端模块的发布及部署

本文主要介绍V3.0之后前端模块的发布及部署

1 准备工作

1.1 下载nginx

下载nginx的window环境包，请使用平台组提供的nginx环境包，因为其中内置了nginx针对平台开发的配置文件。将解压好的nginx环境包存放在一个合适的（英文路径）的位置即可。

1.2 下载F1V3.0新版组件包

下载F1V3.0新版组件包，包括F1UI_widget_libraries（平台组件包）、F1UI_public_libraries（平台组件依赖的三方包）、F1UI_plugins_libraries（业务依赖的三方包）三个包，存放在一个合适的（英文路径）的位置即可。

2 nginx前端代理配置

nginx代理前端的静态资源，对比V2.6版本的tomcat，nginx只需设置好了映射规则，当从浏览器端请求静态资源（包括html文件、样式文件、javascript脚本以及相关图片资源）的时候会根据设定好的规则获取对应的本地资源。

打开nginx.conf，这个文件在nginx环境包的conf文件夹下，然后按照下面步骤修改

修改本地路径映射变量$rootpath，修改为新版组件包存放的目录，切记最后不要加‘／‘

修改服务地址变量$zuulPath，设置为zuul服务器的地址

修改授权服务器地址变量$authorizationServicePath，设置为授权服务器地址

之后在nginx环境包的位置打开终端，运行‘start nginx’即可。

更具体的nginx 操作请参考：F13.0-UI Nginx的配置和使用

如果想了解更基本的nginx使用配置，请参考：前端知识总结——Nginx使用说明以及注意事项

3 gulp打包操作

使用平台组提供的打包模块‘gulpBuildProject‘，将其放在一个合适的英文路径下（建议将该模块放在和组件包相同的目录下），然后修改模块根目录下的conf.json文件，修改如下：

修改1：const下的moduleBasePath修改为业务模块防止的目录下（这里说明一下，所有的业务模块要存放在同一个目录下，建议和平台组件包放到一起）

修改2：const下的librariesBasePath修改为平台组件包的上级目录。

修改完之后在gulpBuildProject的位置运行终端，执行“gulp“指令就可以打包了，打完包会生成一个对应这src的dist文件夹，这里存放着src下经过打包（压缩、版本管理等）的静态资源文件，src就是‘开发环境‘，dist就是‘生产环境‘

更多打包操作以及配置请参看：gulp针对F1平台的前端资源打包说明

4 切换 ‘开发环境’ 和 ‘生产环境’

使用nginx切换，在nginx.conf中有一个变量是$switch，设置这个变量为‘src’的时候就是开发环境，映射到项目中src目录下，如果设置为‘dist’，则切换至‘生产环境’，映射到项目中的dist目录下。

5 刷新操作