LaraDock을 사용하여 Docker Nginx에 SSL 설정을 수행하고 WebSocket에서 ws에서 wss로 액세스 할 수 있도록 설정 한 메모

개요

LaraDock의 Nginx에서 ws의 wss화를 쉽게 할 수 있을 것으로 보인다.

환경

지난번 의 Quoridorn 환경을 계속 사용한다.

소스(클라이언트)
소스(서버)

서버측

nginx 준비

LaraDock 의 nginx Docker 폴더를 사용한다.

Dockerfile 수정

LaraDock은 Laravel용이므로 PHP의 설정이 들어 있다.
이번에는 사용하지 않으므로 지운다.

virtual-environment/provision/docker/nignx/Dockerfile

FROM nginx:alpine

LABEL maintainer="Mahmoud Zalt <[email protected]>"

# // 省略

- # Set upstream conf and remove the default conf
-  RUN echo "upstream php-upstream { server ${PHP_UPSTREAM_CONTAINER}:${PHP_UPSTREAM_PORT}; }" > /etc/nginx/conf.d/upstream.conf \
-     && rm /etc/nginx/conf.d/default.conf

ADD ./startup.sh /opt/startup.sh
RUN sed -i 's/\r//g' /opt/startup.sh
CMD ["/bin/bash", "/opt/startup.sh"]

EXPOSE 80 443

설정 변경

폴더 내의 config 파일을 다음과 같이 수정한다.

virtual-environment/provision/docker/nginx/sites/default.conf

@@ -1,32 +1,30 @@
+upstream websocket {
+    server node-server:8000;
+}
+
 server {

     listen 80 default_server;
     listen [::]:80 default_server ipv6only=on;

     # For https
-    # listen 443 ssl default_server;
-    # listen [::]:443 ssl default_server ipv6only=on;
-    # ssl_certificate /etc/nginx/ssl/default.crt;
-    # ssl_certificate_key /etc/nginx/ssl/default.key;
+    listen 443 ssl default_server;
+    listen [::]:443 ssl default_server ipv6only=on;
+    ssl_certificate /etc/nginx/ssl/default.crt;
+    ssl_certificate_key /etc/nginx/ssl/default.key;

     server_name localhost;
-    root /var/www/public;
-    index index.php index.html index.htm;


-    location / {
-         try_files $uri $uri/ /index.php$is_args$args;
+
+    location /socket.io/ {
+        proxy_pass http://websocket;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
     }


-    location ~ \.php$ {
-        try_files $uri /index.php =404;
-        fastcgi_pass php-upstream;
-        fastcgi_index index.php;
-        fastcgi_buffers 16 16k;
-        fastcgi_buffer_size 32k;
-        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
-        #fixes timeouts
-        fastcgi_read_timeout 600;
-        include fastcgi_params;
+    location /socket.io/socket.io.js {
+        proxy_pass http://websocket;
     }

     location ~ /\.ht {

node-server 컨테이너의 8000번 포트에서 node.js를 움직이고 있으므로, upstream websocket 라는 이름으로 선언해 그것을 사용.
https://domain/socket.io/에서 온 요청을 node.js 쪽에 프록시하여 흘리는 처리를 선언한다.

docker-compose.yml 편집

nginx 추가에 맞게 수정합니다.

virtual-environment/provision/docker/docker-compose.yml

version: "3"

networks:
  backend:
    driver: ${NETWORKS_DRIVER}

volumes:
  mongo:
    driver: ${VOLUMES_DRIVER}

services:
  ### MongoDB ##############################################
  # // 省略
  node-server:
    build: ${QUORIDORN_PATH_ROOT}
    volumes:
      - ${QUORIDORN_PATH_ROOT}:/app
      - /app/node_modules
-     ports:
-       - "${QUORIDORN_SERVER_PORT}:8000"
    command: ["npm", "run", "node-server"]
    networks:
      - backend
    depends_on:
      - mongo


+  ### NGINX Server #########################################
+  nginx:
+    build:
+      context: ./nginx
+      args:
+        - CHANGE_SOURCE=${CHANGE_SOURCE}
+        - http_proxy
+        - https_proxy
+        - no_proxy
+    volumes:
+      - ${NGINX_HOST_LOG_PATH}:/var/log/nginx
+      - ${NGINX_SITES_PATH}:/etc/nginx/sites-available
+      - ${NGINX_SSL_PATH}:/etc/nginx/ssl
+    ports:
+      - "${NGINX_HOST_HTTPS_PORT}:443"
+    depends_on:
+      - node-server
+    networks:
+      - backend

원래 공개하고 있던 8000번 포트는, nginx에 의해 wss로 액세스 되는 443으로부터 프록시 되기 때문에, 불필요하게 된다.

환경 변수 추가

virtual-environment/provision/docker/.env

### NGINX #################################################

NGINX_HOST_HTTP_PORT=80
NGINX_HOST_HTTPS_PORT=443
NGINX_HOST_LOG_PATH=./logs/nginx/
NGINX_SITES_PATH=./nginx/sites/
NGINX_SSL_PATH=./nginx/ssl/
### Environment ###########################################

# If you need to change the sources (i.e. to China), set CHANGE_SOURCE to true
CHANGE_SOURCE=false

클라이언트측 설정

ws의 8000 포트로 접속하고 있던 부분을 wss의 443 포트로 바꾼다.
443 포트는 기본이므로 생략 할 수 있습니다.

/public/static/conf/connect.yaml

 # 向き先
 # quoridornServer: "wss://quori-dev.onlinesession.app"
 # quoridornServer: "http://localhost:2222"
-quoridornServer: "ws://192.168.60.79:8000"
+quoridornServer: "wss://192.168.60.79"

동작 확인

vagrant up 에서 docker 자동 시작이 잘못되었습니다. . .

가상 환경 시작

※ 서버측과 클라이언트측 모두에서 실시한다.

vagrant up
vagrant ssh
cd virtual-environment/provision/bash
./docker_restart.sh

시작되면 브라우저에서 h tps://192.168.74.60/쿠오도도 rn2/ 에 액세스합니다.

SSL 인증서 문제

테스트를 위해 올레올레 인증서를 사용하고 있기 때문에 클라이언트에서 연결하려고 할 때ERR_CERT_AUTHORITY_INVALID 오류가 발생하여 연결할 수 없습니다.



이 경우 먼저 다음 서버 측 URL을 브라우저에서 엽니 다.
htps // 192. 168. 60. 79 / 소 t. 이오/

고급 설정을 클릭합니다.



192.168.50.79로 이동(안전하지 않음)을 클릭합니다.
안전한 것은 자신이 알고 있다.



아래 화면이 나오면 성공.


클라이언트 화면으로 돌아가서 페이지를 다시로드합니다.

ERR_CERT_AUTHORITY_INVALID 오류가 사라지고 놀이방이 표시되었습니다!

참고

laradock
Laradock의 Nginx를 SSL로 변환
WSS가 연결되지 않음
Nginx에서 역방향 프록시를 설정하는 방법
websocket을 사용할 때 놀라운 함정
거친 c 케치. 이오
node.js 초입문 ①node.js로 웹 서버를 만들어 봅니다.