ngrokを使ってみよう

はじめに

42Tokyoの課題の一つに、webサーバ立ててオンライン対戦ゲームをするといったものがあります。しかし、PC1台だとブラウザのタブを切り替えながら交互に操作することになり、少し不便な上同時に操作しているか怪しい部分があります。

この問題を解決するため、ngrok(エングロック)を用いてローカル環境のサーバをweb上に公開し、他PCからも接続できるようにしてみます。もちろん、42Tokyoの校舎PCで使えて無料です。

使い方

ngrokのアカウントを流れに沿って作ります。

dashboardからAuthtokenをコピー。

docker-compose.ymlのservicesにngrokを追加します。

docker-compose.yml

version: '3.8'

services:
  app:
    container_name: web
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
    command: pnpm dev
  ngrok:
    container_name: ngrok
    image: ngrok/ngrok:latest
    environment:
      - NGROK_AUTHTOKEN=${NGROK_AUTH_TOKEN}
    restart: unless-stopped
    command:
      - "start"
      - "--all"
      - "--config"
      - "/etc/ngrok.yml"
    volumes:
      - ./ngrok.yml:/etc/ngrok.yml
    ports:
      - "4040:4040"
    depends_on:
      - app

ngrok.yml

version: "2"
web_addr: localhost:4040

tunnels:
  web:
    addr: web:3000
    proto: http

.env

NGROK_AUTH_TOKEN=<your-authtoken>

docker-compose upで起動、dashboardのドメイン(.ngrok-free.dev)にアクセス

ちなみに、ngrokの無料プランでも静的ドメインがもらえるので、42APIを登録する際はこのドメインを入力しましょう。

おわりに

42Tokyoではsudoが使えないため、今回はdocker-composeを用いてngrokを実行してみました。同じ課題を抱える42内外の方の助けになれば幸いです。