Shiny Life

毎日の生活が光り輝きますように

NEW ARTICLE
【XAMPP×ECCUBE4】構築したローカル環境にXdebugの導入
  1. HOME
  2. Web
  3. [Windows]ngrokを利用して一時的にLaravel環境のあるDockerMachineを外部公開する

[Windows]ngrokを利用して一時的にLaravel環境のあるDockerMachineを外部公開する

  • 2020.02.14
  • Web
[Windows]ngrokを利用して一時的にLaravel環境のあるDockerMachineを外部公開する

下記のLineBotを使ったチュートリアルを実施中に、ngrokという一時的に外部から通信できるツールがあることを知りました。

Teckpit　Laravelで飲食店検索LINE Botを作ろう！

https://www.techpit.jp/

そのあまりの便利さに驚いたので、ご紹介したいと思います。

Windowsでngrokを使うためにはどうしたらいいのだろう、

LaradockでLaravel環境を構築したのだけれど、一時的に外部から通信できるようにするにはどうしたらいいのだろうといった方向けにまとめてみました。

目次

環境

・PC : Windows home 10
・docker：　version19.03.1(docker toolbox)
・Laradock
・Laravel：　version6.12.0
・nginx：　version1.17.7

前提として、既にLaravelの環境が構築できているものとします。

LaravelでHelloWorldの画面を出力させるソースコードの準備

今回は、HelloWorldの画面を出力させることで、外部と通信ができることを
確認したいと思います。

<?php

Route::get('/hello', 'HelloController@index');
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HelloController extends Controller
{
    public function index()
    {
        return view('hello');
    }
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>laravel-linebot</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <h1>HelloWorld</h1>
</body>
</html>

ポートフォワーディングの設定下準備

まずは、Dockerのターミナルを開きます。

ターミナルを起動すると以下の画面が表示され、DockerMachineにIP　192.168.99.100が割り振られたことを確認できます。

                        ##         .
                  ## ## ##        ==
               ## ## ## ## ##    ===
           /"""""""""""""""""\___/ ===
      ~~~ {~~ ~~~~ ~~~ ~~~~ ~~~ ~ /  ===- ~~~
           \______ o           __/
             \    \         __/
              \____\_______/

docker is configured to use the default machine with IP 192.168.99.100
For help getting started, check out the docs at https://docs.docker.com


Start interactive shell

フォルダ構成は以下のようにします。project-folderに移動します。

srcがLaravelの格納場所になります。

project-folder
 |-laradock
 |-src

$ ls
laradock/  src/

laradockに移動して、コンテナを起動します。

$ cd laradock

$ docker-compose up -d nginx
Starting laradock_docker-in-docker_1 ... done
Starting laradock_workspace_1        ... done
Starting laradock_php-fpm_1          ... done
Starting laradock_nginx_1            ... done

ポートの確認をします。nginxは80番ポートで通信していることがわかります。
ちなみにlaradockにあるenvファイルの247行目あたりでポート番号の変更をすることができます。

### NGINX #################################################

NGINX_HOST_HTTP_PORT=80
NGINX_HOST_HTTPS_PORT=443
$ docker ps
CONTAINER ID        IMAGE                COMMAND                  CREATED             STATUS              PORTS                                            NAMES
e4ba84c4863c        laradock_nginx       "/bin/bash /opt/star…"   4 hours ago         Up 59 seconds       0.0.0.0:80-81->80-81/tcp, 0.0.0.0:443->443/tcp   laradock_nginx_1
3cdd9892ea0e        laradock_php-fpm     "docker-php-entrypoi…"   14 hours ago        Up 59 seconds       9000/tcp                                         laradock_php-fpm_1
e63ce5360c8d        laradock_workspace   "/sbin/my_init"          14 hours ago        Up 59 seconds       0.0.0.0:2222->22/tcp                             laradock_workspace_1

ポートフォワーディングの設定

ローカルホストからDockerMachine(192.168.99.100)にポートフォワーディングする設定を追加します。

$ netsh interface portproxy add v4tov4 listenport=80 listenaddress=127.0.0.1 connectport=80 connectaddress=192.168.99.100

ポートフォワーディング の設定の確認をします。

$ netsh interface portproxy show v4tov4

ipv4 をリッスンする:         ipv4 に接続する:

Address         Port        Address         Port
--------------- ----------  --------------- ----------
127.0.0.1       80          192.168.99.100  80

ngrokのインストール

こちらのサイトからngrokを任意のフォルダにインストールして、
解凍します。

https://ngrok.com/

ngrokの起動

コマンドプロンプトなどでngrok.exeのあるフォルダまで移動して起動します。

>dir
・
・
略
・
・
2020/02/14  06:31    <DIR>          .
2020/02/14  06:31    <DIR>          ..
2020/02/14  06:31        26,757,632 ngrok.exe

>ngrok http 80

ngrok by @inconshreveable                                                            (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://4350××××.ngrok.io -> http://localhost:80
Forwarding                    https://4350××××.ngrok.io -> http://localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

HelloWorldの画面確認

上記で割り当てられた「http://4350××××.ngrok.io」を使用して、/helloにアクセスします。

HelloWorldが出力されたらOKです。

ポートフォワーディング の設定削除

こちらはctrl + C　でngrokを停止することができます。

ngrokのアドレスは起動する毎に変更されます。

>ngrok http 80

ngrok by @inconshreveable                                                            (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://4350××××.ngrok.io -> http://localhost:80
Forwarding                    https://4350××××.ngrok.io -> http://localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

下記のコマンドでポートの設定の削除とその確認をすることができます。何も表示されないことを確認してください。

>netsh interface portproxy delete v4tov4 listenport=80 listenaddr=127.0.0.1

>netsh interface portproxy show v4tov4

参考ページ

Windowsでポートフォワーディングする方法

https://kagasu.hatenablog.com/entry/2018/01/29/184205

Docker Machineで構築した環境に実機端末でアクセスする 新

https://qiita.com/horikeso/items/87ebd3722039dc7b0c21

まとめ

ngrokを利用することで、こんなに簡単にローカル環境で外部と通信できるんですね。みなさんもぜひ使ってみてくださいね。

少しでも参考になれば幸いです。以上です。

PHPフレームワークLaravel入門第2版 [ 掌田津耶乃 ]
created by Rinker