wip

.devcontainer/devcontainer.json

@@ -0,0 +1,6 @@
+{
+  "dockerComposeFile": ["../docker-compose.yml", "./docker-compose.yml"],
+  "postCreateCommand": "test -e /app/.git || cp -Tr /original /app",
+  "service": "app",
+  "workspaceFolder": "/app"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,21 @@
+version: "3.7"
+services:
+  app: &app
+    build:
+      context: .
+      target: workspace
+    environment:
+      SHELL: /bin/zsh
+      YAICHI_EXCLUDED_LISTENING_PORTS: 12345
+    command: |
+      sh -c 'while sleep 3600; do :; done'
+    volumes:
+      - app:/app
+      - home:/root
+      - .:/original:cached
+      - ~/.gitconfig:/root/.gitconfig:ro
+      - ~/.zshrc:/root/.zshrc:ro
+      - ~/.netrc:/root/.netrc:ro
+volumes:
+  app:
+  home:

.gitignore

@@ -0,0 +1,3 @@
+front/node_modules/
+front/.cache/
+front/dist/

Dockerfile

@@ -3,7 +3,7 @@ FROM alpine:3.6 AS build-env
 ENV NGINX_MRUBY_VERSION v2.1.5
 ENV NGINX_CONFIG_OPT_ENV '--with-ld-opt="-static" --prefix=/usr/local/nginx --with-http_stub_status_module --with-stream --without-stream_access_module'
 ENV DOCKER_CHANNEL stable
-ENV DOCKER_VERSION 17.03.2-ce
+ENV DOCKER_VERSION 19.03.4
 
 RUN apk add --no-cache wget ruby-rake git gcc make tar bison openssl-dev pcre-dev libc-dev
 RUN mkdir -p /usr/local/src
@@ -26,14 +26,30 @@ COPY mrbgem mrbgem
 RUN sh build.sh
 RUN make install
 
-FROM busybox
+FROM node:12.13.0-alpine AS workspace
 
-RUN mkdir -p /usr/local/nginx/logs
+RUN apk add --no-cache zsh git less curl perl gnupg
 
 COPY --from=build-env /usr/local/nginx/sbin/nginx /usr/bin/nginx
 COPY --from=build-env /usr/bin/docker /usr/bin/docker
-COPY hook /usr/local/nginx/hook
-COPY conf /usr/local/nginx/conf
-COPY data /usr/local/nginx/data
 
-CMD ["/usr/bin/nginx"]
+RUN mkdir -p /usr/local/nginx/logs /app
+
+FROM workspace AS builder
+
+RUN yarn install
+RUN yarn build
+
+FROM busybox
+
+RUN mkdir -p /usr/local/nginx/logs /app
+
+WORKDIR /app
+
+COPY --from=builder /usr/local/nginx/sbin/nginx /usr/bin/nginx
+COPY --from=builder /usr/bin/docker /usr/bin/docker
+
+COPY --from=builder conf /app/conf
+COPY --from=builder front/dist /app/front/dist
+
+CMD ["/usr/bin/nginx", "-c", "/app/conf/nginx.conf"]

build_config.rb

@@ -15,7 +15,7 @@
   # Recommended for ngx_mruby
   #
   # conf.gem :github => 'iij/mruby-io'
-  # conf.gem :github => 'iij/mruby-env'
+  conf.gem :github => 'iij/mruby-env'
   # conf.gem :github => 'iij/mruby-dir'
   # conf.gem :github => 'iij/mruby-digest'
   # conf.gem :github => 'iij/mruby-process'

circle.yml

@@ -9,5 +9,4 @@ jobs:
       - setup_remote_docker:
           version: 17.07.0-ce
       - run: |
-          rm docker-compose.override.yml
           bin/test

conf/nginx.conf

@@ -15,17 +15,39 @@ http {
         mruby_server_context_handler_code '
             s = Nginx::Server.new
 
-            Docker::Container.me!.exposed_ports.map(&:last).each do |port|
+            (Docker::Container.me!.exposed_ports.map(&:last) - ENV["YAICHI_EXCLUDED_LISTENING_PORTS"]&.split(",").map(&:to_i).compact).each do |port|
                 s.add_listener({address: port.to_s})
             end
         ';
 
-        location = / {
-            mruby_content_handler /usr/local/nginx/hook/index.rb;
+        location /containers {
+            add_header 'Access-Control-Allow-Origin' '*';
+            default_type application/json;
+
+            mruby_content_handler_code '
+                r = Nginx::Request.new
+                me = Docker::Container.me!
+                Nginx.echo(JSON.stringify(
+                    (Docker::Container.all - [me]).sort_by(&:name).map do |c|
+                        {
+                            id: c.id,
+                            name: c.name,
+                            fqdn: "#{c.host}.#{r.hostname}",
+                            ports: me.exposed_ports.map {|remote, local|
+                                {
+                                    remote: remote,
+                                    local: local,
+                                    available: c.reachable_from?(me) && c.listening?(me, local)
+                                }
+                            }
+                        }
+                    end
+                ))
+            ';
         }
 
         location / {
-            root /usr/local/nginx/data;
+            root /app/front/dist;
         }
     }
 
@@ -35,7 +57,7 @@ http {
         mruby_server_context_handler_code '
             s = Nginx::Server.new
 
-            Docker::Container.me!.exposed_ports.map(&:last).each do |port|
+            (Docker::Container.me!.exposed_ports.map(&:last) - ENV["YAICHI_EXCLUDED_LISTENING_PORTS"]&.split(",").map(&:to_i).compact).each do |port|
                 s.add_listener({address: port.to_s})
             end
         ';
@@ -53,10 +75,24 @@ http {
             proxy_send_timeout 365d;
             proxy_read_timeout 365d;
 
-            mruby_set $backend /usr/local/nginx/hook/proxy.rb;
-            proxy_pass   http://$backend;
-
             client_max_body_size 0;
+
+            mruby_set_code $backend '
+                r = Nginx::Request.new
+                c = Nginx::Connection.new
+                me = Docker::Container.me!
+
+                if (container = Docker::Container.find_by_hostname(r.hostname))
+                    "#{container.ip_address(me)}:#{c.local_port}"
+                end
+            ';
+
+            if ($backend) {
+                proxy_pass http://$backend;
+                break;
+            }
+
+            root /app/front/dist;
         }
     }
 }

docker-compose.yml

@@ -1,10 +1,13 @@
-version: "3.0"
+version: "3.7"
 services:
   app:
-    build: .
+    build:
+      context: .
+      target: workspace
     ports:
       - 80:3000
       - 8080:80
+      - 12345:12345
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
   dummy:

front/index.html

@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta http-equiv="Content-Style-Type" content="text/css" />
+    <title>Yaichi</title>
+    <link rel="icon" type="image/png" href="./data/favicon.png" />
+  </head>
+  <body>
+    <a href="https://github.com/mtsmfm/yaichi">
+      <img
+        style="position: absolute; top: 0; right: 0; border: 0;"
+        src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
+        alt="Fork me on GitHub"
+        data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
+      />
+    </a>
+    <div id="root"></div>
+    <script src="./src/index.tsx"></script>
+  </body>
+</html>

front/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@material-ui/core": "^4.5.1",
+    "@material-ui/icons": "^4.5.1",
+    "@types/react": "^16.9.9",
+    "@types/react-dom": "^16.9.2",
+    "parcel-bundler": "^1.12.4",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2"
+  },
+  "devDependencies": {
+    "parcel-plugin-bundle-visualiser": "^1.2.0",
+    "typescript": "^3.6.4"
+  },
+  "browserslist": [
+    "last 1 Chrome version"
+  ],
+  "scripts": {
+    "start": "parcel index.html data/**/* --port 1234 --hmr-port 12345",
+    "build": "NODE_ENV=production parcel build index.html data/**/*"
+  }
+}

front/src/@types/assets.d.ts

@@ -0,0 +1 @@
+declare module "*.png";

front/src/components/App.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Waiting } from "./Waiting";
+import { Dashboard } from "./Dashboard";
+import CssBaseline from "@material-ui/core/CssBaseline";
+
+export const App = () => {
+  const Main = () => {
+    switch (location.hostname) {
+      case "localhost":
+      case "lvh.me":
+        return <Dashboard />;
+      default:
+        return (
+          <Waiting
+            fqdn={location.hostname}
+            port={Number(location.port.length === 0 ? 80 : location.port)}
+          />
+        );
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <Main />
+    </React.Fragment>
+  );
+};

front/src/components/ContainerItem.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import Switch from "@material-ui/core/Switch";
+import Notifications from "@material-ui/icons/Notifications";
+import { Container } from "../hooks/useContainerProxiable";
+
+export const ContainerItem: React.FC<{
+  container: Container;
+  enableNotification: () => void;
+  disableNotification: () => void;
+  notificationEnabled: boolean;
+}> = ({
+  container,
+  notificationEnabled,
+  enableNotification,
+  disableNotification
+}) => {
+  return (
+    <>
+      <ListItem>
+        <ListItemText primary={container.name} />
+        <ListItemIcon>
+          <Notifications />
+        </ListItemIcon>
+        <Switch
+          checked={notificationEnabled}
+          onChange={e => {
+            if (e.target.checked) {
+              enableNotification();
+            } else {
+              disableNotification();
+            }
+          }}
+        />
+      </ListItem>
+    </>
+  );
+};