PostUp, PostDown & AllowedIPs

[sidewaysglance]

Looks good, but is there any way of using the PostUp, PostDown & AllowedIPs features with wireguard-ui?

[dln]

Excellent idea! Perhaps we should add an "advanced view" to just be able to edit the config fields directly?

[sidewaysglance]

That would be good. I would do it myself and push it if I could get around this:
https://stackoverflow.com/questions/58383667/trying-to-build-embarkstudios-wireguard-ui

[dln]

Easiest way to build when developing is to use the Makefile. The frontend bits are first built with npm, and then assetfs includes the generated files into a single binary for distribution.

You can also run it without embedding the binary in "dev mode" though - that's what i've been doing when frontending.

In one shell, run make run-dev which will build and run the "backend".

In another, run make run-dev-ui, which uses npm to start a hot-reloading nodejs server.

The backend will then proxy ui assets to the nodejs server, allowing fast iteration on the javascript bits, keeping the browser pointed at http://localhost:8080/

https://github.com/EmbarkStudios/wireguard-ui/blob/master/Makefile

[sidewaysglance]

This is what I'm getting when running make run-dev

[~/web/wireguard-ui-master]:17:16:59 $ make run-dev
go-bindata-assetfs -prefix ui/dist ui/dist
bindata: Failed to stat input path 'ui/dist': lstat ui/dist: no such file or directory
make: *** [go-binary] Error 1
[~/web/wireguard-ui-master]:17:16:59 $

[engel75]

I was able to build the go binary by using buildah like:

#!/bin/bash
set -ex

npm=$(buildah from node:12)
npm_run="buildah run --volume=${PWD}/ui:/ui $npm"
buildah config --workingdir=/ui $npm
$npm_run npm install
$npm_run npm rebuild node-sass
$npm_run npm run build
buildah umount $npm

go=$(buildah from golang:1.13.1)
go_run="buildah run --volume=${PWD}:/wg --volume=${HOME}/.cache:/.cache ${go}"

buildah config --workingdir=/wg $go
$go_run go get github.com/go-bindata/go-bindata/...
$go_run go get github.com/elazarl/go-bindata-assetfs/...
$go_run go mod download
$go_run go-bindata-assetfs -prefix ui/dist ui/dist
$go_run go build .
buildah umount $go

dist=$(buildah from --format=docker gcr.io/distroless/base)
buildah config --entrypoint=/wireguard-ui $dist
buildah copy $dist wireguard-ui /
buildah commit $dist embarkstudios/wireguard-ui:latest
buildah umount $dist

[suom1]

This is what I'm getting when running make run-dev

[~/web/wireguard-ui-master]:17:16:59 $ make run-dev
go-bindata-assetfs -prefix ui/dist ui/dist
bindata: Failed to stat input path 'ui/dist': lstat ui/dist: no such file or directory
make: *** [go-binary] Error 1
[~/web/wireguard-ui-master]:17:16:59 $

Not aware if you have noticed the latest documentation updates @tozjerimiah, now there is a documentation on how to fix your problem with dist files for ui.

That problem is related to environment variables for Go.

[sidewaysglance]

I got the urge to have a go at working on this but am again struggling to build:

root@wgui:~/wg-ui# make ui
cd ui && npm install && npm run build

> [email protected] install /root/wg-ui/ui/node_modules/husky
> node husky install

internal/modules/cjs/loader.js:834
  throw err;
  ^

Error: Cannot find module '/root/wg-ui/ui/node_modules/husky/husky'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node husky install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-10-19T21_00_12_633Z-debug.log
make: *** [Makefile:18: ui] Error 1

I am running Ubuntu 20.04, using instructions for go, setup environment, Install LTS version of nodejs for frontend, Fetch wg-ui (from my own fork), Build binary with ui.

[ptruman]

+1 for this.
I've built the UI in a Container on top of LinuxServer.io's WG image, but without a wg0.conf, it's not clear where to put the pre-up/pre-down (I've not yet tried in the JSON directly).

[adrum]

@ptruman Can you post the Dockerfile for the UI on top of LinuxServer.io's WG image? I'm having issues running this container with internet access, and think this approach will be what I'm looking for in the meantime.

[ptruman]

@ptruman Can you post the Dockerfile for the UI on top of LinuxServer.io's WG image? I'm having issues running this container with internet access, and think this approach will be what I'm looking for in the meantime.

Here you go.
Note that (per the original docs) this container will NOT start unless it has privileged or net_admin AND sys_admin capabilities set - which I'm not a fan of.

The Dockerfile below will use mostly recent Debian Node/GoLang images and pull wireguard-ui and build correctly (the fun being it creates folders you need to find and copy around. The wireguard-ui binary lives in /

FROM docker.io/node:15-buster AS ui
RUN git clone https://github.com/EmbarkStudios/wg-ui.git
WORKDIR /ui
RUN cp /wg-ui/ui/package.json /wg-ui/ui/package-lock.json /ui/
RUN npm install
RUN cp -R /wg-ui/ui/* .
RUN npm run build

FROM docker.io/golang:1.15-buster AS build
WORKDIR /wg
RUN go get github.com/go-bindata/go-bindata/...
RUN go get github.com/elazarl/go-bindata-assetfs/...
COPY --from=ui /wg-ui/go.mod .
COPY --from=ui /wg-ui/go.sum .
RUN go mod download
COPY --from=ui /wg-ui .
COPY --from=ui /ui/dist ui/dist
RUN go-bindata-assetfs -prefix ui/dist ui/dist
RUN go install .

FROM linuxserver/wireguard:latest
COPY --from=build /go/bin/wireguard-ui /
ENTRYPOINT [ "/wireguard-ui" ]

Assuming you call your image "wgu" you can run the following to get into the container if it won't start

docker run -it --entrypoint /bin/bash wgu

If you then try to run /wireguard-ui and get "operation not permitted" you are missing a docker capability (per the bold above). Otherwise it will start on port 8080 and you can try it.

I got it going but didn't carry on as:
a) I wanted PreSharedKeys editable and didn't want to try to hack that in
b) Didn't like it having all those permissions! (the base wireguard container doesn't - but this container users a kernel image, not a separate wg executable, which is likely why)

[ShiromMakkad]

@ptruman I'd love to get this image running. Here's my compose file:

    wireguard-ui:
      build:
        context: .
        dockerfile: wireguard-ui.Dockerfile
      container_name: wireguard-ui
      restart: unless-stopped
      privileged: true
      command: --data-dir=/data --log-level=debug
      ports:
        - 51820:51820/udp
        - 8083:8080
        - 5555:5555
      volumes:
        - /mnt/ext/wireguard/data:/config
        - /mnt/ext/wireguard/ui:/data
        - /lib/modules:/lib/modules
      environment:
        - TZ=America/Chicago
        - PEERS=0
        - PEERDNS=9.9.9.9
      cap_add:
        - NET_ADMIN
        - SYS_MODULE
      sysctls:
        - net.ipv4.conf.all.src_valid_mark=1

I've combined my linuxserverio wireguard config with this image's default config, but I'm not able to get it working. Getting into the web ui and adding a key works just fine, but my client isn't able to connect to the wireguard server. I had the normal linuxserver image working, so I know it's not a port forwarding issue or something like that. Is this the right configuration?