Versions Compared

Old Version 3

changes.mady.by.user Sumit Gupta

Saved on

compared with

New Version Current

changes.mady.by.user Sumit Gupta

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
PLEASE NOTE THAT THIS IS A WORK IN PROGRESS

This page covers adding a UI proxy service to Apache Knox.

...

Code Block
git clone https://github.com/angularsumitg/angular2-quickstart.git my-proj
cd my-proj
npm install
npm start

...

First you need to create a directory to hold your new service definition files. There are two conventions at work here that ultimately (but only loosely) relate to the content of the service.xml it will contain. Below the <GATEWAY_HOME>/data/services directory you will need to create a parent and child directory exampleexampleui/0.0.1. As a convention the names of these directories duplicate the values in the attributes of the root element of the contained service.xml.

Create the two files with the content shown below and place them in the directories indicated. The links also provide the files for your convenience.

 

<GATEWAY_HOME>/data/services/exampleexampleui/0.0.1/service.xml

Code Block
<service role="EXAMPLEUI" name="exampleui" version="0.0.1">
    <policies>
        <policy role="webappsec"/>
        <policy role="authentication" name="Anonymous"/>
        <policy role="rewrite"/>
        <policy role="authorization"/>
    </policies>
    <routes>
        <route path="/example">
        </route>
        <route path="/example/**">
        </route>
    </routes>
    <dispatch classname="org.apache.hadoop.gateway.dispatch.PassAllHeadersDispatch"/>
</service>

<GATEWAY_HOME>/data/services/exampleexampleui/0.0.1/rewrite.xml

 
Code Block
<rules>
    <rule dir="IN" name="EXAMPLEUI/exampleui/inbound/root" pattern="*://*:*/**/example/">
        <rewrite template="{$serviceUrl[EXAMPLEUI]}/"/>
    </rule>
    <rule dir="IN" name="EXAMPLEUI/exampleui/inbound/path" pattern="*://*:*/**/example/{**}">
        <rewrite template="{$serviceUrl[EXAMPLEUI]}/{**}"/>
    </rule>
</rules>
 

Once that is complete, the topology file must be updated to activate this new service in the runtime. In this case the sandbox.xml topology file is used but you may have another topology file such as default.xml. Edit which ever topology file you prefer and add the… markup shown below. If you aren’t using sandbox.xml be careful to replace sandbox with the name of your topology file through these examples.


<GATEWAY_HOME>/conf/topologies/sandbox.xml


 
Code Block
<topology>
  ...
  <service>
    <role>EXAMPLEUI</role>   
    <url>http://localhost:3000</url>
  </service>
</topology>

With all of these changes made you must restart your Knox gateway server. Often times this isn’t necessary but adding a new service definition under [<GATEWAY_HOME>/data/services requires restart.

...

 

Code Block
<service><routes><route path=“/example/**"

  • This tells the gateway that all requests starting starting with /example/ are handled by this service.
  • Due to a limitation this will not include requests to /example (i.e. no trailing /) so we need another rule for that
  • The ** means zero or more paths similar to Ant.
  • The scheme, host, port, gateway and topology components are not included (e.g. https://localhost:8443/gateway/sandbox)
  • Routes can, but typically don’t, take query parameters into account.In this simple form there is no direct relationship between the route path and the rewrite rules!don’t, take query parameters into account.
  • In this simple form there is no direct relationship between the route path and the rewrite rules!

Code Block
<policies>
        <policy role="webappsec"/>
        <policy role="authentication"name="Anonymous"/>
        <policy role="rewrite"/>
        <policy role="authorization"/>
    </policies>
  • This sets up the policies (providers) to be used by this specific service. This overrides the topology level providers for the same role. Here for instance the "Anonymous" authentication provider is key. If you do not add this list of policies here, you need to either have a topology file with an Anonymous authentication provider specified or get challenged for authentication in the browser depending on what authentication mechanism you choose.

 

Code Block
    <dispatch classname="org.apache.hadoop.gateway.dispatch.PassAllHeadersDispatch"/>

 

  • This service specifies a special Dispatch that passes through all the headers and unlike the default dispatch that is used for REST API invocations, this dispatch does not attempt to do any authentication or kerberos handshake on behalf of the original request. 

 

rewrite.xml

The rewrite.xml is configuration that drives the rewrite provider within Knox. It is important to understand that at runtime for a given topology, all of the rewrite.xml files for all active services are combined into a single file. This explains some of the seemingly complex patterns and naming conventions.

 

Code Block
<rules><rule dir="IN"
  • Here dir means direction and IN means it should apply to a request.
  • This rule is a global rule meaning that any other service can request that a URL be rewritten as they process URLs. The rewrite provider keeps distinct trees of URL patterns for IN and OUT rules so that services can be specific about which to apply.
  • If it were not global it would not have a direction and probably not a pattern in the element.

...

 

Code Block
<topology><service><url>http://localhost:3000

  • This populates the data used by {$serviceUrl[EXAMPLEUI]} in the rules with the correct target URL.

 

 

Taking care of slash’ness

So now the question of the trailing slash comes in. With that comes the opportunity to talk about rewriting parts of the body of the response. 
So again, the goal is to get this URL to work (no trailing slash)
The problem is that the page has links as the ones below (this can be seen by viewing the page source in the browser).
Code Block
<link rel="stylesheet" href="styles.css">

<!-- Polyfill(s) for older browsers -->

<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>

<script src="node_modules/reflect-metadata/Reflect.js"></script>

<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script> 
All these ‘href' and ‘src' tags work great if the main page is at the root of the URL, like http://localhost:3000, but once you have a path in the URL like the additional path needed by the gateway e.g. ‘gateway/sandbox/example’ then they don’t resolve too well without the slash. For instance, href=“styles.css” without the trailing slash will resolve to 
To remedy this, we are going to rewrite these ‘href' and ‘src’ tags so that path is fully qualified i.e. styles.css should become ‘/gateway/sandbox/example/styles/css’.
Here are the new rules we need.

new rewrite.xml rules

 
Code Block
<rule dir="OUT" name="EXAMPLEUI/exampleui/outbound/systemjs" pattern = "systemjs.config.js">
    <rewrite template="{$frontend[path]}/example/systemjs.config.js"/>
</rule>
<rule dir="OUT" name="EXAMPLEUI/exampleui/outbound/styles" pattern="styles.css">
    <rewrite template="{$frontend[path]}/example/styles.css"/>
</rule>
<rule dir="OUT" name="EXAMPLEUI/exampleui/outbound/nodemodules" pattern="node_modules/{**}">
    <rewrite template="{$frontend[path]}/example/node_modules/{**}"/>
</rule>
 
Now the rules include rewriting the response in the OUTBOUND direction, going out from Knox to the browser. These rules leverage a Rewrite function $frontend[path] to get the ‘/gateway/sandbox’ portion of the URL.
Please note that every time you change the rewrite or service files you need to redeploy the topology. This can be either done by touching the topology file or by deleting the deployed topology directory and restarting Knox.
Now the links shown previously for the main page should look like this:
Code Block
<link rel="stylesheet" href="/gateway/sandbox/example/styles.css">

<!-- Polyfill(s) for older browsers -->

<script src="/gateway/sandbox/example/node_modules/core-js/client/shim.min.js"></script>

<script src="/gateway/sandbox/example/node_modules/zone.js/dist/zone.js"></script>

<script src="/gateway/sandbox/example/node_modules/reflect-metadata/Reflect.js"></script>

<script src="/gateway/sandbox/example/node_modules/systemjs/dist/system.src.js"></script>

<script src="/gateway/sandbox/example/systemjs.config.js"></script> 
The page however still doesn’t render correct. This is because while we can now load the JS files, they contain unresolvable paths in the javascript itself. If this were a static page of old, we would be done a while ago!
By navigating to the URL https://localhost:8443/gateway/sandbox/example/systemjs.config.js you can see the issue being in this snippet:
Code Block
...
 System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the apps folder
      app: 'apps',
...
Both ‘node_modules/‘ and ‘apps’ needs the proper context. Lets go back to the rewrite file and fix this.

Final rewrite.xml changes

Here are the final additions you need. A neat trick here is the use of a Rules Filter to contain the rules to the content type of javascript.
Here is the final file Rewrite File
Code Block
<rule dir="OUT" name="EXAMPLEUI/exampleui/outbound/apps">
    <rewrite template="example/apps"/>
</rule>
<rule dir="OUT" name="EXAMPLEUI/exampleui/outbound/nodemodule">
    <rewrite template="example/node_modules"/>
</rule>

<filter name="EXAMPLEUI/exampleui/outbound/app">
    <content type="application/javascript">
        <apply path="apps" rule="EXAMPLEUI/exampleui/outbound/apps"/>
        <apply path="node_modules" rule="EXAMPLEUI/exampleui/outbound/nodemodule"/>
    </content>
</filter>


Tying it back to service.xml

The filter needs to be tied back to the service file. So now the service file looks like this in its entirety.
Here is the final file Service File
 
Code Block
<service role="EXAMPLEUI" name="exampleui" version="0.0.1">
    <policies>
        <policy role="webappsec"/>
        <policy role="authentication" name="Anonymous"/>
        <policy role="rewrite"/>
        <policy role="authorization"/>
    </policies>
    <routes>
        <route path="/example">
        </route>
        <route path="/example/**">
            <rewrite apply="EXAMPLEUI/exampleui/outbound/app" to="response.body"/>
        </route>
    </routes>
    <dispatch classname="org.apache.hadoop.gateway.dispatch.PassAllHeadersDispatch"/>
</service>
 

Now the page should load up fine. If you were to check the JS snippet now, you should see this
Code Block
...
 System.config({
    paths: {
      // paths serve as alias
      'npm:': 'example/node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the example/apps folder
      app: 'example/apps',

... 

 

...