部署React前端应用到PCF并与后端服务集成

本文讨论如何将Web UI应用程序部署到PCF-PAS并与PAS上的后端微服务集成。在开始之前，通常需要实现并部署一个网关作为所有后端mircoservices的入口，你可以为它选择 Spring Cloud gateway，然后我们可以开始实现WEB UI并部署到PAS上运行。

实现Web UI

你可以采用许多不同的web UI框架来实现Web UI应用程序。PCF支持其中大部分（例如Spring MVC、.NET、PHP、Python、Ruby、HTML+CSS+JS）。你可以根据你的技能树决定使用哪一个，在这里我们通过React实现一个HTML+CSS+JS web UI，步骤如下：

1. 首先需要在你的电脑上安装node.js，因为你需要npm命令行工具来管理js模块。

2. 创建React 应用, 应用名称为 photostory-web
   。

   npm init react-app photostory-web

3. 上一步将创建 photostory-web
   目录，在这个目录中会创建好项目初始结构，并载入依赖模块。

   photostory-web
   ├── README.md
   ├── node_modules
   ├── package.json
   ├── .gitignore
   ├── public
   │       ├── favicon.ico
   │       ├── index.html
   │       └── manifest.json
   └── src
            ├── App.css
            ├── App.js
            ├── App.test.js
            ├── index.css
            ├── index.js
            ├── logo.svg
            └── serviceWorker.js

4. 你可以使用如下命令来测试、构建和本地运行。

   > cd photostory-web      
   > npm test          run all the test.js file
   > npm run build     build and put all static assets for deployment in build dir
   > npm start         run it at http://localhost:3000 for debug

5. 文件 index.js
    是整个React应用的入口，现在举个例子，我们要实现一个查询照片细节的功能，那就在index.js
   中添加一个组件 PhotoDetails
   

   import PhotoDetails from './PhotoDetails';
   import './index.css';
   
   ReactDOM.render(
     <PhotoDetails />,
     document.getElementById('root')
   );

6. 然后我们新建一个js文件来实现PhotoDetails
   , 它从React.Component
   扩展而来。这个组件需要渲染一个表单，里面包含两个输入框和一个按钮，还有一个列表显示查询结果。当点击按钮时，会触发向后台的gateway发送POST
   请求。

7. 当你执行 npm start
   来本地运行时，你需要在 package.json
   定义代理指向后台gateway。

   {
       "proxy": "http://gateway.xxxxxxxxxxxxxxx.com",
   }

部署到 PCF

由于React应用只包含静态文件（html, css, javascript, img），在部署上PCF的时候，你可以选择 Staticfile
buildpack ，下面是部署的详细步骤。

1. 在WebUI项目的根目录创建 manifest.yml
   ，如下所示：

   ---
   applications:
   - name: photostory-web
     path: build/
     instances: 1
     memory: 512M
     buildpacks:
       - staticfile-buildpack

2. 在WebUI项目的public
   目录创建 Staticfile
   文件 ，如下所示：

   pushstate: enabled

   你还可以在Staticfile
   文件中配置更多属性，详见 <https://docs.pivotal.io/pivotalcf/2-6/buildpacks/staticfile/index.html#staticfile>

3. 因为该WebUI应用需要与后台gateway进行通信，所以你还需要在 nginx.conf
   文件中配置反向代理，在public
   目录中创建该文件，内容如下：

   worker_processes 1;
   daemon off;
   
   error_log <%= ENV["APP_ROOT"] %>/nginx/logs/error.log;
   events { worker_connections 1024; }
   
   http {
     log_format cloudfoundry '$http_x_forwarded_for - $http_referer - [$time_local] "$request" $status $body_bytes_sent';
     access_log <%= ENV["APP_ROOT"] %>/nginx/logs/access.log cloudfoundry;
     default_type application/octet-stream;
     include mime.types;
     sendfile on;
     gzip on;
     tcp_nopush on;
     keepalive_timeout 30;
   
     server {
       listen <%= ENV["PORT"] %>;
       server_name localhost;
   
       location gateway {
           proxy_pass "https://photogateway.xxxxxxxxxxxxxx.com";
       }
   
       location  {
         root <%= ENV["APP_ROOT"] %>/public;
         # index index.html index.htm Default.htm;
         try_files $uri /index.html;
       }
     }
   }

   一般情况下，你只需要修改proxy_pass
   ，当然如果需要的话你可以将URL重写，见下面这个例子，向gateway转发前把photo
   从路径中去掉了。

   location /rti/gateway {
           proxy_pass "https://photogateway.xxxxxxxxxxxxxx.com";
           rewrite ^/photo/gateway/(.+)$ /gateway/$1 break;
       }

4. 好了，开始构建应用

   > npm run build

5. 现在就可以用cf push命令把WebUI往PCF部署了。

   > cf push

   当部署成功完成后，你可以从输出结果中查看访问WebUI的URL，当然你也可以执行cf app photostory-web
   去查询访问URL，试试看能否正常访问。

END