DEV Community: Stefan Wintermeyer

4 Step WireGuard Tutorial

Stefan Wintermeyer — Sat, 27 Mar 2021 15:49:03 +0000

WireGuard can be used to quickly setup a private tunnel/network between one server with a public IP address and one or multiple peers which might be behind a NAT. Let me show you how.

All commands in this tutorial have to be run with root privileges.

1. IP-Address Setup

We assume that the public IP address of the server is 172.16.187.4 and that the new WireGuard setup uses IP addresses within the 10.0.0.1/24 range. Please change those values according your setup.

	Internal IP Address	Public IP Address
Server (Debian)	10.0.0.1	172.16.187.4
Peer 1 (Debian)	10.0.0.2	unknown behind NAT
Peer 2 (Debian)	10.0.0.3	unknown behind NAT
Peer 3 (macOS)	10.0.0.4	unknown behind NAT

2. Install WireGuard on Debian GNU/Linux

Install the WireGuard software on the server and all clients. For Debian 10.x systems (find out which version you run with lsb_release -a) you have to use buster-backports to do so:

$ echo 'deb http://deb.debian.org/debian buster-backports main' \ 
>> /etc/apt/sources.list
$ apt-get update
$ apt-get install wireguard/buster-backports

If you are running Debian 11 (Bullseye) or later you don't need the backport and can just run apt-get install wireguard

After that create a private and public key on each system:

$ umask 077
$ cd /etc/wireguard
$ wg genkey | tee privatekey | wg pubkey > publickey
$ cat privatekey 
uA3OFbVYW7QP4qDQlqIzrie2B3+kX+0NcxkY2XEMBl0=
$ cat publickey 
2M1BpjkzBU5z9/NyFy+661rhKLA+1hKKV7KI8J/SB18=

Firewall

If you are running a firewall on your server have to open a port for WireGuard. In our setup we use UDP port 51820. For the popular UFW firewall this is the needed command:

$ ufw allow 51820/udp

3. Server Configuration

For the clients to be able to communicate to each other you have to make sure that you have ip_forward activated in /etc/sysctl.conf:

$ sed -i 's/#net.ipv4.ip_forward=1/net.ipv4.ip_forward=1/g' \ 
/etc/sysctl.conf
$ sysctl --system

Use your favorite editor to create a file /etc/wireguard/wg0.conf with the following content. Use the private and public keys you just created on the server and all the peers. Do not use the example keys from this tutorial!

Adjust the peer entries according to your own needs. One entry per peer.

[Interface]
Address = 10.0.0.1/24
ListenPort = 51820
PrivateKey = uA3OFbVYW7QP4qDQlqIzrie2B3+kX+0NcxkY2XEMBl0=

[Peer]
PublicKey = 2KyqIPdsgroQZvucFVF2VEy64zeR1744gqwcXzqBfhw=
AllowedIPs = 10.0.0.2/32

[Peer]
PublicKey = 0qDtefB2NZTNZ3uYEOmmR7J7VUdzONqWfvZ+ZGpnDQU=
AllowedIPs = 10.0.0.3/32

[Peer]
PublicKey = 3ayqIPdsgroQZvucEOmmR7J7VUdzONqWfvZ+ZGpnDQU=
AllowedIPs = 10.0.0.4/32

Fire it up the first time manually:

$ wg-quick up wg0
[#] ip link add wg0 type wireguard
[#] wg setconf wg0 /dev/fd/63
[#] ip -4 address add 10.0.0.1/24 dev wg0
[#] ip link set mtu 1420 up dev wg0

Stop it manually:

$ wg-quick down wg0
[#] ip link delete dev wg0

If you want to have it activated all the time (which you probably do):

$ systemctl enable wg-quick@wg0
$ systemctl start wg-quick@wg0

Use the command wg to get an overview:

$ wg
interface: wg0
  public key: 2M1BpjkzBU5z9/NyFy+661rhKLA+1hKKV7KI8J/SB18=
  private key: (hidden)
  listening port: 51820

peer: 2KyqIPdsgroQZvucFVF2VEy64zeR1744gqwcXzqBfhw=
  allowed ips: 10.0.0.2/32

peer: 0qDtefB2NZTNZ3uYEOmmR7J7VUdzONqWfvZ+ZGpnDQU=
  allowed ips: 10.0.0.3/32

peer: 3ayqIPdsgroQZvucEOmmR7J7VUdzONqWfvZ+ZGpnDQU=
  allowed ips: 10.0.0.4/32

You are now all set on the server side.

4. Peer configuration

Debian Linux

On each peer you have to create a /etc/wireguard/wg0.conf file with this content. Please replace the keys with your own ones. Use the ones you created with wg genkey | tee privatekey | wg pubkey > publickey during the installation of WireGuard on the peers.

[Interface]
PrivateKey = oH+eQXaI3VMj9XDaUWmAghPXmsLTDAjzONPWwISw1no=
Address = 10.0.0.2/32

[Peer]
PublicKey = 2M1BpjkzBU5z9/NyFy+661rhKLA+1hKKV7KI8J/SB18=
Endpoint = 172.16.187.4:51820
AllowedIPs = 10.0.0.1/24
PersistentKeepalive = 25

Replace 10.0.0.2 with the internal WireGuard IP of your peer (e.g. 10.0.0.3 or 10.0.0.4).

If your peer is not behind a NAT you don't need the PersistentKeepalive = 25 line which just configures a keep alive ping to the server.

Fire it up the first time manually:

$ wg-quick up wg0
[#] ip link add wg0 type wireguard
[#] wg setconf wg0 /dev/fd/63
[#] ip -4 address add 10.0.0.1/24 dev wg0
[#] ip link set mtu 1420 up dev wg0

Stop it manually:

$ wg-quick down wg0
[#] ip link delete dev wg0

If you want to have it activated all the time (which you probably do):

$ systemctl enable wg-quick@wg0
$ systemctl start wg-quick@wg0

You might need to run a systemctl restart wg-quick@wg0 on the server in case you ran into a chicken-egg-problem with the key configuration.

Use the wg command to get an overview:

$ wg
interface: wg0
  public key: 2KyqIPdsgroQZvucFVF2VEy64zeR1744gqwcXzqBfhw=
  private key: (hidden)
  listening port: 33067

peer: 2M1BpjkzBU5z9/NyFy+661rhKLA+1hKKV7KI8J/SB18=
  endpoint: 172.16.187.4:51820
  allowed ips: 10.0.0.0/24
  latest handshake: 1 hour, 18 minutes, 37 seconds ago
  transfer: 8.40 KiB received, 7.52 KiB sent

macOS

Install the WireGuard software from the app store at https://apps.apple.com/us/app/wireguard/id1451685025

Use the same config in the macOS peer as in the Debian peer.

I18n with Phoenix LiveView

Stefan Wintermeyer — Fri, 12 Mar 2021 12:38:57 +0000

You want to use I81n in Phoenix LiveView? So did I. But one can't just use gettext/1 in Phoenix LiveView out of the box. It took me a couple of hours to find out how to do it. Here is the recipe. You can copy and paste all of it. Just make sure to search and replace for example and Example.

Setup

mix phx.new example --live
cd example

My example application features English (en) and German (de) and defaults to English. So we have to add this at the end of config/config.ex

config :example, ExampleWeb.Gettext,
  default_locale: "en",
  locales: ~w(en de)

Ask the browser

There are a couple of different ways of deciding which language to use. In my opinion the "accept-language" header from the browser is a good way to go. If you want to go a different direction this plug is a good starting point. To use "accept-language" and set the used language we create a new plug:

lib/example_web/plug/local_plug.ex

defmodule ExampleWeb.Plugs.Locale do
  import Plug.Conn

  def init(_opts), do: nil

  def call(conn, _opts) do
    accepted_languages = extract_accept_language(conn)
    known_locales = Gettext.known_locales(ExampleWeb.Gettext)

    accepted_languages =
      known_locales --
        (known_locales -- accepted_languages)

    case accepted_languages do
      [locale | _] ->
        Gettext.put_locale(ExampleWeb.Gettext, locale)

        conn
        |> put_session(:locale, locale)

      _ ->
        conn
    end
  end

  # Copied from
  # https://raw.githubusercontent.com/smeevil/set_locale/fd35624e25d79d61e70742e42ade955e5ff857b8/lib/headers.ex
  def extract_accept_language(conn) do
    case Plug.Conn.get_req_header(conn, "accept-language") do
      [value | _] ->
        value
        |> String.split(",")
        |> Enum.map(&parse_language_option/1)
        |> Enum.sort(&(&1.quality > &2.quality))
        |> Enum.map(& &1.tag)
        |> Enum.reject(&is_nil/1)
        |> ensure_language_fallbacks()

      _ ->
        []
    end
  end

  defp parse_language_option(string) do
    captures = Regex.named_captures(~r/^\s?(?<tag>[\w\-]+)(?:;q=(?<quality>[\d\.]+))?$/i, string)

    quality =
      case Float.parse(captures["quality"] || "1.0") do
        {val, _} -> val
        _ -> 1.0
      end

    %{tag: captures["tag"], quality: quality}
  end

  defp ensure_language_fallbacks(tags) do
    Enum.flat_map(tags, fn tag ->
      case String.split(tag, "-") do
        [language, _country_variant] ->
          if Enum.member?(tags, language), do: [tag], else: [tag, language]

        [_language] ->
          [tag]
      end
    end)
  end
end

We have to include this plug in the pipeline:

lib/example_web/router.ex

defmodule ExampleWeb.Router do
  use ExampleWeb, :router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, {ExampleWeb.LayoutView, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
    plug ExampleWeb.Plugs.Locale # <-----
  end
  [...]

The LiveView Hello World with I18n

A nice Hello World! example:

lib/example_web/live/page_live.ex

defmodule ExampleWeb.PageLive do
  use ExampleWeb, :live_view
  import Gettext, only: [with_locale: 2]

  @impl true
  def mount(_params, session, socket) do
    locale = case session do
      %{"locale" => locale} -> locale
      _ -> "en"
    end

    socket =
      socket
      |> assign(locale: locale)

    {:ok, socket}
  end

  def render(assigns) do
    ~L"""
    <%= with_locale(@locale, fn -> %>
      <%= gettext "Hello World!" %></h2>
    <% end) %>
    """
  end
end

The Translations

We need to generate the config files for the gettext translations:

mix gettext.extract --merge
mix gettext.merge priv/gettext --locale de

Here are the files which need to be used for the translations:

priv/gettext
├── de
│   └── LC_MESSAGES
│       ├── default.po
│       └── errors.po
├── default.pot
└── errors.pot

And here's the content of priv/gettext/de/LC_MESSAGES/default.po (the German translation):

## "msgid"s in this file come from POT (.pot) files.
##
## Do not add, change, or remove "msgid"s manually here as
## they're tied to the ones in the corresponding POT file
## (with the same domain).
##
## Use "mix gettext.extract --merge" or "mix gettext.merge"
## to merge POT files into PO files.
msgid ""
msgstr ""
"Language: de\n"
"Plural-Forms: nplurals=2\n"

#, elixir-format
#: lib/example_web/live/page_live.ex:17
msgid "Hello World!"
msgstr "Hallo Welt!"

Here's some more docu about using Gettext:

After all this you can fire up your application:

mix phx.server

That's all!

My Twitter account: https://twitter.com/wintermeyer

PS: In case you want to tackle LiveView components have a look at https://www.paulfioravanti.com/blog/internationalisation-phoenix-live-components/https://www.paulfioravanti.com/blog/internationalisation-phoenix-live-components/