😊

【Drizzle ORM】NextJs14 と Drizzle ORM【#4 ngrok】

2024/07/08に公開

【#4 ngrok】

YouTube: https://youtu.be/qS_YfnN0xEY
https://youtu.be/qS_YfnN0xEY

今回はローカルで「https」を使用するため
「ngrok」のインストールと初期設定を行います。

https://ngrok.com/

インストールか「ngrok.exe」を作業フォルダに移動できましたら
以下のコマンドを実行します。

「Powershell」を使用すると正常に動作しない場合がありますので、
動画ではVSコードの「コマンドプロンプト」を使用しています。

次に以下のコマンドを実行します。

ngrok config add-authtoken 2X68KyvwZ...........

上記でエラーが出る場合は、

ngrok.exe config add-authtoken 2X68KyvwZ...........

「.exe」を付けて実行してみてください。

ngrok http http://localhost:8080

こちらのドキュメントのコマンドでngrokを起動すると
起動するたびにドメインが変わってしまうので
そのたびに変更後のドメインを
Clerkのダッシュボードで登録する必要が出てきてしまいます。

そこでサイドメニューの「Cloud Edge」の
「Domains」で固定のドメインを作成します。

ドメインの作成ができましたら、
ngrokを起動するのですが、

まずは先に、NextJSのアプリを起動します。
こちらは「ngrok」とは別のターミナルを開いて
「NextJs」と「ngrok」の2つを
同時に起動できるようにしておきます。

npm run dev

アプリが起動できましたら、
先ほど作成した固定のドメインのメニューボタンから
起動コマンドをコピーしてターミナルで実行します。

//こちらがコピーできるコマンドです。
ngrok http --domain=deciding-buffalo-purely.ngrok-free.app 80

//最後の「80」がローカルサーバーのポートになりますので、
//NextJSのポートに変更します。

ngrok http --domain=deciding-buffalo-purely.ngrok-free.app 3000
//もしくは
ngrok.exe http --domain=deciding-buffalo-purely.ngrok-free.app 3000

起動後に上記コマンドのドメインでアプリが起動できていれば、
設定完了になります。

Discussion