ngrokを使ってローカルのExpressをグローバルに公開する 🌏

ローカルで立ち上げたサーバをさくっとグローバルに公開したいとき、ngrok が便利です。

ngrok.com

準備

❶ ngrokのアカウントを作る

https://ngrok.com/ の「Sign up」からアカウントを作成します。

❷ authtokenをメモする

https://dashboard.ngrok.com/get-started/setup の「2. Connect your account」に記載されているauthtokenをメモします。

プロジェクトの作成

❶ 必要なモジュールを準備する

yarn add express dotenv ngrok

❷ package.jsonを編集する

{
  "name": "ngrok-express",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "ngrok": "^4.3.1"
  }
}

❸ .envを作成する

TOKEN=HOGEHOGE

HOGEHOGEの部分にngrokのauthtokenを記載します。

❹ index.jsを作成する

'use strict';

require('dotenv').config();

const ngrok = require('ngrok');
const { TOKEN } = process.env;
const express = require('express');
const PORT = process.env.PORT || 3000;
const app = express();

app.use('/', express.static(`${ __dirname }/public`));
app.listen(PORT, '0.0.0.0');

(async () => {
  const url = await ngrok.connect({
    addr: PORT,
    authtoken: TOKEN
  });

  console.log(url);
})();

これで、publicディレクトリに入れたファイルをグローバルに公開する準備ができました。

yarn start

を実行後、ターミナルに表示されたURLにアクセスすればOKです。

authtokenを削除したい場合

一度実行すると、PC内にトークンが保持されます。
なんらかの理由で削除したくなった場合、Macだと、

~/.ngrok2

を削除すればOKです。

みかづきブログ・カスタム

基本的にはちょちょいのほいです。