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

## 概要

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

## 方法

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

    ![ngrok_-_download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/df329ad8-6200-a90b-5dda-366701bb6686.png)

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

    ```terminal
    $ brew install ngrok/ngrok/ngrok
    ```

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

    ```terminal
    $ ngrok -h
    ```

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

    ```terminal
    $ 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
    ```

1. 下記にアクセスする。
    1. [https://ngrok.com/](https://ngrok.com/)
1. 画面右上の「Sing up」をクリックする。

    ![ngrok_-_secure_introspectable_tunnels_to_localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/44bf057f-5ddc-56fc-cb66-9de8b5b1080f.png)

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

    ![ngrok_-_secure_introspectable_tunnels_to_localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/37145482-f49c-e089-7846-55f9f3fe46f5.png)

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

    ![Setup_-_ngrok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/c9747aeb-8483-f967-3851-2a127451d7e5.png)

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

    ```terminal
    Authtoken saved to configuration file: /Users/okawashun/.ngrok2/ngrok.yml
    ```

1. 自分の環境では8000を一時的にパブリック・アクセスできるようにしたいので下記コマンドを実行した。

    ```terminal
    $ ngrok http 8000
    ```

1. 下記のように表示され、一時的な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     
    ```

1. 自分の場合、既にDockerでlaravelのアプリケーションを動作させ、ローカル開発環境の8000をdockerのnginxコンテナの80ポートにフォワーディングさせていたので上記の`https://86ef-119-83-24-55.ngrok.io`にアクセスしたところ下記のようにlaravelのtop画面が表示された。（URLが若干違うのはngrokを再起動したため）

    ![Laravel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/57cb8157-eb93-c3fa-68c3-a69c049a1f0f.png)