NGROKの設定方法【Windows編】・Laravel Sail対応あり

LaravelとStripe API連携

NGROKは、テスト用にローカルでHTTPS環境を構築できる無料ツール。

順調にいけば、10分程度で設定できちゃいます。WindowsでNGROKを使えるようになる設定方法を解説しますね。

なお、Mac編は下記をご覧ください。

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

① NGROKをインストール

下記より、環境にあった.exeファイルをダウンロードします。

EXEファイルをダウンロードした後、解凍します。わたしは Cドライブの下にstripeフォルダを作り、その中に解凍した.exeファイルを設置しました。

Junko
Junko

どこにおいても良いのですが、今後も使うので、分かりやすい場所に置いておくと良いですよ。

② NGROKにアカウントを登録

まず、NGROKに登録します。

③ NGROKにログイン

サインアップ後、ログインします。

NGROKにログインした直後に、【Connect your account】が表示されています。

コードをコピーしておきます。

④Windows Powershell起動

NGROKをインストールしたフォルダ(C:\stripe) を開きます。

SHIFTキーを押しながら右クリックを行うと、「PowerSherllウィンドウをここで開く」メニューがでてきます。このメニューをクリックします。

補足

Windows PowerShell以外のコマンドツールでもOKかもしれません。

ただ、わたしはGitBushなどで試したところ、うまくいきませんでした。

⑤ アカウントを接続

③でコピーしたコードを、PowerShellに貼り付けます。(ngrok configで始まるコードです。)

ただ、このままでは下記のエラーになります。

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

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

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

⑥ HTTP転送開始

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

Laravel Sailを使っている場合には、下記コードを入力します。

(貼り付けた画面は下記のようになります。)

画面が切り替わります。

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

⑦ テスト実施

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

Laravel Sailの場合は、sail upを行い、sailを起動させておきます。

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

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

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

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

さいごに

以上です。

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

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

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

LaravelとStripe API連携

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

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

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

【無料プレゼント】

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

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

詳細はこちらをクリック

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる


Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。
セミナーで、StripeやChatGPT連携、デバックなど実践スキルを分かりやすく学べます。

ラボの案内を見てみる

Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました