## Cloudflare Tunnelでローカル開発環境を外部公開する手順

### 1-1. はじめに
Cloudflare Tunnelは、ローカルの開発環境を安全かつ簡単にインターネットに公開できるツールです。内部ネットワークを露出させることなく、外部からアクセスできるURLを生成します。本記事では、Cloudflare Tunnelを使ってローカルのWebサーバーを公開する手順について詳しく解説します。

### 2-1. 必要な準備
Cloudflare Tunnelの設定を行う前に、以下の準備が必要です：

- Cloudflareアカウントの作成
- ドメイン名の管理がCloudflareに移管されていること
- ローカルで動作するWebサーバー（例: Apache, Nginx）

### 3-1. Cloudflare Tunnelのインストール

Cloudflare Tunnel（以前はArgo Tunnelとして知られていました）を利用するために、まずCloudflareのCLIツールである`cloudflared`をインストールします。

#### 3-2. インストール手順

- **macOSの場合:**

  ```bash
  brew install cloudflare/cloudflare/cloudflared
  ```

- **Ubuntuの場合:**

  ```bash
  sudo apt-get install apt-transport-https
  curl -fsSL https://pkg.cloudflare.com/gpg.key | sudo apt-key add -
  echo "deb [arch=amd64] https://pkg.cloudflare.com/ $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/cloudflare-main.list
  sudo apt-get update
  sudo apt-get install cloudflared
  ```

### 3-3. トンネルの作成

Cloudflare Tunnelを作成します。

![img](/mosaic-code.jpg)

このコマンドを実行すると、トークンとトンネルIDが生成され、トンネルの設定が完了します。

### 4-1. ローカル開発環境の設定

次に、ローカル開発環境をトンネルに接続します。

#### 4-2. トンネルの構成

`~/.cloudflared/config.yml`にトンネルの設定を追記します。

![img](/mosaic-code.jpg)

この構成ファイルでは、`<あなたのサブドメイン>.example.com`のリクエストをローカルの`localhost:8000`にルーティングします。

### 5-1. DNS設定
CloudflareダッシュボードでDNSレコードを設定します。以下の手順でサブドメインをトンネルに接続します：

1. Cloudflareダッシュボードにログイン
2. DashboardのWebsitesタブに移動
3. ドメイン名を選択し、DNS設定をクリック
4. Aレコードを作成し、名前をサブドメインに設定し、「トンネルを管理」を選択

### 6-1. トンネルの起動
トンネルを手動で起動し、動作を確認します。

![img](/mosaic-code.jpg)

### 6-2. 自動起動
トンネルを自動起動するために、`systemd`を利用してサービスを設定します。

![img](/mosaic-code.jpg)

これで、サーバーの起動時に自動的にトンネルが起動します。

### 7-1. まとめ
Cloudflare Tunnelを使うことで、簡単にローカル環境を外部に公開することができます。今回は最小の設定を紹介しましたが、Webサーバーのリダイレクトや認証、複数のサービスの設定などにも応用できる強力なツールです。ぜひ、開発環境の公開に利用してみてください。 [cv:issue_marketplace_engineer]

## Cloudflare Tunnelでローカル開発環境を外部公開する手順

### 1-1. はじめに
Cloudflare Tunnelは、ローカルの開発環境を安全かつ簡単にインターネットに公開できるツールです。内部ネットワークを露出させることなく、外部からアクセスできるURLを生成します。本記事では、Cloudflare Tunnelを使ってローカルのWebサーバーを公開する手順について詳しく解説します。

### 2-1. 必要な準備
Cloudflare Tunnelの設定を行う前に、以下の準備が必要です：

- Cloudflareアカウントの作成
- ドメイン名の管理がCloudflareに移管されていること
- ローカルで動作するWebサーバー（例: Apache, Nginx）

### 3-1. Cloudflare Tunnelのインストール

Cloudflare Tunnel（以前はArgo Tunnelとして知られていました）を利用するために、まずCloudflareのCLIツールである`cloudflared`をインストールします。

#### 3-2. インストール手順

- **macOSの場合:**

  ```bash
  brew install cloudflare/cloudflare/cloudflared
  ```

- **Ubuntuの場合:**

  ```bash
  sudo apt-get install apt-transport-https
  curl -fsSL https://pkg.cloudflare.com/gpg.key | sudo apt-key add -
  echo "deb [arch=amd64] https://pkg.cloudflare.com/ $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/cloudflare-main.list
  sudo apt-get update
  sudo apt-get install cloudflared
  ```

### 3-3. トンネルの作成

Cloudflare Tunnelを作成します。

```bash
cloudflared tunnel create <トンネル名>
```

このコマンドを実行すると、トークンとトンネルIDが生成され、トンネルの設定が完了します。

### 4-1. ローカル開発環境の設定

次に、ローカル開発環境をトンネルに接続します。

#### 4-2. トンネルの構成

`~/.cloudflared/config.yml`にトンネルの設定を追記します。

```yaml
tunnel: <トンネルID>
credentials-file: /etc/cloudflared/<トンネル名>.json

ingress:
  - hostname: <あなたのサブドメイン>.example.com
    service: http://localhost:8000
  - service: http_status:404
```

この構成ファイルでは、`<あなたのサブドメイン>.example.com`のリクエストをローカルの`localhost:8000`にルーティングします。

### 5-1. DNS設定
CloudflareダッシュボードでDNSレコードを設定します。以下の手順でサブドメインをトンネルに接続します：

1. Cloudflareダッシュボードにログイン
2. DashboardのWebsitesタブに移動
3. ドメイン名を選択し、DNS設定をクリック
4. Aレコードを作成し、名前をサブドメインに設定し、「トンネルを管理」を選択

### 6-1. トンネルの起動
トンネルを手動で起動し、動作を確認します。

```bash
cloudflared tunnel run <トンネル名>
```

### 6-2. 自動起動
トンネルを自動起動するために、`systemd`を利用してサービスを設定します。

```bash
sudo cloudflared service install
```

これで、サーバーの起動時に自動的にトンネルが起動します。

### 7-1. まとめ
Cloudflare Tunnelを使うことで、簡単にローカル環境を外部に公開することができます。今回は最小の設定を紹介しましたが、Webサーバーのリダイレクトや認証、複数のサービスの設定などにも応用できる強力なツールです。ぜひ、開発環境の公開に利用してみてください。 [![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

Cloudflare Tunnelでローカル開発環境を外部公開する手順

1-1. はじめに

続きを読むには単価診断を受けてください（30秒）