1. yassun-youtube

    Posted

    yassun-youtube
Changes in title
+Web開発の便利ツール ngrokをご紹介! webhookを利用した開発に便利!
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,43 @@
+# はじめに
+今回はWeb開発における便利ツールngrokについて紹介します!
+ngrokはローカルの特定のポートをWeb上に公開できるツールです。
+
+LINEやSlack, Salesforceなどでwebhookを使う時に大活躍します!
+また、ローカルのポートを共有できるので、デモなどにも適しているかもしれません。
+
+# YouTube動画
+動画で確認したい方はこちらをどうぞ!
+[【YouTube動画】 Web開発の便利ツール ngrokをご紹介! webhookを利用した開発に便利!](https://youtu.be/9UYZf-AUXhw)
+[![Web開発の便利ツール ngrokをご紹介! webhookを利用した開発に便利!](https://img.youtube.com/vi/9UYZf-AUXhw/0.jpg)](https://youtu.be/9UYZf-AUXhw)
+
+# インストール方法
+Macの場合、brewで簡単にインストールできます。
+
+```bash
+brew install ngrok
+```
+
+# 使い方
+ローカルの3000番ポートを公開したい場合は、以下のようにします。
+
+```bash
+ngrok http 3000 --region jp
+```
+
+実行すると、以下のような画面になります。
+``http://xxxx.ngrok.io`` または ``https://xxxx.ngrok.io``にアクセスすると、3000番ポートに繋がります。
+![スクリーンショット 2020-11-30 22.51.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/90e624ed-43ce-4317-7f99-aa5e08a530c9.png)
+
+Node.jsなどで8080番ポートを公開したい場合は、Invalid Host Headerを防ぐために、次のようにしたりします。
+
+```bash
+ngrok http 8080 --region jp -host-header="localhost:8080"
+```
+
+# 有料版
+無料版の場合、ngrokを使うたびに、``http://xxxx.ngrok.io``のxxxx部分が変わります。
+有料版にすると、その部分を固定することができ、サブドメインも追加することができます。
+
+Pricingは$5からです。
+Webhookの開発で大活躍するので、ぜひ活用してみてください!!
+![スクリーンショット 2020-12-07 18.15.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/43a54bac-e09d-2fb6-9c10-b1a4b0816141.png)