Merge pull request #4 from falk-werner/nginx

Simplified Example

- enhanced capabilities of example (most ca be viewed in browser)
- added nginx to serve HTML, JS, CSS, CGI
- added fcgiwrap to access CGI scripts
- cleanup temporary npm files

Dockerfile

@@ -3,6 +3,7 @@ ARG CODENAME=bionic
 
 FROM ${REGISTRY_PREFIX}ubuntu:${CODENAME} as builder
 
+ARG DEBIAN_FRONTEND=noninteractive
 RUN set -x \
     && apt update \
     && apt upgrade -y \
@@ -17,7 +18,9 @@ RUN set -x \
         uuid-dev \
         wget \
         libconfig-dev \
-        libpam0g-dev
+        libpam0g-dev \
+        nginx \
+        fcgiwrap
 
 ARG PARALLELMFLAGS=-j2
 
@@ -138,8 +141,11 @@ RUN set -x \
     && cd /usr/local/src/www \
     && npm update --no-save \
     && npm run build \
+    && rm -rf /tmp/npm-* \
+    && rm -rf /tmp/v8-* \
     && mkdir -p /var/www \
-    && cp -r ./dist/. /var/www/
+    && cp -r ./dist/. /var/www/ \
+    && chmod +x /var/www/cgi-bin/*
 
 ARG USERID=1000
 RUN set -x \

README.md

@@ -13,9 +13,9 @@ Example of webfuse.
       --device /dev/fuse --cap-add SYS_ADMIN --security-opt apparmor:unconfined \
       webfuse
 
-Open a webbrowser and visit http://localhost:8080 and establish a connection.
+Open a webbrowser, visit http://localhost:8080 and follow the instruction on the screen.
 
-Once connected, you can display the provided filesystem inside the container.
+Once connected, you can also display the provided filesystem inside the container.
 
     cat /tmp/test/hello.txt
 

etc/nginx/fcgi.conf

@@ -0,0 +1,21 @@
+fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
+fastcgi_param  QUERY_STRING       $query_string;
+fastcgi_param  REQUEST_METHOD     $request_method;
+fastcgi_param  CONTENT_TYPE       $content_type;
+fastcgi_param  CONTENT_LENGTH     $content_length;
+fastcgi_param  SCRIPT_NAME        $fastcgi_script_name;
+fastcgi_param  REQUEST_URI        $request_uri;
+fastcgi_param  DOCUMENT_URI       $document_uri;
+fastcgi_param  DOCUMENT_ROOT      $document_root;
+fastcgi_param  SERVER_PROTOCOL    $server_protocol;
+fastcgi_param  GATEWAY_INTERFACE  CGI/1.1;
+fastcgi_param  SERVER_SOFTWARE    nginx/$nginx_version;
+fastcgi_param  REMOTE_ADDR        $remote_addr;
+fastcgi_param  REMOTE_PORT        $remote_port;
+fastcgi_param  SERVER_ADDR        $server_addr;
+fastcgi_param  SERVER_PORT        $server_port;
+fastcgi_param  SERVER_NAME        $server_name;
+
+fastcgi_index  index.php;
+
+fastcgi_param  REDIRECT_STATUS    200;

etc/nginx/mime.types

@@ -0,0 +1,48 @@
+types {
+  text/html                             html htm shtml;
+  text/css                              css;
+  text/xml                              xml rss;
+  image/gif                             gif;
+  image/jpeg                            jpeg jpg;
+  application/x-javascript              js;
+  text/plain                            txt;
+  text/x-component                      htc;
+  text/mathml                           mml;
+  image/png                             png;
+  image/x-icon                          ico;
+  image/x-jng                           jng;
+  image/vnd.wap.wbmp                    wbmp;
+  application/java-archive              jar war ear;
+  application/mac-binhex40              hqx;
+  application/pdf                       pdf;
+  application/x-cocoa                   cco;
+  application/x-java-archive-diff       jardiff;
+  application/x-java-jnlp-file          jnlp;
+  application/x-makeself                run;
+  application/x-perl                    pl pm;
+  application/x-pilot                   prc pdb;
+  application/x-rar-compressed          rar;
+  application/x-redhat-package-manager  rpm;
+  application/x-sea                     sea;
+  application/x-shockwave-flash         swf;
+  application/x-stuffit                 sit;
+  application/x-tcl                     tcl tk;
+  application/x-x509-ca-cert            der pem crt;
+  application/x-xpinstall               xpi;
+  application/zip                       zip;
+  application/octet-stream              deb;
+  application/octet-stream              bin exe dll;
+  application/octet-stream              dmg;
+  application/octet-stream              eot;
+  application/octet-stream              iso img;
+  application/octet-stream              msi msp msm;
+  audio/mpeg                            mp3;
+  audio/x-realaudio                     ra;
+  video/mpeg                            mpeg mpg;
+  video/quicktime                       mov;
+  video/x-flv                           flv;
+  video/x-msvideo                       avi;
+  video/x-ms-wmv                        wmv;
+  video/x-ms-asf                        asx asf;
+  video/x-mng                           mng;
+}

etc/nginx/nginx.conf

@@ -0,0 +1,37 @@
+user user user;
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include     /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    server {
+        listen 8080;
+        server_name  localhost;
+
+        root /var/www;
+
+        location / {
+            index index.html;
+        }
+
+        location /webfuse-api {
+            proxy_pass http://localhost:8081;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+            proxy_set_header Host $host;        
+        }
+
+        location /cgi-bin/ {
+            fastcgi_intercept_errors on;
+            include fcgi.conf;
+
+            fastcgi_pass unix:/tmp/fcgi.sock;
+        }
+    }
+}

etc/services.d/fcgi/run

@@ -0,0 +1,4 @@
+#!/usr/bin/execlineb -P
+
+s6-setuidgid user
+/usr/sbin/fcgiwrap -s unix:/tmp/fcgi.sock

etc/services.d/nginx/run

@@ -0,0 +1,3 @@
+#!/usr/bin/execlineb -P
+
+nginx -g "daemon off;"

etc/webfused.conf

@@ -5,8 +5,8 @@ version = { major = 1, minor = 0 }
 server:
 {
     vhost_name = "localhost"
-    port = 8080
-    document_root = "/var/www"
+    port = 8081
+    # document_root = "/var/www"
 }
 
 filesystems:

www/src/cgi-bin/get-contents

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+echo "Content-Type: text/plain"
+echo ""
+
+if [ -f /tmp/test/hello.txt ] ; then
+cat /tmp/test/hello.txt
+exit 0
+else
+echo "File Not Found"
+exit 1
+fi

www/src/cgi-bin/list-dir

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+echo "Content-Type: text/plain"
+echo ""
+
+ls -1a /tmp/test
+exit 0

www/src/connection_view.js

@@ -16,7 +16,7 @@ export class ConnectionView {
         
         this.urlTextbox = document.createElement("input");
         this.urlTextbox.type = "text";
-        this.urlTextbox.value = window.location.href.replace(/^http/, "ws");
+        this.urlTextbox.value = window.location.href.replace(/^http/, "ws") + 'webfuse-api';
         connectBox.appendChild(this.urlTextbox);
 
         this.connectButton = document.createElement("input");
@@ -25,8 +25,8 @@ export class ConnectionView {
         this.connectButton.addEventListener("click", () => { this._onConnectButtonClicked(); });
         connectBox.appendChild(this.connectButton);
 
-
         const authenticateBox = document.createElement("div");
+        authenticateBox.classList.add('hidden');
         this.element.appendChild(authenticateBox);
 
         const authLabel = document.createElement("span");

www/src/index.html

@@ -12,6 +12,31 @@
         <div class="title">Connection</div>
         <div id="connection"></div>
     </div>
+
+    <div class="window">
+        <div class="title">Info</div>
+        <div>
+            <p>Please connect to start providing files. This page updates every 5 seconds.</p>
+            <p>There are two files provided in this example:
+                <ul>
+                    <li><b>hello.txt:</b> a plain text file</li>
+                    <li><b>sayhello.sh:</b> a shell script printing a text to stdout</li>
+                </ul>
+            </p>
+            <p>To display the files, see /tmp/test directory inside the container.</p>
+        </div>
+    </div>
+
+    <div class="window">
+        <div class="title">/tmp/test</div>
+        <div id="directory"></div>
+    </div>
+
+    <div class="window">
+        <div class="title">/tmp/test/hello.txt</div>
+        <div id="contents"></div>
+    </div>
+
 </div>
 
 <%= htmlWebpackPlugin.tags.bodyTage %>

www/src/index.js

@@ -7,6 +7,22 @@ function mode(value) {
     return parseInt(value, 8);
 }
 
+function updateContents() {
+    const directory = document.getElementById('directory');
+    fetch("cgi-bin/list-dir").then(response => response.text()).then((text) => {
+        directory.textContent = text;
+    })
+    .catch(() => { directory.innerHTML = ''; });
+
+    const contents = document.getElementById('contents');
+    fetch("cgi-bin/get-contents").then(response => response.text()).then((text) => {
+        contents.textContent = text;
+    })
+    .catch(() => { contents.innerHTML = ''; });
+
+    window.setTimeout(updateContents, 5 * 1000);
+}
+
 function startup() {
     const provider = new FileSystemProvider({
         inode: 1,
@@ -20,6 +36,7 @@ function startup() {
     const client = new Client();
     const connectionView = new ConnectionView(client, provider);    
     document.getElementById('connection').appendChild(connectionView.element);
+    updateContents();
 }
 
 window.onload = startup;

www/src/style/main.css

@@ -15,7 +15,7 @@ html, body {
     border-radius: 5px;
     padding: 10px;
     margin-bottom: 25px;
-    color: white;
+    color: #c0c0c0;
 }
 
 .window .title {
@@ -45,3 +45,11 @@ html, body {
     text-align: center;
 }
 
+.hidden {
+    display: none;
+    visibility: hidden;
+}
+
+#contents, #directory {
+    white-space: pre;
+}

www/webpack.config.js

@@ -18,7 +18,8 @@ module.exports = {
             template: "./src/index.html"
         }),
         new CopyWebpackPlugin([
-            { from: './src/style', to: 'style' }
+            { from: './src/style', to: 'style' },
+            { from: './src/cgi-bin', to: 'cgi-bin', copyPermissions: true }
         ])
     ],
     resolve: {