LoginSignup
2
0

More than 3 years have passed since last update.

【ngrok】ngrokでwebサービステスト公開

Last updated at Posted at 2021-02-09

はじめに

ngrokの公式HP:https://ngrok.com/

記事に書いてあること

前編:ngrokってなに?
後編:ngrokをつかってローカルサーバーをインターネットに公開

ngrokとは??

@@@@
ngrok allows you to expose a web server running on your local machine to the internet. Just tell ngrok what port your web server is listening on.
@@@@
日本語訳:ngrokを使用すると、ローカルマシンで実行されているWebサーバーをインターネットに公開できます。

ngrokと検索した結果

スクリーンショット 2021-02-09 14.08.09.png

動作環境

・Mac book air 2015 early

それではやってみる

0.ngrok.comからサインインする

https://ngrok.com/
サインインするとダッシュボードにはいれます。

1.fileをダウンロードして解凍する

Download for Macからダウンロードする
スクリーンショット 2021-02-09 13.50.43.png
解凍するとこんな感じのファイルがでてきますよ〜〜
(上が解凍前、下が解凍後)
スクリーンショット 2021-02-09 13.51.43.png

2.ダッシュボードに書いてあるコマンドを打ち込む

↓のような説明書きがあるのでその通りにコマンドを打ち込む
(ダウンロードした画面の下に書いてあるコマンドです)

  1. Unzip to install(zipの解答:↑でやりました)
    $ unzip /path/to/ngrok.zip

  2. Connect your account(アカウントを紐づける)
    $ ./ngrok authtoken xxxxxxxxxxxxxxxxxxxxxxxxxxxx
    僕はDownload直下で解凍したので、その階層でコマンドをうちます

3.ローカルサーバーを立ち上げる

僕はpythonでlocalサーバーを立ち上げました。

//local severたちあげ
$ python server.py

server.pyと同じ階層に
先ほど解凍したngrokファイルをおいて

$ ./ngrok http 8888←任意のポート

を実行すると、下の写真みたいな感じになります。
fdsfwae.png

赤枠のURLをブラウザにうちこんであげれば、httpとhttpsどちらも取得することができます。
(ちなみにfreeプランの場合、立ち上げるごとにURLは変更されます。この記事を書いている時点でこの写真のURLは僕のものではなくなっています。)

トンネル化なので、ローカルサーバーを立ててあげないと、うまく機能しません。
その場合はこんな感じのエラーがでるはずです。
fawe.png

おわり

今回は、httpsでカメラをつかったサイトをデプロイ?しました。
ちゃんと動いています👍

無料でこれはいいですね!!
スクリーンショット 2021-02-09 14.05.15.png

2
0
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
2
0