ローカルで HTTPS テスト環境を構築できるNGROKの使い方【Windows編】

Laravel上の決済機能

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 : 用語 ‘ngrok’ は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。名前が正しく記述されていることを確認し、パスが含まれている場合はそのパスが正しいことを確認してから、再試行してください。

コピーしたコードの最初に ./ をつけてください。これによって、現在の場所にあるngrokと言う意味になります。

うまくいくと、【Authtoken saved to configuration file】と表示されます。

⑥ HTTP転送開始

次に、PowerShellに、下記コードを入力します。

画面が切り替わります。

セッションが開始され、URLが表示されます。

⑦ テスト実施

あらかじめ、php artisan serveでローカルサーバーも立ち上げ、プロジェクトを表示させておきます。

もしプロジェクトにサインインした状態であれば、一度ログアウトしておいてください。

次にngrokによって生成されたURLをブラウザのアドレス欄に貼り付けます。

なおNGROKによって生成されたURLを使うと、CSSやJavaScriptが無効になり、表示がくずれたりします。

これを修正する方法は、別記事で解説してます。

さいごに

以上です。

なおPowerShell上で ./ngrok help コマンドを入力するとヘルプも表示されます。

わたしはStripeとLaravelの連携をさせるために、今回の処理を行いました。

StripeとLaravel連携は他の記事で解説しているので、もしご興味あれば、関連記事も併せてお読みください。

Laravel上の決済機能

【Laravelの教科書・無料プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました