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 image.png 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.

Recommended Posts

ngrok --https communication in local environment (exposing the server to the outside)
Docker × Laravel HTTPS (SSL) communication in local environment
[Rails] Run LINEBot in local environment using ngrok
When the server fails to start in Eclipse
How to install Docker in the local environment of an existing Rails application [Rails 6 / MySQL 8]
HTTPS connection with Java to the self-signed certificate server
[Rails] What to do if you accidentally install bundle in the production environment in your local environment
I tried to develop the cache function of Application Container Cloud Service in the local environment
How to correctly check the local HTML file in the browser
Try switching from the RHEL environment to the Ubuntu environment Server installation
[Programming beginner] What to do when rails s becomes an error in the local development environment
After learning Progate, I tried to make an SNS application using Rails in the local environment
[Beginner] Procedure to log in to the virtual environment built with Vagrant
I tried to build the environment of PlantUML Server with Docker
How to install the language used in Ubuntu and how to build the environment
I want to display the images under assets/images in the production environment
[Rails] How to reset the database in production environment (Capistrano version)
Pass the i18n locale to JavaScript
Run Redmine in the local environment of Windows10 Pro-Use Docker Desktop for Windows
How to solve the local environment construction of Ruby on Rails (MAC)!
How to migrate a web application created in a local docker environment to AWS
I had to lower the PHP version in Docker + Composer + Laravel environment
Ubuntu 18 is the OS that adds a NIC to a server instance in Sakura's cloud and assigns a local IP.
[Rails] I want to reset everything because the data in the local environment is strange! What to do before that