DEV Community

Christopher Robin Chase
Christopher Robin Chase

Posted on • Edited on

Termux-Ngrok Configuration

#webdev #linux #termux

Procedures to configure ngrok on termux to run nginx webserver

Steps to Configure Nginx on Termux with Ngrok

  1. Download Termux at Playstore
  2. Open Termux app after download
  3. Update apt-get or pkg using this command you can use apt-get or pkg in installing package 
apt-get update
pkg upgrade
Enter fullscreen mode Exit fullscreen mode
  1. Access shared and external storage using this command 
termux-setup-storage
Enter fullscreen mode Exit fullscreen mode

Then navigate to the home directory to check if the internal storage folder is present.

  cd ~
  ls
Enter fullscreen mode Exit fullscreen mode

If the storage folder is in the list, then you're good to go.

  1. Install nginx 
pkg install nginx
Enter fullscreen mode Exit fullscreen mode

  1. After installing Nginx, you can access localhost using your phone's browser. Just type: localhost:8080.

  2. If the Nginx welcome page appears, then the installation was successful.

Note: You can also stop the Nginx service by typing the following command

  nginx -s stop
Enter fullscreen mode Exit fullscreen mode
  1. The default location for Nginx HTML files is /usr/share/nginx/html. You can use the following command to navigate to that directory: 
cd ~
cd ..
cd /usr/share/nginx/html
Enter fullscreen mode Exit fullscreen mode

To view the contents of the folder, type the following command:

ls
Enter fullscreen mode Exit fullscreen mode

Note: This is where you deploy HTML files to run on the Nginx web server. You’ll find the default Nginx web page named index.html in this directory.

8.1 If you want to configure the Nginx .conf file (for example, to change the port), you can navigate to /etc/nginx to locate the nginx.conf file. To do so, type the following command:

cd ~
cd ..
cd /usr/etc/nginx
ls
Enter fullscreen mode Exit fullscreen mode

Then, you can find the nginx.conf file there. To view its contents, type the following command:

cat nginx.conf
Enter fullscreen mode Exit fullscreen mode

If you want to edit the file, make sure to install the nano package.

pkg install nano
Enter fullscreen mode Exit fullscreen mode

After installing nano, you can now edit the file using the following command:

nano nginx.conf
Enter fullscreen mode Exit fullscreen mode

Note: locate the

server {

   listen     8080;
   server_name    localhost;
Enter fullscreen mode Exit fullscreen mode

To edit the port from 8080 to your choice.

Warning: Editing this file can disrupt the web server service, so be careful when modifying the conf file.

  1. To access localhost on a different device, we will use ngrok.

Ngrok is a cross-platform application that exposes local server ports to the internet.

To get started, download ngrok from: https://ngrok.com/download.

Note: Register on the ngrok website, as we will use your own Auth Token to save it on Termux and enable at least the free plan.

Note: Make sure that the ngrok zip file is in the Download folder of your internal storage so that it can be easily accessed from Termux.

  1. After installing ngrok, navigate to the "Download" folder in your internal storage. 
cd ~
cd storage
ls   // to check if the download folder exists

cd download
ls // to check the ngrok zip file
Enter fullscreen mode Exit fullscreen mode

After that, type the following command to unzip the file and extract it to the home directory:

unzip ngrok.zip -d ~
Enter fullscreen mode Exit fullscreen mode

Note: The file name of ngrok may differ, so you need to type the exact filename of the zip file in order to unzip it.

  1. After you unzipped the file, lets go to home folder. 
cd ~ 
ls
Enter fullscreen mode Exit fullscreen mode
  1. If you see ngrok in the list, then it's good. Next, let's change its permissions to make it executable. Type the following command: 
chmod +x ngrok
ls
Enter fullscreen mode Exit fullscreen mode

If ngrok is now displayed in green, it is ready to be launched.

  1. Now, it's time to log in to the ngrok website and copy your auth_token to Termux.

In the dashboard, you will find the command to save your token in Termux. To do this, type the following command:

./ngrok <auth_token>
Enter fullscreen mode Exit fullscreen mode

Example:

./ngrok 3yfi69Hf9ekfpsh&dhjPsnfu&dhdoapBs7znao7adn
Enter fullscreen mode Exit fullscreen mode

Make sure you see a success message or at least "Auth Saved" after doing this.

  1. Now, let's try to connect our localhost to ngrok. We know that it uses port 8080. To do so, type the following command: 
./ngrok http 8080
Enter fullscreen mode Exit fullscreen mode

Then, Termux will switch to the ngrok connection service, where you can see:

  • ngrok by @inconshreveable

  • Version

  • Status

  • Region, etc.

Now, let's look at the Session Status. It will always say "Reconnecting" and loop indefinitely. This happens because the latest version of ngrok may not work directly in Termux as it requires /etc/resolv.conf. To resolve this, let's install another package.

pkg install proot
pkg install proot resolve-conf
Enter fullscreen mode Exit fullscreen mode

Note (Important): After installing proot, every time you use ngrok, you must run this command to use ngrok properly each time you close Termux.

termux-chroot
Enter fullscreen mode Exit fullscreen mode

termux-chroot gives ngrok access to start a tunneling service, allowing us to expose our localhost to the internet.

  1. After that, you are now ready to use ngrok anytime, anywhere, as long as you have an internet connection. Type this command again: 
ngrok http 8080
Enter fullscreen mode Exit fullscreen mode

Now, the Session Status will turn green and say "online." You will see two Forwarding links, one for HTTP and one for HTTPS. We will use the HTTP link to browse it in your browser.

Now, let's open it in your browser. Just copy the HTTP domain and paste it into the search bar.

Example:

http://4488-136-158-8-66.ngrok.io

And you will see the Welcome to Nginx page.

Remember:

To deploy web files, always refer to procedure number 8.

The default location for Nginx HTML files is /usr/share/nginx/html. You can use the following command to navigate to that directory:

cd ~
cd ..
cd /usr/share/nginx/html
Enter fullscreen mode Exit fullscreen mode

And always remember to type

   termux-chroot
Enter fullscreen mode Exit fullscreen mode

Everytime we open termux app to run ngrok.

That's all thank you.

Prepared by Christopher Robin Chase

Top comments (0)