无公网 ip 的 Linux 服务器借助 cf tunnel 搭建有域名的网页服务

准备

  • Linux 服务器
  • 基础的 Cloudflare Tunnel 知识
  • 基础的 Docker 知识
  • 基础的 Nginx 知识

开始

我们假设你拿到的是一台纯净的什么都还没配置的 Linux 服务器。

1. 安装 docker 及 docker compose

Docker 官方文档:

官方文档中给出了多种安装方式:

Installation methods

我们要使用其中的 install-using-the-convenience-script 的方式:

curl -fsSL https://get.docker.com -o get-docker.sh

sudo sh get-docker.sh

直接两行命令,连 docker 带 docker compose plugin 都一起安装了。

2. 创建 cf tunnel

我们使用 Docker 来创建 tunnel,docker-compose.yml 配置文件如下:

version: "3.9"
services:
  tunnel:
    container_name: cloudflared-tunnel
    image: cloudflare/cloudflared
    network_mode: "host"
    restart: unless-stopped
    command: tunnel run
    environment:
      - TUNNEL_TOKEN=[your tunnel token]

这里的 token 填写你 Cloudflare 创建 tunnel 的时候这里的 token 值:

不知道 cf tunnel 怎么使用的同学请自行学习。

3. 网页显示配置

我们创建一个 index.html 文件(记得给权限)放在 /var/www/ 目录下并在 8080 端口显示。

Nginx 配置:

server {
        listen 8080;
        listen [::]:8080;
        server_name 127.0.0.1;

        location / {
                root /var/www;
                index index.html;
        }
}

Cloudflare 端配置:

4. 结果

image

上面讲了访问基本的网页 index.html,下面讲个高级一点的,用 Docker 搭建的 Wordpress 服务如何使用 cf tunnel 来实现域名访问。

1. Wordpress Docker 配置

这一份祖传的 docker-compose.yml 如下:

# docker-compose.yml
version: '3.3'
 
services:
   db:
     image: mysql:latest
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress
 
   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress
volumes:
    db_data: {}

2. Cloudflare 配置

由于上面 Docker 中配置的端口是本机 8000 端口,所以自然 cf tunnel 里面也要配成这个端口:

3. 结果

访问域名即得如下页面:

看到这个证明配置成功,开始安装 Wordpress 即可。

安装完直接用你设置的账号密码登录,点击右上角用户名字头像即可进入编辑页面,直接访问域名可以看到你的 blog 页面:

END