{"id":1628,"date":"2023-07-26T21:56:12","date_gmt":"2023-07-26T14:56:12","guid":{"rendered":"https:\/\/dev.artru.io.vn\/?p=1628"},"modified":"2023-10-30T21:36:28","modified_gmt":"2023-10-30T14:36:28","slug":"chia-se-trang-web-tu-localhost-cloudflare-tunnel","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/chia-se-trang-web-tu-localhost-cloudflare-tunnel\/","title":{"rendered":"Share website from localhost using Cloudflare Tunnel tool"},"content":{"rendered":"<p class=\"wp-block-paragraph\">I&#039;m sure you&#039;ve tried to share your website from &quot;localhost&quot; so everyone can access it, or show demo products to customers without having to buy additional hosting. Some services can do that like Ngrok, Localtunnel, Serveo,...<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, the limitation of the above services with the free version is that you cannot customize your own domain name, limit the number of requests, and the operation time. If you use wordpress source code then static file urls like css, js, images will get 403 error.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And then I accidentally bumped into the Cloudflare Tunnel. At first, I didn&#039;t know if it would meet my requirements. Well, let&#039;s give each other a chance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I am really surprised at what Cloudflare Tunnel can do. Also, it&#039;s free, who can afford it?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No more rambling, in this article I will guide you to use Cloudflare Tunnel to share websites from localhost.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">About Cloudflare Tunnel<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cloudflare Tunnel is a tool that allows you to securely connect your resources to Cloudflare without the need for a public IP address.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All requests sent and received will be saved through Cloudflare. This greatly reduces the load on your device if there is a problem like DDoS, because Cloudflare will take care of it. At the same time, it also creates cache in the visitors and gives the same good speed as a real project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cloudflare Tunnel User Manual<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Request<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In order for Cloudflare Tunnel to work at its best, you need to prepare the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Domain:<\/strong> 1. Domain Name: You need a domain name to be able to use Cloudflare Tunnel. You can register cheap domain names io.vn, id.vn. Or register a free domain name <a href=\"\/en\/ten-mien-mien-phi-eu-org\/\" target=\"_blank\" data-type=\"post\" data-id=\"68\" rel=\"noreferrer noopener\">eu.org here<\/a>.<\/li>\n\n\n\n<li><strong>Configure virtual domain for localhost:<\/strong> Wamp, Xamp, Laragon tools all support this feature.<br>For example:\n<ul class=\"wp-block-list\">\n<li>The actual domain name is domain.com<\/li>\n\n\n\n<li>The domain name for public website I will use an additional subdomain is public.domain.com<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Build a website based on the subdomain just created above in localhost.<\/li>\n<\/ol>\n\n\n\n<p class=\"has-vivid-red-color has-black-background-color has-text-color has-background wp-block-paragraph\">Remember to create the file <strong>robots.txt<\/strong> to avoid SERPs indexing these sub-websites<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">User-agent: *\nDisallow: \/<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Install and configure Cloudflare Tunnel<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The steps to connect a domain name with Cloudflare I will not repeat in this article.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. At the cloudflare homepage select <strong>Zero Trust<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1605\" height=\"834\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Zero-Trust-Cloudflare.png\" alt=\"Zero Trust Cloudflare\" class=\"wp-image-1658\"\/><figcaption class=\"wp-element-caption\">Zero Trust Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">2. Select <strong>Access <\/strong>\u2192 choose <strong>Tunnels<\/strong> \u2192 press <strong>Create a tunnel<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"657\" height=\"471\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Tunnels-Cloudflare.png\" alt=\"Tunnels Cloudflare\" class=\"wp-image-1661\"\/><figcaption class=\"wp-element-caption\">Tunnels Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">3. In the Name your tunnel field enter the name of your tunnel (no spaces) \u2192 press <strong>Save tunnel<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1620\" height=\"617\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Name-your-tunnel-Cloudflare.png\" alt=\"Name your tunnel Cloudflare\" class=\"wp-image-1663\"\/><figcaption class=\"wp-element-caption\">Name your tunnel Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">4. Select the operating system according to your device. As mine is Windows 64-bit \u2192 click download link <strong>Cloudflare<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1052\" height=\"714\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Configure-Tunnel-Cloudflare.png\" alt=\"Configure Tunnel Cloudflare\" class=\"wp-image-1666\"\/><figcaption class=\"wp-element-caption\">Configure Tunnel Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">5. Double-click the file <strong>Cloudlared.msi <\/strong>Just downloaded to install.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6. Open <strong>CMD <\/strong>with rights <strong>Administrator<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">7. Copy and paste the code into CMD \u2192 press <strong>Enter<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1041\" height=\"708\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Install-Cloudflared-via-CMD.png\" alt=\"Install Cloudflare via CMD\" class=\"wp-image-1669\"\/><figcaption class=\"wp-element-caption\">Install Cloudflare via CMD<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">8. If successful it will show the message <strong>Connected<\/strong> \u2192 press <strong>next<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1072\" height=\"702\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Installed-successfully-Cloudflared.png\" alt=\"Installed successfully Cloudfled\" class=\"wp-image-1671\"\/><figcaption class=\"wp-element-caption\">Installed successfully Cloudfled<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">9. Here please fill in the fields according to your needs.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1061\" height=\"356\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Edit-public-hostname-Tunnel-Cloudflare.png\" alt=\"Edit public hostname Tunnel Cloudflare\" class=\"wp-image-1676\"\/><figcaption class=\"wp-element-caption\">Edit public hostname Tunnel Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">10. In the section <strong>TLS <\/strong>below please turn on <strong>No TLS Verify<\/strong> to avoid SSL errors.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1532\" height=\"570\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/No-TLS-Verify-Tunnel-Cloudflare.png\" alt=\"No TLS Verify Tunnel Cloudflare\" class=\"wp-image-1678\"\/><figcaption class=\"wp-element-caption\">No TLS Verify Tunnel Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">11. Press <strong>Save tunnel<\/strong> and if you see the Status message <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\"><strong>HEALTHY<\/strong><\/mark> ie Tunnel is active.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1607\" height=\"399\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Status-Healthy-Tunnel-Cloudflare.png\" alt=\"Status Healthy Tunnel Cloudflare\" class=\"wp-image-1682\"\/><figcaption class=\"wp-element-caption\">Status Healthy Tunnel Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now use another device to test.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"270\" height=\"600\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Test-Mobile-Tunnel-Cloudflare.png\" alt=\"Test Mobile Tunnel Cloudflare\" class=\"wp-image-1685\"\/><figcaption class=\"wp-element-caption\">Test Mobile Tunnel Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Turn Tunnel On\/Off when not in use<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Using CMD<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open <strong>CMD <\/strong>with rights <strong>Administrator<\/strong> and enter the command below:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Turn off: <code data-no-translation=\"\" data-no-auto-translation=\"\">sc stop cloudflared<\/code><\/li>\n\n\n\n<li>Turn on: <code data-no-translation=\"\" data-no-auto-translation=\"\">sc start cloudflared<\/code><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"627\" height=\"416\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/sc-stop-cloudflared.png\" alt=\"sc stop cloudflamed\" class=\"wp-image-1688\"\/><figcaption class=\"wp-element-caption\">sc stop cloudflamed<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>You can also create a .cmd file for faster operation. However, a little more tweaking is needed so that the file can run automatically with Admin rights.<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Right click on windows select <strong>new <\/strong>\u2192 <strong>Text Document<\/strong><\/li>\n\n\n\n<li>Rename the file to your liking.<br>For example <code data-no-translation=\"\" data-no-auto-translation=\"\">STOP Cloudflared.cmd<\/code>, <code data-no-translation=\"\" data-no-auto-translation=\"\">STOP Cloudflared.cmd<\/code>.<\/li>\n\n\n\n<li>Click on the file you just created <strong>Edit<\/strong> and fill in the content below:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To turn off:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">@echo off\n&gt;nul 2&gt;&amp;1 \"%SYSTEMROOT%System32cacls.exe\" \"%SYSTEMROOT%System32configsystem\"\nif '%errorlevel%' NEQ '0' (\n    echo Requesting administrative privileges...\n    goto UACPrompt\n) else (goto gotAdmin)\n\n:UACPrompt\n    echo Set UAC = CreateObject^(\"Shell.Application\"^) &gt; \"%temp%getadmin.vbs\"\n    set params = %*:\"=\"\"\n    echo UAC.ShellExecute \"%~s0\", \"%params%\", \"\", \"runas\", 1 &gt;&gt; \"%temp%getadmin.vbs\"\n\n\"%temp%getadmin.vbs\"\ndel \"%temp%getadmin.vbs\"\nexit \/B\n\n:gotAdmin\n    sc stop cloudflared<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To enable:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">@echo off\n&gt;nul 2&gt;&amp;1 \"%SYSTEMROOT%System32cacls.exe\" \"%SYSTEMROOT%System32configsystem\"\nif '%errorlevel%' NEQ '0' (\n    echo Requesting administrative privileges...\n    goto UACPrompt\n) else (goto gotAdmin)\n\n:UACPrompt\n    echo Set UAC = CreateObject^(\"Shell.Application\"^) &gt; \"%temp%getadmin.vbs\"\n    set params = %*:\"=\"\"\n    echo UAC.ShellExecute \"%~s0\", \"%params%\", \"\", \"runas\", 1 &gt;&gt; \"%temp%getadmin.vbs\"\n\n\"%temp%getadmin.vbs\"\ndel \"%temp%getadmin.vbs\"\nexit \/B\n\n:gotAdmin\n    sc start cloudflared<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"515\" height=\"106\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Tao-tep-CMD-ON-OFF-Tunnel-Cloudflare.png\" alt=\"Create a CMD file on off Tunnel Cloudflare\" class=\"wp-image-1727\"\/><figcaption class=\"wp-element-caption\">Create a CMD file on off Tunnel Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Please run this file with permissions <strong>Administrator<\/strong> Please.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using DNS CNAME Records<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Or turn off with <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\"><strong>proxy <\/strong><\/mark>(golden cloud) of CNAME records in the Cloudflare DNS management area.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1210\" height=\"391\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Off-proxy-dns-Cloudflare.png\" alt=\"Off proxy dns Cloudflare\" class=\"wp-image-1695\"\/><figcaption class=\"wp-element-caption\">Off proxy dns Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Conclude<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Thus, through the information presented above, we can see that Cloudflare Tunnel is a useful tool that allows you to share your website from localhost easily and securely. With benefits like built-in DDoS protection, load balancing, and encrypted tunnels, using Cloudflare Tunnel gives you more peace of mind in protecting your resources.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hope this article will help you in better understanding Cloudflare Tunnel and how to use it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See more at: <a href=\"https:\/\/developers.cloudflare.com\/cloudflare-one\/connections\/connect-networks\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudflare Tunnel<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>T\u00f4i ch\u1eafc r\u1eb1ng b\u1ea1n \u0111\u00e3 t\u1eebng t\u00ecm c\u00e1ch chia s\u1ebb trang web c\u1ee7a m\u00ecnh t\u1eeb &#8220;localhost&#8221; \u0111\u1ec3 m\u1ecdi ng\u01b0\u1eddi c\u00f3 th\u1ec3 truy c\u1eadp, hay show s\u1ea3n ph\u1ea9m demo cho kh\u00e1ch h\u00e0ng m\u00e0 ko ph\u1ea3i mua th\u00eam hosting. M\u1ed9t v\u00e0i d\u1ecbch v\u1ee5 c\u00f3 th\u1ec3 l\u00e0m vi\u1ec7c \u0111\u00f3 nh\u01b0 Ngrok, Localtunnel, Serveo,&#8230; Tuy nhi\u00ean h\u1ea1n ch\u1ebf c\u1ee7a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1654,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[117],"class_list":["post-1628","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website","tag-cloudflare"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/1628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=1628"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/1628\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media\/1654"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=1628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=1628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=1628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}