ngrok --https communication in local environment (exposing the server to the outside)
About this article
Since it became necessary to perform https communication in the local environment, this article describes how to realize it.
environment
macOS Catalina：10.15.7 ngrok：2.3.35
Why did you need to use https communication?
In the case of chrome and firefox when acquiring the current location with a web application, the location information could be acquired easily if permission was given with the browser, but with safari, the location information can be acquired unless it is ** https ** I didn't have it, so I had to do my best to realize https communication.
I before I knew ngrok
** I: ** "I was sure that I issued a certificate when I made the portfolio. It took too long just to realize https communication, and I'm sorry (crying)" ** Senior: ** "You should use ngrok" ** Me: ** "Englock ???"
This paved the way for me to thank ngrok.
Who is ngrok?
ngrok allows you to expose a web server running on your local machine to the internet. Just tell ngrok what port your web server is listening on.
If you translate it as it is, ** "ngrok allows you to publish a locally running server to the internet ~. You can just tell ngrok the port number that the server is listening to." ** https://ngrok.com/docs
Introducing the flow up to using ngrok. First of all, the official homepage pattern that didn't work for some reason (probably my fault)
https://dashboard.ngrok.com/get-started/setup
① Registration to ngrok
It can be linked with github, so you can do it right away! !! !!
② Click Download for Mac OS
This will download the zip to your download folder
Screenshot 2020-12-24 17.16.26
③ Unzip the downloaded zip
unzip /path/to/ngrok.zip
④ Acquisition of authentication token
If the acquisition of the authentication token is successful, ~/.ngrok2/ngrok.yml is generated and the authentication token information is registered. By doing this, it seems that more functions will be available.
./ngrok authtoken 1m5phzLi6zWczGbAKKigfWZMmOX_2TXGc5biazsTbXm58buiP
From here, all I had to do was start the server and publish the website on ngrok.
Since I am developing with rails, after launching the server with rails s, I ran ngrok http 3000 in another terminal, but I could not open the corresponding page. .. .. ..
$ rails s
$ ngrok http 3000
ngrok by @inconshreveable
Session Status online
Account hanatareman (Plan: Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://d3f630bc2c4f.ngrok.io -> http://localhost:3000
Forwarding https://d3f630bc2c4f.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
It wasn't good to access both. Mystery is still mystery why I did it.
http://d3f630bc2c4f.ngrok.io
https://d3f630bc2c4f.ngrok.io
Successful pattern (executed after failure)
Apparently it can be installed with brew.
① Install with brew
$ brew install ngrok
② Start up the server again
$ rails s
$ ngrok http 3000
ngrok by @inconshreveable
Session Status online
Account hanatareman (Plan: Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://d3f630bc2c4f.ngrok.io -> http://localhost:3000
Forwarding https://d3f630bc2c4f.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
When you access the generated URL. .. ..
The page is displayed! !! !! !! !! Even safari got my current location properly! !! !! !!
Reference article
Thank you very much. https://qiita.com/mininobu/items/b45dbc70faedf30f484e
Finally
It seems to be useful for sharing the status of the development environment, and it is convenient because you can check the production environment without deploying each time. I wanted to know when I was creating a portfolio.