[{"data":1,"prerenderedAt":184},["ShallowReactive",2],{"news-item-\u002Fja\u002Fnews\u002Fpublish-site-ngrok":3},{"id":4,"title":5,"body":6,"category":172,"created by":173,"date":174,"description":12,"extension":175,"meta":176,"navigation":177,"path":178,"sections":179,"seo":180,"stem":181,"thumbnail":182,"__hash__":183},"content_ja\u002Fja\u002Fnews\u002Fpublish-site-ngrok.md","ngrokを使った簡易的なサイトの公開",{"type":7,"value":8,"toc":159},"minimark",[9,13,16,20,23,26,29,32,37,40,50,53,57,73,76,83,92,100,104,107,110,132,135,138,149,152],[10,11,12],"p",{},"開発を行っていて外部にサイトを公開をしたいがローカルPCしかない、他システムとの連携でSSLが必要だが、まだ構成が決まっているわけではなく費用を抑えたいということはないでしょうか？",[10,14,15],{},"そういう場合にngrokを使用するという選択肢があるようなので、調査してみました。",[17,18,19],"h2",{"id":19},"ngorkとは",[10,21,22],{},"クライアントPCからngorkサーバをSSH トンネル経由でローカルPCにリクエストし、クライアントにデータを返すということができます。",[10,24,25],{},"簡単に説明すると使用している開発のローカルPC１台のみでwebサービスを公開できるということです。",[10,27,28],{},"クライアントのリクエストURLはngorkサーバのドメイン になってしまいますが、動作は正常に行うことができます。",[17,30,31],{"id":31},"サイト公開手順",[33,34,36],"h3",{"id":35},"ローカル環境にwebサイトを構築する","ローカル環境にWEBサイトを構築する",[10,38,39],{},"私の検証環境はLinux, node.jsで構築しています。(MacやWindowsでも使用できます。)",[10,41,42,43,49],{},"まず、Linuxで、node.jsを用いてHellow worldが",[44,45,46],"a",{"href":46,"rel":47},"http:\u002F\u002Flocalhost:3000",[48],"nofollow","で表示できるようにします。",[10,51,52],{},"node.jsのインストールや起動の手順については割愛させて頂きます。",[33,54,56],{"id":55},"ngrokをインストールする","Ngrokをインストールする",[10,58,59,60,64,65,69,70],{},"ngrokのダウンロードサイトから\"more option\"選択し、Linuxのインストールファイルをダウンロードします。 ",[44,61,62],{"href":62,"rel":63},"https:\u002F\u002Fngrok.com\u002Fdownload",[48]," 下記のコマンドを使用し解凍します ",[66,67,68],"code",{},"sudo unzip ngrok-stable-linux-amd64.zip"," 次のコマンドを実行し、ngrokコマンドを使用できるディレクトリに移動させます。 ",[66,71,72],{},"sudo mv ngrok \u002Fusr\u002Flocal\u002Fbin",[33,74,75],{"id":75},"サイトを公開する",[10,77,78,79,82],{},"起動確認を行うため、下記のコマンドを実行します。 ",[66,80,81],{},"ngrok http 3000"," このように表示されると正常に動作しています。 !",[84,85],"img",{"className":86,"alt":89,"src":90,"style":91},[87,88],"block","mx-auto","","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F08\u002F31163944\u002Fimage-20200831123812187.png","width: 100%;",[10,93,94,95,99],{},"その後、”Forwarding”に記載されているURLにアクセスすると対象のwebページが表示されます。 ここでは\"",[44,96,97],{"href":97,"rel":98},"https:\u002F\u002F1a59dd82300c.ngrok.io\u002F",[48],"\"にアクセスを行います。",[84,101],{"className":102,"alt":89,"src":103,"style":91},[87,88],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F08\u002F31163946\u002Fimage-20200831131606185.png",[10,105,106],{},"以上がWebに公開するまでの手順となります。かなり簡単ですね。",[33,108,109],{"id":109},"フリーアカウントとしての感想",[111,112,113,117,120,123,126,129],"ul",{},[114,115,116],"li",{},"モバイルアプリ、IoTアプリで開発段階のWebサーバとの疎通テストがサーバの準備なしにすぐ実施できるため使いやすい。",[114,118,119],{},"Basic認証が起動コマンドに入れるだけで実現することができる。\"ngrok http -auth=\"username:password\" 8080\"。（フリーアカウントではできない可能性あり。）",[114,121,122],{},"ngrok.ioのサーバからフォワードされているため、grok.ioサーバのパフォーマンスの影響を受ける。",[114,124,125],{},"ngrok.ioのサーバ経由のため、完全にセキュアな通信かどうかわからない。ngrok次第なところがある。",[114,127,128],{},"通信のフローとして　\"ユーザ　クライアント PC\" - (http\u002Fhttps) - \"ngrok.ioサーバ\" - (SSH Tunnel) -\" Webサーバー クライアント PC\" となる。ngrokサーバから公開しているPCにfirewallを超えて直接入ってくることになり、所属組織や得意先とのセキュリティの規則に引っかかる可能性がある。",[114,130,131],{},"フリーアカウントでは固定のドメインで公開はできない。",[33,133,134],{"id":134},"フリーアカウントとしての使い道",[10,136,137],{},"あくまでフリーアカウントとしての用途を記載すると、下記の3つと考えられます。",[111,139,140,143,146],{},[114,141,142],{},"個人の活動として、また個人が責任をとれるネットワーク内で、勉強や技術調査をするときによい。",[114,144,145],{},"Restful APIとモバイルアプリ\u002FIoTを使ったサービスで、限られた時間内にお互いのアプリをdebugしながらプログラムや設定を調整するときによい。",[114,147,148],{},"プロジェクトの初期段階で決められたサーバがなく、一時的にサイトのレビューをお客様から要求されたときによい。",[33,150,151],{"id":151},"参考",[10,153,154],{},[44,155,158],{"href":156,"rel":157},"https:\u002F\u002Fngrok.com\u002Fdocs",[48],"ngorkドキュメンテーション",{"title":89,"searchDepth":160,"depth":160,"links":161},2,[162,163],{"id":19,"depth":160,"text":19},{"id":31,"depth":160,"text":31,"children":164},[165,167,168,169,170,171],{"id":35,"depth":166,"text":36},3,{"id":55,"depth":166,"text":56},{"id":75,"depth":166,"text":75},{"id":109,"depth":166,"text":109},{"id":134,"depth":166,"text":134},{"id":151,"depth":166,"text":151},"tech talk","Briswell Vietnam Co Ltd","2020-09-09","md",{},true,"\u002Fja\u002Fnews\u002Fpublish-site-ngrok",null,{"title":5,"description":12},"ja\u002Fnews\u002Fpublish-site-ngrok","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F09\u002F09163119\u002Fngrok-logo.png","YFRFDKev-DBxd5VC6KMp7YWNyIh_Psexq_MloSvUT6U",1785320532884]