拝啓この手紙。スマホでローカル環境のアプリを動かしたいあなたへ。"ngrok"を使えば楽ということを伝えたい
0. はじめに
拝啓〜〜〜🎵
この手紙〜〜〜スマホでローカル環境で起動しているアプリを動かしたいあなたへ🎵
まあ当然スマホでlocalhost:3000とブラウザに打ち込んでも見れませんよね？しかしngrokというサービスを使用すると可能になります。
ngrokは外部からセキュリティを保護しながらローカルサービスにアクセスするリバースプロキシのサービスです。
今回はNuxt3を使用していますがVue.jsやReact, Laravelでも何でもOKです！
1. ngrokの設定
まずはngrokの設定をしていきます。
1-1. アカウントを作成
まずはngrokでアカウントを作成します。詳細は省きますが、GoogleやGithub認証も可能なのでお好きな感じでお願いします！
1-2. ngrokのインストール
以下のリンクでOS毎のインストール方法が記載されているので以下を参照してください！
自分はMacを使用を使用しており、Homebrew経由でngrokをインストールしました。
> brew install ngrok
1-3. auth tokenの設定
ngrokをインストールできたら発行されたauth tokenをngrokの設定ファイルに追加します。追加方法は設定手順のコマンドを打つだけです👍
ngrok config add-authtoken {auth token}
ここまででngrokの設定は完了です！
Dockerを使用してない方は2章へ、Dockerを使用してNuxt3環境を立ち上げてる方は3章へお進みください。
2. Dockerを使わない場合
2-1. Nuxtサーバーを立ち上げる
Nuxtサーバーを立ち上げます。npmならnpm run dev,yarnならyarn run devといったようにお使いのパッケージマネージャーに合わせてNuxtサーバーを立ち上げてください。
また動作確認用にApp.vueに適当な文字を記載しておきましょう。
<template>
<h1>
拝啓、スマホでローカル環境のNuxt3アプリを動かしたい皆様へ。この文字が見えたということは無事に成功したということですね。
</h1>
</template>
2-2. ローカル環境を共有できるようにする
次に立ち上げたNuxtサーバーを共有できるようにします。詳細なコマンドに関しては設定手順に記載しています。
自分はNuxt3をlocalhost:3000で立ち上げているので以下のようになります。
> ngrok http http://localhost:3000
上記コマンドを実行すると以下のようなログが表示されます。
Session Status: online
Account: {アカウント名} (Plan: Free)
Version: 3.19.1
Region: Japan (jp)
Latency: 30ms
Web Interface: http://127.0.0.1:4040
Forwarding: https://{任意の文字}.ngrok-free.app -> http://localhost:3000
Connections: ttl 0, opn 0, rt1 0.00, rt5 0.00, p50 0.00, p90 0.00
またnuxt.config.tsに以下の記載を追加してください。この記述がないとスマホ側で弾かれてページが見えないです。
export default defineNuxtConfig({
vite: {
server: {
allowedHosts: ["{任意の文字}.ngrok-free.app"],
},
},
});
ログに表示されているhttps://{任意の文字}.ngrok-free.appをお使いのスマホでブラウザの検索窓に貼り付けます。以下のようにApp.vueで記載した文字が見えていれば成功です👍
ちなみにホットリロードも効きます🔥
3. Dockerを使う場合
続いてDockerを使用してローカル環境を立ち上げている場合も解説していきます。
3-1. .envとcompose.ymlを追加
まずは.envファイルです。Macの設定手順に記載されているauthed tokenを.envファイルに記載します。
NGROK_AUTHTOKEN=ここにauthed tokenを記載してください
続いてDockerの設定ファイルです。
記載内容はほぼ公式ドキュメントを参考にしています。また今回はNuxtを使用していますが、適宜Next.jsやLaravelのコンテナなどに書き換えてください。
FROM node:20-slim AS base
RUN npm install -g pnpm@latest
COPY . /app
WORKDIR /app
FROM base AS development
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
FROM base
COPY --from=development /app/node_modules /app/node_modules
EXPOSE 3000
ENV HOST=0.0.0.0
CMD [ "pnpm", "dev" ]
services:
// Nuxtコンテナ
nuxt:
build:
context: .
dockerfile: docker/nuxt.Dockerfile
ports:
- "3000:3000"
develop:
watch:
- action: rebuild
path: package.json
- action: sync
path: .
target: ./app
ignore:
- node_modules
environment:
- HOST=0.0.0.0
- PORT=3000
// ngrokコンテナ
ngrok:
image: ngrok/ngrok:latest
command:
- "http"
- "http://host.docker.internal:3000"
environment:
- NGROK_AUTHTOKEN=${NGROK_AUTHTOKEN}
ports:
- 4040:4040
ちなみにcompose.yml内のwatchの記載は以下記事で紹介しておりますので合わせてご確認ください🙏
3-2. コンテナを起動する
Dockerの設置ができたのでコンテナを起動します。
> docker compose up --build
// ログ
...途中省略
[+] Running 4/4
Attaching to ngrok-1, nuxt-1
nuxt-1 |
nuxt-1 | > nuxt-app@ dev /app
nuxt-1 | > nuxt dev
nuxt-1 |
nuxt-1 | [nuxi] Nuxt 3.15.4 with Nitro 2.10.4
エラーが出ていなければlocalhost:4000をブラウザで開きましょう。以下のような画面になるかと思いますので、記載されているURLをスマホのブラウザで開いてみましょう。
ローカルで立ち上げている画面が表示されれば成功です👍
Discussion