Quden Dev Doc

Appearance

ngrok を使ってローカル開発環境を公開する方法 ​

これはなに？ ​

ngrok（エングロック）と呼ばれるツールを利用して、ローカル開発を外部に公開する方法を説明するドキュメントです。embed や OGP の開発など、開発環境を一時的にパブリックにして開発を行いたい時などに利用します。

関連：

インストール ​

Mac の場合は、おもむろに以下のコマンドを打ち込みましょう。

bash
$ brew install ngrok

初期セットアップ ​

Auth token をセットします。Auth token は bitwarden 上に保存されています。 token の値がわかったら、以下のコマンドを実行しましょう。

bash
$ ngrok authtoken <AUTH_TOKEN>

ngrok の起動 ​

フロントエンドの場合 ​

  1. .env.development を開いて、以下の環境変数を設定する
plain
NEXT_PUBLIC_API_ORIGIN_HTTPS="https://ngrok-api.dev.quden.io"
NEXT_PUBLIC_ORIGIN_HTTPS="https://ngrok.dev.quden.io"
  1. yarn dev:docker:up:https でサーバーを起動する
  2. 別のシェルプロセスから yarn ngrok を実行する
    • ※ npm スクリプトを見ればわかるかと思いますが https://local.dev.quden.io:3000 にフォワーディングされています
  3. 起動に成功すると https://ngrok.dev.quden.io からアクセスできます

バックエンドの場合 ​

  1. yarn dev:docker:up:https でサーバーを起動する
  2. 別のシェルプロセスから yarn ngrok を実行する
    • ※ npm スクリプトを見ればわかるかと思いますが https://local.dev.quden.io:3333 にフォワーディングされています
  3. 起動に成功すると https://ngrok-api.dev.quden.io からアクセスできます