Secure PipesとSwitchyOmegaで4クリックお手軽ポートフォワーディング

みなさま、リモート生活をいかがお過ごしでしょうか。
会社や大学の内部向けのデータにアクセスするために、今まで以上に踏み台サーバーを使ってポートフォワーディングをしている方が増えているのではないでしょうか。

この記事では、**Secure Pipes**というMac用のアプリと**Proxy SwitchyOmega**というChrome Extensionを導入することで、**4クリック（最小0クリック）**でダイナミックポートフォワーディングによるWebブラウジングを有効化できるようにします。

## Secure Pipesの導入
踏み台サーバーを経由してWebサイトにアクセスする時、ほとんどの人はsshでトンネルを掘っていると思います。

しかし、sshによるポートフォワーディングの面倒な点として、

* ターミナルを開いてコマンドを叩くのが面倒
* スリープすると自動で復帰してくれない（autosshなどもありますが）
* 接続先の切り替えが面倒
* トンネルが繋がっている状態なのか忘れがち

等があると思っています。

**Secure Pipesは、Macのタスクバーに常駐し、メニューから簡単にトンネルのON/OFFを切り替えることのできるアプリです。**

<img width="234" alt="secure_pipes_menu.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103086/3a85c31f-c9aa-9168-8419-3a1f1694b6d6.png">

## 設定方法
1. https://www.opoet.com/pyro/ からSecure Pipesをダウンロードし、インストールして起動します。
2. タスクバーのアイコン->`Preferences`から設定画面を開きます。
3. 現在設定されているプロキシ設定が表示されますが、もちろん最初は空です。左下の「+」ボタンから、「New SOCKS Proxy」をクリックしてコネクションを作成します。
<img width="594" alt="proxy_items.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103086/400543eb-08dc-3a14-9c3e-185e97dee6dc.png">

4. 設定画面が開くので、踏み台サーバーの情報を入力します。localhostのポート番号はもちろん空いているポートなら何でも大丈夫です。
<img width="686" alt="config.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103086/99dc907a-3f45-decf-c4c5-4cdb73438f0a.png">

5. Optionsタブを開き、ssh鍵のロケーションなどを設定します。
<img width="686" alt="options.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103086/1c2ba6f3-583e-9752-88cd-a709539cf9a4.png">

6. Applyボタンを押して設定を保存します。
7. タスクアイコンから、保存した設定でトンネルを開きます。通知が出て、緑色のインジケータが点灯したらOKです。
<img width="234" alt="secure_pipes_menu.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103086/252f88ba-a56c-07f4-6df1-bf12c41dc01c.png">

切断する際はメニューを開いてDisconnectするだけです。

これでターミナルから`ssh -D`でダイナミックポートフォワーディングしているのと同じ状態になります。

Macが一度スリープして接続が切れても、スリープが解除されると自動復帰します。

次にこのトンネルを経由してwebサイトに接続するよう、ChromeにProxy SwitchyOmegaを導入します。

# Proxy SwitchyOmegaの導入
ChromeがSOCKSプロキシを経由して接続するようにProxy SwitchyOmegaを導入します。

## 設定方法
1. Chrome Webストアから、Proxy SwitchyOmegaを追加します。
https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif

2. インストールすると、Chromeのメニューバーの隣にドーナツみたいなアイコンが表示されます。
クリックするとProxy SwitchyOmegaに設定されているプロキシの一覧が表示されます。作成するには「Options」をクリックします。（"secure pipes"等の設定は下のステップで作成したもので、最初は表示されていません）
<img width="189" alt="proxy_config_list.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103086/5672ed74-f42d-49d5-c3df-01157d50e79c.png">

3. 設定画面が開くので、左側のメニューの`New Profile...`から、新しいプロファイルを作成します。

4. 作成したプロファイルに、以下のように設定します。
  * Protocol: SOCKS5
  * Server: localhost
  * Port: 8001（Secure Pipesに設定したもの） 
<img width="1310" alt="switchyomega_config.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103086/acc6ff78-8d7b-8738-60e8-dfd29fa392d7.png">

5. 左側のメニューの`Apply changes`を押して保存します。

6. これで設定が完了しました。ポートフォワーディングで接続したいWebサイトを開き、ドーナツアイコンから作成したプロファイルをオンにします。
<img width="189" alt="proxy_config_list.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103086/14f5dccf-3c33-0c0b-1c11-5d98317748a1.png">

7. ドーナツアイコンが青色になったら、トンネル経由で接続されています。

これでlocalhostの8001ポート、つまりSecure Pipes側でlistenしているポートからトンネルを経由して全てのWebサイトがブラウジングされます。

メニューから`[Direct]`を選択すれば、プロキシを通さない直接接続に戻ります。

## まとめ
Secure PipesとSwitchyOmegaを使って、ChromeからSOCKSプロキシ経由でWebサイトを閲覧する設定を紹介しました。

一度設定しておけば、次回からはタスクトレイのアイコン2クリックとProxy SwitchyOmegaの2クリック、計4クリックによるポートフォワーディングによる接続が可能になります。

Proxy SwitchyOmegaは複数のプロキシを設定したり、ドメインによってプロキシを自動的に切り替えることもできます。

auto switchを上手く設定し、かつSecure Pipesの設定で自動起動と起動時の自動接続を設定すれば、Macの起動時から0クリックで常時お好みのトンネルで接続するような設定もできるでしょう。
（踏み台サーバーに負荷がかからないよう、ご利用は計画的に）