iTranslated by AI
Exposing Local Servers via Cloudflare Tunnel using Google Domains
As developers, we strive to complete most of our application development by accessing local servers. However, there are inevitably situations where we need to expose a local server to the internet.
- When you want team members to briefly try out a screen currently under development
- When a Webhook URL is required for integration with other services
In such cases, you can solve this by using tunneling software to publish your local server to the internet.
ngrok is fine, but Cloudflare Tunnel is better!
ngrok is a standard method for exposing local servers. However, I have been concerned about the following points:
- You need to register for a paid version to use custom domains.
- It seems
*.jp.ngrok.iowas used for phishing sites, and Chrome started showing warnings (in some environments).
Because of this, the momentum to use Cloudflare Tunnel has increased. I will record the procedure for exposing a local server while obtaining the domain itself through Google Domains. Although there is a management fee for the custom domain itself, Cloudflare Tunnel can be used for free.
Environment
I tested this on an M1 Mac machine.
Registering Custom Name Servers with Google Domains
Cloudflare routes traffic from any custom domain to your local server, but you must own the custom domain itself. This article starts from the point where you have already acquired a domain with Google Domains. For information on how to obtain a custom domain with Cloudflare, please refer to the documentation.
As an example, let's say you have acquired example.com on Google Domains.
Cloudflare: Website Registration
Even when using a tunnel, you must first register the website. Log in to Cloudflare and go to Websites > Add a Site.
Plan Selection Screen
The "Free" plan is fine.
Proxy?
DNS settings should appear on the next screen, where you will see a setting called Proxy status. For details, please refer to this blog, but since it should not affect the tunnel's functionality, you can leave it enabled here.
Name Server Change Screen
The Cloudflare name servers should be displayed, so make a note of them.
Google Domains: Registering Custom Name Servers
Select example.com in Google Domains. Choose DNS from the left menu and select the Custom Name Servers tab. Click "Manage name servers." There, register the Cloudflare name servers you noted earlier.
After configuring, execute "Switch to these settings." Now, you can manage your custom domain through Cloudflare.
Cloudflare: DNS Check
Once you have configured Google Domains to use custom name servers, check on the Cloudflare side to see if it's completed. If example.com appears as active on the home screen as shown in the figure, the setup should be complete.
Setting up Cloudflare Tunnel
Once you have completed the settings up to this point, you can move on to the procedure for exposing your local server. We will use the cloudflared command. Here is the documentation I referred to:
Install the command (for macOS):
brew install cloudflare/cloudflare/cloudflared
Log in via the command line:
cloudflared tunnel login
Create a tunnel with a name that makes it easy to identify yourself.
cloudflared tunnel create <a tunnel name that makes it easy to identify as yours>
# Example
cloudflared tunnel create waddy
The tunnel ID and JSON file path generated at this time will be used in subsequent steps. Please note that this file probably cannot be regenerated or re-acquired (please let me know if there is a way to re-acquire it).
Create the Tunnel configuration file.
tunnel: <Tunnel-UUID> # This is the tunnel ID generated by tunnel create
credentials-file: /home/me/.cloudflared/<Tunnel-UUID>.json # Set with an absolute path
ingress:
- hostname: waddy.example.com
service: http://localhost:8080
- service: http_status:404
Here, I have shown an example of exposing a local server running on port 8080. You can write multiple settings here. You can also set paths as needed. For details, please refer to the official documentation.
Add a routing so that the local server can be tunneled.
cloudflared tunnel route dns waddy waddy.example.com
This will add a CNAME to the DNS server. Once this is done, all that's left is to expose the local server.
cloudflared tunnel --config ~/.cloudflared/config.yml run waddy
Now, accessing waddy.example.com will connect to your local server via HTTPS. This is useful for scenarios such as when Webhook settings are required.
You can access the local server content with the registered custom domain
Exposing the Local Server from the Second Time Onwards
You can simply restart the tunnel using the configuration you created.
cloudflared tunnel --config ~/.cloudflared/config.yml run waddy
Executing this command will allow you to expose it in the same way.
When Setting the Same Custom Domain for Team Members
I have just used waddy.example.com to expose my server, but for example, it would be great if a team member like Zenitsu could use zenn.example.com. To do this, they first need to log into the same Cloudflare account, so you must invite them to your account. You can invite members from Manage Account > Members on the Cloudflare screen.
Ask the member to follow the steps introduced in "Setting up Cloudflare Tunnel." At this point, if they change the name part of cloudflared tunnel create <a tunnel name that makes it easy to identify as yours>, they should be able to expose each member's local environment with a unique subdomain.
Conclusion
I was able to expose a local server for only the cost of managing a custom domain with Google Domains. Cloudflare is really helpful for addressing these specific needs. I hope this is useful to someone.
References
Discussion