Cloudflare Tunnel でWebサイトを公開する

Cloudflare Argo Tunnel と Google Compute Engine (GCE) を使ってWebサイトを公開して見たいと思います。今回はDockerでWordPressを立ち上げるまでを目標にします。（このブログを移行したときの備忘録的なやつです）

前提としてGoogle Cloud Platform に登録済みでCloudflareにNSを移管していること、Cloudflare Zero Trust に登録をしている必要があります。全て無料で利用可能です！

VMインスタンス作成

おもむろにGCEでVMインスタンスを作成します。

今回は無料枠を利用するため以下の構成で作成していきます。

  • リージョン: us-west1 (オレゴン)
  • マシンタイプ: e2-micro
  • ブートディスクの種類: 標準永続ディスク
  • ブートディスクのサイズ: 30GB

OS は Ubuntu 22.04 LTS を利用します。

Cloudflare Tunnel 経由で外部公開を行うため、HTTP及びHTTPSトラフィックは許可しなくても大丈夫です。

Cloudflare Tunnel を作成する

Cloudflare Zero Trust のダッシュボードにアクセスし、Tunnels のページを開きます。

https://dash.teams.cloudflare.com/

トンネルを作成する旨のボタンがあるので、クリックしてトンネル名を入力します。

トンネルを決めたら Save tunnel をクリックして次に進みます。

今回は Ubuntu なので、Debian を選択します。(Dockerでも大丈夫です)

初回なので、Install and run a connector ブロックの左側のコードをクリックしてコピーします。

VMのセットアップ

作成したVMにSSHで入って必要なものをインストールしていきます。※project 引数はgcloudコンフィグと同じ場合は不要です。

gcloud compute ssh --project={プロジェクトID} blog

更新してDockerをインストールします。

sudo apt update && sudo apt upgrade
sudo apt install docker docker-compose

任意のディレクトリで docker-compose.yml を作成します。注:必要最低限の構成です。

version: '3'
services:
  wordpress:
    container_name: wordpress
    image: wordpress:php8.1
    restart: always
    depends_on:
      - database
    ports:
      - 80:80
  database:
    container_name: mariadb
    image: mariadb
    restart: always
    ports:
      - 3306:3306

docker-compose を起動します。

sudo docker-compose up -d

次にコピーしたコマンドを貼り付けて実行します。

curl -L --output cloudflared.deb https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb && 

sudo dpkg -i cloudflared.deb && 

sudo cloudflared service install {key}

ドメイン接続

Cloudflareの画面に戻り Connectors ブロックで接続の状態が確認できれば下部にある Next ボタンをクリックします。

公開するサブドメインと VM側の80番ポートを指定して、Save wordpress tunnel をクリックします。

サブドメインにアクセスして正常に表示されていれば完了です。

Activateになっていれば正常です。

まとめ

Cloudflare Tunnel を使うことで、ファイアーウォールを弄る事なく手軽にWebサイトを公開できるので紹介してみました。

次回は Cloudflare Gateway や Cloudflare Access と Cloudflare WARP を用いたVPN的な使い方を紹介してみたいと思います。