LoginSignup
11

ngrokをMacに入れて使ってみる

Last updated at Posted at 2022-03-02

概要

  • ngrokをMacに入れてローカル開発環境を外からアクセスできるようにする

方法

  1. 下記にアクセスする。

    1. https://ngrok.com/download
  2. 「Mac OS」のタブにHomeBrewのインストールコマンドが記載されていたのでコピーする。

    ngrok_-_download.png

  3. ターミナルでコピーしたインストールコマンドを実行する。

    $ brew install ngrok/ngrok/ngrok
    
  4. インストール後下記コマンドを実行して正常にインストールされている事を確認する。

    $ ngrok -h
    
  5. 下記のように出力されれば問題なくインストールが完了して$ ngrokコマンドが使えるようになっている。

    $ ngrok -h
    NAME:
       ngrok - tunnel local ports to public URLs and inspect traffic
    
    DESCRIPTION:
        ngrok exposes local networked services behinds NATs and firewalls to the
        public internet over a secure tunnel. Share local websites, build/test
        webhook consumers and self-host personal services.
        Detailed help for each command is available with 'ngrok help <command>'.
        Open http://localhost:4040 for ngrok's web interface to inspect traffic.
    
    EXAMPLES:
        ngrok http 80                    # secure public URL for port 80 web server
        ngrok http -subdomain=baz 8080   # port 8080 available at baz.ngrok.io
        ngrok http foo.dev:80            # tunnel to host:port instead of localhost
        ngrok http https://localhost     # expose a local https server
        ngrok tcp 22                     # tunnel arbitrary TCP traffic to port 22
        ngrok tls -hostname=foo.com 443  # TLS traffic for foo.com to port 443
        ngrok start foo bar baz          # start tunnels from the configuration file
    
    VERSION:
       2.3.40
    
    AUTHOR:
      inconshreveable - <alan@ngrok.com>
    
    COMMANDS:
       authtoken    save authtoken to configuration file
       credits      prints author and licensing information
       http         start an HTTP tunnel
       start        start tunnels by name from the configuration file
       tcp          start a TCP tunnel
       tls          start a TLS tunnel
       update       update ngrok to the latest version
       version      print the version string
       help         Shows a list of commands or help for one command
    
  6. 下記にアクセスする。

    1. https://ngrok.com/
  7. 画面右上の「Sing up」をクリックする。

    ngrok_-_secure_introspectable_tunnels_to_localhost.png

  8. 任意の情報を入力してサインアップを行う。(筆者はGithubのアカウントで認証を行った。)

    ngrok_-_secure_introspectable_tunnels_to_localhost.png

  9. ログインした画面に表示されている「2. Connect your account」の中に記載されているコマンドをコピーして実行する。

    Setup_-_ngrok.png

  10. エラーが出ず下記のように出ればOK(認証の設定ファイルの場所は皆さんとは異なります。)

    Authtoken saved to configuration file: /Users/okawashun/.ngrok2/ngrok.yml
    
  11. 自分の環境では8000を一時的にパブリック・アクセスできるようにしたいので下記コマンドを実行した。

    $ ngrok http 8000
    
  12. 下記のように表示され、一時的なURLが出力された。

    ngrok by @inconshreveable                                                                                                                                                             (Ctrl+C to quit)
                                                                                                                                                                                                          
    Session Status                online                                                                                                                                                                  
    Session Expires               1 hour, 59 minutes                                                                                                                                                      
    Version                       2.3.40                                                                                                                                                                  
    Region                        United States (us)                                                                                                                                                      
    Web Interface                 http://127.0.0.1:4040                                                                                                                                                   
    Forwarding                    http://86ef-119-83-24-55.ngrok.io -> http://localhost:8000                                                                                                              
    Forwarding                    https://86ef-119-83-24-55.ngrok.io -> http://localhost:8000                                                                                                             
                                                                                                                                                                                                          
    Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                                                             
                                  0       0       0.00    0.00    0.00    0.00     
    
  13. 自分の場合、既にDockerでlaravelのアプリケーションを動作させ、ローカル開発環境の8000をdockerのnginxコンテナの80ポートにフォワーディングさせていたので上記のhttps://86ef-119-83-24-55.ngrok.ioにアクセスしたところ下記のようにlaravelのtop画面が表示された。(URLが若干違うのはngrokを再起動したため)

    Laravel.png

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
11