NGROKは、テスト用にローカルでHTTPS環境を構築できる無料ツール。
順調にいけば、10分程度で設定できちゃいます。
ただ私は、ちょっとトラップがあったりして手こずりました^^;
WindowsでNGROKをすぐ使えるようになる（はず）の設定方法を紹介しますね。
ローカルで HTTPS テスト環境を構築できるNGROKの使い方【Windows編】
①サインイン
まず、NGROKに登録します。
② NGROKにログイン
サインアップ後、ログインします。
NGROKにログインした直後に、【Connect your account】が表示されています。
コードをコピーしておきます。
③ NGROKをインストール
さらにNGROKログインページの上部に【Download for Windows】ボタンがあるのでクリック。
EXEファイルをダウンロードした後、解凍します。
ローカル上に保存しておいてください。
④Windows Powershell起動
スタートメニューからWindows Powershellを起動します。
PowerShell上で、NGROKをインストールしたフォルダまで移動をします。
あるいは、NGROKをインストールしたフォルダ上でSHIFTキーを押しながら右クリックを行うと、「PowerSherllウィンドウをここで開く」メニューがでてきます。
こっちの方法のほうが、便利かと思います。
なおcdコマンドの使い方が分からない方は、下記の記事を参考にしてくださいね。
よく使うので、知っておくと便利です。
補足
WindowsPowerShell以外のコマンドツールでもOKかもしれません。
ただ、わたしはGitBushなどで試したところ、うまくいきませんでした。
⑤ アカウントを接続
②でコピーしたコードを、PowerShellに貼り付けます。
ただ、このままでは下記のエラーになります。
コピーしたコードの最初に ./ をつけてください。これによって、現在の場所にあるngrokと言う意味になります。
うまくいくと、【Authtoken saved to configuration file】と表示されます。
⑥ HTTP転送開始
次に、PowerShellに、下記コードを入力します。
|
1 |
./ngrok http 8000 |
画面が切り替わります。
セッションが開始され、URLが表示されます。
⑦ テスト実施
あらかじめ、php artisan serveでローカルサーバーも立ち上げ、プロジェクトを表示させておきます。
もしプロジェクトにサインインした状態であれば、一度ログアウトしておいてください。
次にngrokによって生成されたURLをブラウザのアドレス欄に貼り付けます。
なおNGROKによって生成されたURLを使うと、CSSやJavaScriptが無効になり、表示がくずれたりします。
これを修正する方法は、別記事で解説してます。
さいごに
以上です。
なおPowerShell上で ./ngrok help コマンドを入力するとヘルプも表示されます。
わたしはStripeとLaravelの連携をさせるために、今回の処理を行いました。
StripeとLaravel連携は他の記事で解説しているので、もしご興味あれば、関連記事も併せてお読みください。
コメント