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

15762 단어 goubuntunginx

소개



Xubuntu, Nginx, Go로 개발 환경을 만들어 보도록 하겠습니다.

환경


  • 쉬분투 ver.22.04
  • Nginx 버전 1.22.0
  • Go ver.go1.19 linux/amd64
  • Node.js 버전 18.7.0

    • 쉬분투



    먼저 디렉토리 이름을 영어로 변경합니다.

    LANG=C xdg-user-dirs-gtk-update


  • Ubuntu でホームディレクトリ内のディレクトリ名を英語表記に - 雑廉堂の雑記帳

    • 그런 다음 몇 가지 응용 프로그램을 설치합니다.

    apt에 의해 설치됨


  • 힘
  • 자식
  • 김프
  • 컬

    • 패키지 설치


  • 구글 크롬
  • 비주얼 스튜디오 코드

    • Go 및 Node.js 설치



    가다



    설치 가이드에 따라 Go를 다운로드하여 설치할 수 있습니다.
  • Download and install - The Go Programming Language

    • PATH 환경 변수에 "/usr/local/go/bin"을 추가하기 위해 이 명령을 실행합니다.

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


    설치 후 my Go project을 복제합니다.

    Node.js



    TypeScript, Webpack 등을 사용하기 위해 Node.js 설명서에 따라 NodeSource를 사용하여 Node.js를 설치합니다.
  • Installing Node.js via package manager - Node.js
  • NodeSource Node.js Binary Distributions - GitHub

    • 엔진엑스



    설치 중



    설명서에 따라 Nginx를 설치합니다.
  • nginx: Linux packages

    • Go 프로젝트 제공



    인터넷의 일부 블로그 게시물 및 문서에서 찾은 내용에 따르면 Nginx는 Reverse Proxy를 사용하여 Go 프로젝트를 제공하는 것으로 보입니다.
    그리고 로컬 네트워크로 연결된 일부 PC와 스마트폰에서 WebRTC 샘플 페이지에 접근하고 싶기 때문에 htttps를 통해 서비스해야 합니다.

    리버스 프록시



    리버스 프록시를 사용하기 위해 Nginx 구성 파일을 편집할 수 있습니다.

    보통은 "/etc/nginx/nginx.conf"에 쓸 수 있지만 Port:80의 경우 "/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;
    }
}

    https



    htttps를 통해 페이지를 제공하려면 인증서를 만들고 구성해야 합니다.
    이번에는 개발용으로만 mkcert로 로컬에서 신뢰할 수 있는 개발 인증서를 생성합니다.
  • mkcert - FiloSottile - GitHub
  • mkcert.org

    • README에 따라 미리 빌드된 바이너리를 설치합니다.

    "mkcert -install"을 실행한 후 인증서 및 키 파일을 생성할 수 있습니다.

    mkcert -key-file local_key.pem -cert-file local_cert.pem 192.168.XX.YYY


    "192.168.XX.YYY"는 내 컴퓨터의 IP 주소를 나타냅니다.

    이번에는 홈디렉토리(/home/example)에 저장했습니다.

    그런 다음 "/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;
    }
  }
}


    내 WebRTC 프로젝트 제공(webappsample)



    내 WebRTC 프로젝트를 제공하려면 업데이트해야 합니다.

    경로



    페이지는 리버스 프록시와 함께 제공되기 때문에 해당 URL이 변경됩니다.

    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>


    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))
}


    서버 전송 이벤트(SSE)



    페이지와 미디어 스트림에 액세스할 수 있지만 여전히 WebRTC에 연결할 수 없습니다.
    Server Sent Events에 연결하려고 하면 301(영구적으로 이동됨)이 표시되기 때문입니다.

    이를 방지하려면 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;
    }
  }
}


    자원


  • nginx documentation
  • Beginner’s Guide - nginx
  • NGINX Cookbook, 2nd Edition
  • EventSource / Server-Sent Events through Nginx - StackOverflow
  • Why do I need to use http.StripPrefix to access my static files? - StackOverflow
    • GitLab-CE에서 netlify로 deploy
    Chi 라우터의 모든 경로 인쇄

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage