3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【3分で出来る】ngrokでデプロイをしてみよう!

Posted at

さくっと今作っているWebシステムを他の人に使用感ごと共有できるツール?サービスでngrokというのがあるらしい…
他にも使い方として外部サーバとして立ててWebhookなどのテストに使える。

ざっくり概要

簡単にローカルで作ったWebシステムを公開できるよ!
つまり、http://loalhost にhttp://{hogehoge}.ngrok.com などで外部からアクセスできちまう…

ngrokとは…?

簡単に言うとlocalhostで動いているサーバーを、外部のLANからアクセス出来るようにするツール

とりあえず3分クッキング(ハンズオン)してみよう

セットアップとインストールはget-startedでログインした際に表示されるけど一応手順を書くよ。

[1/7] 以下よりアカウント作成

[2/7] アカウント作成後、それぞれのOSに対応したngrokをダウンロード(私はMac)

cd Downloads/
unzip ngrok-stable-darwin-amd64.zip

[3/7] 適当なところに解凍後の実行ファイルをコピー

(私はパスの通っているディレクトリに配置した)

cp ngrok /usr/local/bin/

[4/7] アカウントを接続

(トンネル認証トークンはhttps://dashboard.ngrok.com/auth から)

ngrok authtoken {トンネル認証トークン}

[5/7] 適当なローカルサーバーを建てる

(Dockerない場合はこれとかで建てる→「お手軽なWebサーバーの立て方」)

docker run -d -p 8080:80 --name test nginx

[6/7] ローカルサーバの動作確認

以下のURLにつないで「Welcome to nginx!」が出ればローカルサーバはOK
http://localhost:8080/

[7/7] 次にngrokでそれを公開!

8080は公開したいポートを設定したらOK

ngrok http 8080

以下のURLにアクセスしたら管理画面っぽいのが表示されて、公開アドレスが表示されてる。適当にクリックして公開されていることを確認。
http://127.0.0.1:4040

停止方法

control + Cで止めれる。
Dockerの方はdocker ps , docker stop {docker id}とかで

サブドメインは以下のようにしたら指定できるっぽい

ngrok http -subdomain=hogehoge 8006

BASIC認証は以下

ngrok http -auth='user:password' 8006

以上、そんな感じ

参考リンク

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?