Add example Dev Container (#1)

* Copy template from Nav2 * Simplify Dockerfile to use installable ros distro binaries * Simplify Dev Container config * Copy template from Nav2 * Simplify dot ignore files * Cleanup Docker ignore file * Apt install pip before pip install * Fix absolute path * Install nav2_bringup as overall dependency * Rename dev container * Source ros setup instead of overlay * Copy nav2 launch file from rolling branch with added headless LaunchConfiguration as this hasn't been back ported to humble - ros-navigation/navigation2#3527 * Add example snippet from Nav2 * Simplify launch snippet * Rename Action * Simplify Action * Target visualizer stage to minimize the need for Codespaces Prebuilds * Omit version tab and label info for now * Extend readme for demo * Fix missing turtlebot3 meshes in gzweb by installing turtlebot3-description and symlinking to common mesh folder given this is still broken for humble
rplayground · May 24, 2023 · 0af990b · 0af990b
1 parent 0d00bb2
commit 0af990b
Show file tree

Hide file tree

Showing 20 changed files with 2,524 additions and 1 deletion.
diff --git a/.devcontainer/caddy/Caddyfile b/.devcontainer/caddy/Caddyfile
@@ -0,0 +1,132 @@
+# Snippet for global matchers and variables
+# to logically expression request conditions
+# E.g. for conditionally changing redirects
+(globals) {
+	# Use gzip compression for all responses
+	encode gzip
+
+	# Matcher for http request scheme. E.g. "http" or "https"
+	@http_scheme {
+		expression {http.request.scheme}=="https" || {header.X-Forwarded-Scheme}=="https" || {header.X-Forwarded-Proto}=="https"
+	}
+	# If any http scheme is "https", then use "wss"
+	vars @http_scheme WsScheme "wss"
+	# Else default to "ws"
+	vars WsScheme "ws"
+
+	# Matcher for forwarded request headers
+	@host_forwarded {
+		header X-Forwarded-Host *
+	}
+	# If http headers exists, then use them
+	vars @host_forwarded ReqHost {header.X-Forwarded-Host}
+	# Else default to host in request
+	vars ReqHost {http.request.hostport}
+
+	# Matcher for websocket connection upgrade requests
+	@websockets {
+		# Avoid case sensitivity issues when matching field values
+		# E.g. when values are rewritten by Codespace port forwarding
+		header_regexp Connection (?i)(Upgrade)
+		header Upgrade websocket
+	}
+}
+
+# Snippet for redirect with given URL queries values
+# to simplify remote development with web apps
+# E.g auto redirect websocket URL to match request scheme
+(redirect) {
+	# Configure redirect to match request scheme
+	vars LayoutUrl "/assets/foxglove/nav2_layout.json"
+	vars DataSourceUrl "{vars.WsScheme}://{vars.ReqHost}{args.0}/"
+	redir /autoconnect "{args.0}/?ds=foxglove-websocket&ds.url={vars.DataSourceUrl}"
+	redir /autolayout "{args.0}/?ds=foxglove-websocket&ds.url={vars.DataSourceUrl}&layoutUrl={vars.LayoutUrl}"
+}
+
+# Snippet for dummy imports
+(dummy) {
+}
+
+# Snippet for enabling mobile web app features
+# to improve user experience on small screen devices
+# E.g. for enabling fullscreen mode on iOS and Android
+(mobile) {
+	# Match for directory redirects to index.html
+	route / {
+		# Inject link to manifest just after <head> tag
+		# https://developer.mozilla.org/docs/Web/Manifest
+		replace `<head>` `<head><link rel="manifest" href="manifest.json" crossorigin="use-credentials"/>`
+	}
+	# Redirect relative handle_path'ed manifest.json to /manifests directory
+	redir /manifest.json /assets{http.request.orig_uri.path.dir}manifest.json
+}
+
+# Snippet for hosted web app using websockets
+# to serve static files and reverse proxying connections
+# E.g. for serving GzWeb and Foxglove web apps
+(app) {
+	# handle and strip path prefix from redirect
+	handle_path {args.0}/* {
+		# Set root directory for static files
+		root * {http.vars.root}{args.0}
+		# Enable mobile web app features
+		import mobile
+		# Reverse proxy websockets to backend address
+		reverse_proxy @websockets {args.1}
+		# Import custom snippets
+		import {args.2} {args.0}
+	}
+}
+
+# Listen for http requests on port 8080
+# regardless of hostname or domain address
+# E.g. whatever Codespaces assigns to host
+:8080 {
+	# Include global matchers and variables
+	import globals
+	root * {$ROOT_SRV:/srv}
+	file_server browse
+
+	# Handle root content
+	# I.e. assets internal to workspace
+	handle /* {
+		# Template manifest.json files
+		templates */manifest.json {
+			mime application/json
+		}
+	}
+
+	# Handle nav2 web app
+	# I.e. main landing page
+	handle_path /nav2/* {
+		root * {http.vars.root}/nav2
+		import mobile
+		# Render markdown files as html
+		templates
+	}
+
+	# Matcher for requests without browse query
+	@no_browse {
+		path /
+		not query browse=true
+	}
+	# Redirect to nav2 web app by default
+	redir @no_browse /nav2/
+
+	# Import app snippets for web apps
+	import app "/gzweb" "localhost:9090" "dummy"
+	import app "/foxglove" "localhost:8765" "redirect"
+
+	# Handle glances web app
+	redir /glances /glances/
+	handle_path /glances/* {
+		import mobile
+		# Reverse proxy to glances backend
+		reverse_proxy * "localhost:61208"
+	}
+
+	# For debugging
+	# log {
+	# 	output file /var/log/caddy/server.log
+	# }
+}
diff --git a/.devcontainer/caddy/srv/assets/foxglove/manifest.json b/.devcontainer/caddy/srv/assets/foxglove/manifest.json
@@ -0,0 +1,40 @@
+{
+    "name": "Foxglove: {{placeholder "http.vars.ReqHost"}}",
+    "short_name": "Foxglove: {{placeholder "http.vars.ReqHost"}}",
+    "icons": [
+      {
+        "src": "/media/icons/foxglove/any_icon_x512.webp",
+        "sizes": "512x512",
+        "type": "image/webp",
+        "purpose": "any"
+      },
+      {
+        "src": "/media/icons/foxglove/maskable_icon_x512.webp",
+        "sizes": "512x512",
+        "type": "image/webp",
+        "purpose": "maskable"
+      }
+    ],
+    "id": "/foxglove/",
+    "start_url": "/foxglove/autoconnect",
+    "theme_color": "#6F3BE8",
+    "background_color": "#6F3BE8",
+    "display": "fullscreen",
+    "shortcuts" : [
+        {
+          "name": "Auto Connect",
+          "url": "/foxglove/autoconnect",
+          "description": "Auto connect to default data source"
+        },
+        {
+          "name": "Auto Layout",
+          "url": "/foxglove/autolayout",
+          "description": "Auto connect using default layout"
+        },
+        {
+          "name": "Manual Connect",
+          "url": "/foxglove/",
+          "description": "Manually connect to data source"
+        }
+      ]
+}