NGROKは、テスト用にローカルでHTTPS環境を構築できる無料ツール。MacでNGROKを使えるようになる設定方法を説明しますね。
なおWindows編は下記にあります。
ローカルで HTTPS テスト環境を構築できるNGROKの使い方【Mac編】
① NGROKをインストール
下記より、環境にあった.exeファイルをダウンロードします。
EXEファイルをダウンロードした後、解凍します。解凍した.exeファイルは、お好きな場所に設置しておいてくだい。わたしは、”work” ディレクトリの中に設置しました。
どこにおいても良いのですが、今後も使うので、分かりやすい場所に置いておくと良いですよ。
② NGROKにアカウントを登録
まず、NGROKに登録します。
③ NGROKにログイン
サインアップ後、ログインします。
NGROKにログインした直後に、【Connect your account】が表示されています。
コードをコピーしておきます。
④ターミナル起動
ターミナルを起動します。cdコマンドを使って、①でNGROKをインストールしたフォルダに移動します。
cdコマンドは、今いる場所を移動できるコマンドです。詳しくは下記ご覧ください。
移動後、./ のあとに、③でコピーしたコードを貼り付けます（下記赤枠部分）。最初に ./ をつけることで、現在の場所にあるngrokと言う意味になります。
コードを貼り付けた後、Enterキーを押します。すると、【Authtoken saved to configuration file】と表示されます。
⑤ HTTP転送開始
次に、ターミナルに下記コードを入力します。
|
1 |
./ngrok http 8000 |
Laravel Sailを使っている場合には、下記コードを入力します。
|
1 |
./ngrok http 80 |
（貼り付けた画面は下記のようになります。）
画面が切り替わります。
セッションが開始され、URLが表示されます。
⑥ テスト実施
あらかじめ、php artisan serveでローカルサーバーも立ち上げ、プロジェクトを表示させておきます。Laravel Sailの場合は、sail upを行い、sailを起動させておきます。
もしプロジェクトにサインインした状態であれば、一度ログアウトしておいてください。
次に、⑤の手順でngrokによって生成されたURLをブラウザのアドレス欄に貼り付けます。
なおNGROKによって生成されたURLを使うと、CSSやJavaScriptが無効になり、表示がくずれたりします。
これを修正する方法は、別記事で解説してます。
さいごに
以上です。
なおPowerShell上で ./ngrok help コマンドを入力するとヘルプも表示されます。
わたしはStripeとLaravelの連携をさせるために、今回の処理を行いました。
StripeとLaravel連携は他の記事で解説しているので、もしご興味あれば、関連記事も併せてお読みください。
