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

LaravelとStripe API連携

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とStripe API連携

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

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

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

【無料プレゼント】

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

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

詳細はこちらをクリック

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



【法人向けオンラインセミナー実施中】
1日セミナーと、専用サイトを使った1ヵ月セミナーをご用意しています。
社内にLaravelエンジニアを増やしたい時にご活用ください。

詳細はこちら

Laravelの本を書きました。


ひつじが目印です

Laravel10対応

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

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!

コメント

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