如何使用Cloudflare Argo隧道保护源站？

作者姚伟斌

不要让别人绕过Cloudflare保护并滥用您的源服务器！

Cloudflare是一个受欢迎的CDN和安全平台，为从小型到企业级的数百万个网站提供支持。当您为您的网站实施Cloudflare时，所有流量都将得到安全和加速。但是这仅适用于使用域名访问站点的情况。如果有人找出实际的服务器IP（源）并滥用它呢？

查找Cloudflare背后站点的服务器IP并不难。您可以在explained here和here找到如何做到这一点。您看，仅仅实施CDN和基于云的WAF是不够的。您还应考虑保护来源。

那么，解决方案是什么？

Argo Tunnel – Cloudflare提供的一种智能解决方案，用于保护源服务器免受直接攻击。

这是一个您需要在服务器上安装的守护程序，它在服务器与Cloudflare网络之间创建了一个加密隧道。零复杂的ACL/IP表配置。

好消息是，您不需要在PRO或更高的套餐下。即使您在免费套餐下也可以开始使用。您只需支付Argo订阅费用，价格从每月5美元起。

让我们开始安装和设置。

安装Cloudflare守护程序

  • 使用root或sudo特权登录源服务器
  • 下载最新的稳定包。我使用的是Ubuntu，因此其他操作系统的.deb文件，请查看official download page。
wget https://bin.equinox.io/c/VdrWdbjqyF/cloudflared-stable-linux-amd64.deb
  • 安装下载的包
dpkg -i cloudflared-stable-linux-amd64.deb
  • 让我们验证版本以确保已安装
root@gf-prod:~# cloudflared --version
cloudflared version 2020.2.0 (built 2020-02-07-1653 UTC)
root@gf-prod:~#

太棒了！

验证守护程序

下一步是使用守护程序对Cloudflare进行身份验证。运行以下命令

cloudflared tunnel login
  • 它会提示您使用以下URL登录到Cloudflare并授权该站点。
root@gf-prod:~# cloudflared tunnel login
Please open the following URL and log in with your Cloudflare account:

https://dash.cloudflare.com/argotunnel?callback=https%3A%2F%2Flogin.argotunnel.com%XXXXX-XXX-XXXXXX%3B

Leave cloudflared running to download the cert automatically.
INFO[0030] Waiting for login...                         
INFO[0060] Waiting for login...                         
INFO[0090] Waiting for login...                         
INFO[0120] Waiting for login...                         
You have successfully logged in.
If you wish to copy your credentials to a server, they have been saved to:
/root/.cloudflared/cert.pem
root@gf-prod:~#
  • 授权后，您应该看到类似于此的内容。

启动隧道

让我们开始下面的隧道。

cloudflared tunnel --hostname [HOSTNAME] http://localhost:80

例如：

姚伟斌

程序猿

我是姚伟斌，也被称为文景。我的专业领域涵盖了开放源代码的深度探索、网络编程和网络建站。我热衷于分享我的编程和建站实践经验，尤其擅长于Nginx和Proxy服务器的管理。此外，我还对Python和NodeJS这两种编程语言有着深刻的理解和独到的见解。

最近，我致力于爬虫技术的研究，探索如何通过高效的数据抓取为项目增添价值。我的目标是通过持续的学习和创新，为开放源代码社区贡献我的力量，并帮助那些对网络编程和网站建设感兴趣的人士。

类似文章

使用React开始使用Storybook Storybook是一款用于开发和测试React组件的工具。它可以让您在一个独立的环境中创建和展示组件，以便更轻松地构建用户界面。 在本教程中，我们将介绍如何在React项目中使用Storybook。 步骤1：安装Storybook 首先，您需要在项目中安装Storybook。可以通过运行以下命令来完成安装： “` npm install @storybook/react –save-dev “` 步骤2：创建.storybook目录 在项目的根目录下创建一个名为.storybook的文件夹。 步骤3：创建配置文件 在.storybook目录中创建一个名为main.js的文件，并将以下内容复制到文件中： “`javascript module.exports = { stories: [‘../src/**/*.stories.js’], }; “` 步骤4：创建组件 在src目录中创建一个名为Button.js的文件，并在其中添加以下代码： “`jsx import React from ‘react’; const Button = ({ label }) => { return {label}; }; export default Button; “` 步骤5：创建故事 在src目录中创建一个名为Button.stories.js的文件，并在其中添加以下代码： “`jsx import React from ‘react’; import { storiesOf } from ‘@storybook/react’; import Button from ‘./Button’; storiesOf(‘Button’, module) .add(‘Default’, () => ) .add(‘Primary’, () => ); “` 步骤6：运行Storybook 最后，通过运行以下命令来启动Storybook： “` npx start-storybook -p 6006 “` 现在，您可以在浏览器中访问http://localhost:6006来查看Storybook界面，并测试和展示您的组件。 这就是使用React和Storybook的基本步骤！希望本教程能帮助您开始使用Storybook来提高React组件的开发效率。

使用React开始使用Storybook Storybook是一款用于开发和测试React组件的工具。它可以让您在一个独立的环境中创建和展示组件，以便更轻松地构建用户界面。 在本教程中，我们将介绍如何在React项目中使用Storybook。 步骤1：安装Storybook 首先，您需要在项目中安装Storybook。可以通过运行以下命令来完成安装： “` npm install @storybook/react –save-dev “` 步骤2：创建.storybook目录 在项目的根目录下创建一个名为.storybook的文件夹。 步骤3：创建配置文件 在.storybook目录中创建一个名为main.js的文件，并将以下内容复制到文件中： “`javascript module.exports = { stories: [‘../src/**/*.stories.js’], }; “` 步骤4：创建组件 在src目录中创建一个名为Button.js的文件，并在其中添加以下代码： “`jsx import React from ‘react’; const Button = ({ label }) => { return {label}; }; export default Button; “` 步骤5：创建故事 在src目录中创建一个名为Button.stories.js的文件，并在其中添加以下代码： “`jsx import React from ‘react’; import { storiesOf } from ‘@storybook/react’; import Button from ‘./Button’; storiesOf(‘Button’, module) .add(‘Default’, () => ) .add(‘Primary’, () => ); “` 步骤6：运行Storybook 最后，通过运行以下命令来启动Storybook： “` npx start-storybook -p 6006 “` 现在，您可以在浏览器中访问http://localhost:6006来查看Storybook界面，并测试和展示您的组件。 这就是使用React和Storybook的基本步骤！希望本教程能帮助您开始使用Storybook来提高React组件的开发效率。

作者姚伟斌

“place all your UI components at a place” in React is to organize and manage all the UI components in a centralized manner. This can be achieved by using a concept called “Component Composition”.

在React中，你是否曾尝试将所有的UI组件放置在同一个位置？如果你是React世界的新手，那么你可能不知道。所谓“将所有的UI组件放置在同一个位置”，是指以集中的方式组织和管理所有的UI组件。这可以通过使用“组件组合”的概念来实现。

Component Composition is a design pattern where small, reusable components are combined to build larger and more complex components. This approach promotes code reusability, maintainability, and separation of concerns.

组件组合是一种设计模式，它将小型、可重用的组件组合在一起，构建更大更复杂的组件。这种方法促进了代码的可重用性、可维护性和关注点分离。

By breaking down your UI into smaller components, you can easily manage and reuse them across your application. This allows for better organization and modularization of your code.

通过将UI拆分成更小的组件，你可以很容易地在整个应用程序中管理和重用它们。这样可以更好地组织和模块化你的代码。

With Component Composition, you can create a hierarchy of components where each component is responsible for its own specific functionality. This helps in better understanding the codebase and makes it easier to debug and maintain.

通过组件组合，你可以创建一个组件的层次结构，其中每个组件负责自己特定的功能。这有助于更好地理解代码库，并使调试和维护变得更容易。

In conclusion, placing all your UI components at a place in React can be achieved through Component Composition. This approach helps in better organization, reusability, and maintainability of your code. So, give it a try and see the benefits it brings to your React application!

总之，在React中将所有的UI组件放置在一个地方可以通过组件组合来实现。这种方法有助于更好地组织、可重用和可维护你的代码。所以，不妨试一试，看看它给你的React应用程序带来了哪些好处！