DEV Community

Masui Masanori
Masui Masanori

Posted on

2 1

Xubuntu + Nginx + Go(+ Pion/WebRTC) + Node.js

Intro

I will try creating a development environment with Xubuntu, Nginx, and Go.

Environments

  • Xubuntu ver.22.04
  • Nginx ver.1.22.0
  • Go ver.go1.19 linux/amd64
  • Node.js ver.18.7.0

Xubuntu

First, I change the directory names to English.

LANG=C xdg-user-dirs-gtk-update
Enter fullscreen mode Exit fullscreen mode

After that, I install some applications.

Installed by apt

  • vim
  • git
  • gimp
  • curl

Install packages

  • Google Chrome
  • Visual Studio Code

Installing Go and Node.js

Go

I can download and install Go by following the installation guide.

To add "/usr/local/go/bin" to the PATH environment variable, I execute this command.

echo 'export PATH=$PATH:/usr/local/go/bin' >> ~/.bashrc
source ~/.bashrc
Enter fullscreen mode Exit fullscreen mode

After installing, I clone my Go project.

Node.js

To use TypeScript, Webpack, and etc., I install Node.js using NodeSource according to the Node.js documentation.

Nginx

Installing

I install Nginx according to the documentation.

Serving Go projects

From what I have found in some blog posts and documents on the internet, it seems that Nginx uses Reverse Proxy to serve Go projects.
And because I want to access the WebRTC sample page from some PCs and smart phones what are connected by local network, I have to serve it over htttps.

Reverse Proxy

To use reverse proxy, I can edit Nginx config files.

Normally, I can write them in "/etc/nginx/nginx.conf", but for Port:80, I must write in "/etc/nginx/conf.d/default.conf".

default.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    # When clients access "http://localhost/webrtc", Nginx redirect to "http://localhost:8080"
    location /webrtc {
        proxy_pass http://localhost:8080;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
Enter fullscreen mode Exit fullscreen mode

https

To serve pages over htttps, I need to create and configure a certificate.
This time, it is only for development, I create locally-trusted development certificates with mkcert.

I install the pre-built binaries according to the README.

After executing "mkcert -install", I can create certification and key files.

mkcert -key-file local_key.pem -cert-file local_cert.pem 192.168.XX.YYY
Enter fullscreen mode Exit fullscreen mode

"192.168.XX.YYY" represents the IP address of my machine.

I saved them on my home directory(/home/example) this time.

After that, I update "/etc/nginx/nginx.conf".

nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

   sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;

#when clients access "https://192.168.XX.YYY:443/webrtc",
#the server will serve "webappsample".
server {
    listen 443 ssl;
    server_name 192.168.XX.YYY;
    ssl_certificate /home/example/local_cert.pem;
    ssl_certificate_key /home/example/local_key.pem;
    location /webrtc {
        proxy_pass http://localhost:8080;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Serve my WebRTC project(webappsample)

To serve my WebRTC project, I have to update it.

Paths

Because the page is served with reverse proxy, its URL will be changed.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>WebRTC Sample</title>
        <meta charset="utf-8">
        <link href="{{.}}/css/site.css" rel="stylesheet" />
    </head>
    <body>
...
        <script src="{{.}}/js/main.page.js"></script>
        <script>Page.init('{{.}}');</script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

main.go

...
func main() {
    hub := *newSSEHub()
    go hub.run()

    http.Handle("/webrtc/css/", http.StripPrefix("/webrtc", http.FileServer(http.Dir("templates"))))
    http.Handle("/webrtc/js/", http.StripPrefix("/webrtc", http.FileServer(http.Dir("templates"))))
    http.HandleFunc("/webrtc/sse/message", func(w http.ResponseWriter, r *http.Request) {
        sendSSEMessage(w, r, &hub)
    })
    http.HandleFunc("/webrtc/sse/", func(w http.ResponseWriter, r *http.Request) {
        registerSSEClient(w, r, &hub)
    })

    http.Handle("/", &templateHandler{filename: "index.html", serverUrl: "https://192.168.XX.YYY:443/webrtc"})
    log.Fatal(http.ListenAndServe("localhost:8080", nil))
}
Enter fullscreen mode Exit fullscreen mode

Server Sent Events(SSE)

Although I can access the page and Media Streams, I still can't connect with WebRTC.
Because when I tried connecting with Server Sent Events, I would get 301(Moved Permanently).

To avoid this, I have to add more properties into nginx.conf.

nginx.conf

...
server {
    listen 443 ssl;
    server_name 192.168.XX.YYY;
    proxy_buffering off;
    proxy_cache off;
    proxy_set_header Connection '';
    proxy_http_version 1.1;
    chunked_transfer_encoding off;
    ssl_certificate /home/example/local_cert.pem;
    ssl_certificate_key /home/example/local_key.pem;
    location /webrtc {
        proxy_pass http://localhost:8080;
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

Resources

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more