スクレイピングに広告ブロック導入してみた

#概要
![selenium-adguard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/fffd03ae-cf9b-2edf-be73-533072e4b240.png)
まぁ、こんな感じです（多分）
今回のmyPCはM1Macを使用します

#なんでこんなの作ったの？
Seleniumでスクレイピングする際に広告が鬱陶しかったので広告ブロックをしようと思いました。
docker-composeの設定ファイルでDNSを設定するだけで良かったんですが、
せっかくなら **AdGuardHomeを使用してブロックするものまで編集できたり、ログが取れるようにしちゃえばいいんじゃね？！**なんてことを考えたのでせっかくなら記事に書いちゃおうというかんじ。。。w
思い立ったら実現するなんてまさにエンジニア！！（違）

#ファイル
<details><summary>tree AdGuard設定前</summary><div>

```
.
└── docker-compose.yml
```
</div></details>

<details><summary>tree AdGuard設定後</summary><div>

```
.
├── adguardhome
│   ├── conf
│   │   └── AdGuardHome.yaml
│   └── work
│       └── data
│           ├── filters
│           ├── querylog.json
│           ├── sessions.db
│           └── stats.db
└── docker-compose.yml
```
</div></details>

<details><summary>docker-compose.yml</summary><div>

``` yml:docker-compose.yml
version: "3"
services:
  app:
    image: python:3.10-slim
    tty: true
    depends_on:
      - selenium
      - adguard
    networks:
      myNet:
        ipv4_address: 172.10.0.4
  selenium:
    # M1Macなのでseleniarm用
    image: seleniarm/standalone-firefox:4.0.0-20211213
    ports:
      # 外部からリモート接続するなら公開
      # - 4444:4444
      # VNCポート
      - 5900:5900
    shm_size: "2gb"
    depends_on:
      - adguard
    networks:
      myNet:
        ipv4_address: 172.10.0.3
    dns:
      - 172.10.0.2
  adguard:
    image: adguard/adguardhome:latest
    ports:
      # 公開ポートにする必要はないのでコメントアウト
      # - "53:53/tcp"
      # - "53:53/udp"
      - "80:80/tcp" #初期設定後の管理者ページ
      - "3000:3000/tcp" #初期設定に使用
    volumes:
      - ./adguardhome/work:/opt/adguardhome/work
      - ./adguardhome/conf:/opt/adguardhome/conf
    restart: always
    networks:
      myNet:
        ipv4_address: 172.10.0.2
networks:
  myNet:
    driver: bridge
    driver_opts:
      com.docker.network.bridge.enable_ip_masquerade: "true"
      com.docker.network.bridge.host_binding_ipv4: "0.0.0.0"
      com.docker.network.bridge.name: "docker1"
    ipam:
      config:
        - subnet: 172.10.0.0/29

```
</div></details>

あとは必要に応じてスクレイピング用のディレクトリとファイルの作成、`tty:true`を外して`command: python script.py`等を仕込んでください。
先にAdGuardHomeの設定をするのでひとまずは上記の内容をコピペでいいと思います。

#設定に取り掛かる
##コンテナの起動

```shell-session
$ docker compose up -d
[+] Running 4/4
 ⠿ Network proj_myNet         Created                                0.1s
 ⠿ Container proj-adguard-1   Started                                0.8s
 ⠿ Container proj-selenium-1  Started                                1.9s
 ⠿ Container proj-app-1       Started 
```

##コンテナ内に接続
今回はPythonコンテナから試しにseleniumを起動、
VNC ViewerからAdguardを設定するのでappコンテナに接続します
ローカルで接続する場合は不要ですが、そのまま動作確認を行うのでVNCから確認する方がおすすめ

```shell-session
$ docker compose exec app sh
```

python3-pipのアップグレードとseleniumのインストールを実施
（一気にやっていいものかはわからないけど...）
インストール終わったらpythonを対話モードで起動

```shell-session
# python -m pip install --upgrade pip selenium
# python
```

```python
from selenium.webdriver import Remote, ChromeOptions, Chrome
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
driver = Remote(command_executor="http://selenium:4444",desired_capabilities=DesiredCapabilities.FIREFOX.copy())
```

これでVNC Viewerで確認するとFireFoxブラウザが起動しているはず

##AdGuardHomeの初期設定
<details><summary>VNCから接続している人向け</summary><div>

pythonの対話モードで下記を実行すればVNC Viewerで開くことが確認できるはずです

```python
driver.get("http://adguard")
driver.switch_to.new_window("tab")
driver.get("http://adguard:3000")
```
</div></details>

<details><summary>ローカルから接続する人向け</summary><div>

ブラウザを起動し、

- http://localhost
- http://localhost:3000

の二つを開きます

</div></details>


上記のどちらかから対象のページを開きます
ポート指定がないURL（１つ目のタブ）は最初はアクセスできないはずです。
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 17.59.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/a88a0a8b-f08a-e89d-ed67-a6275de39b65.png)
</div></details>


もう一つの3000ポートでアクセスしたURLにはこのような画面が設定されていると思うので進めていきましょう。
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 17.59.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/cbe6e2cc-3d92-e5cb-4c56-fee2093464a5.png)
</div></details>

VNCからアクセスしている人は英語になっているかもしれないので日本語設定に変更しておきましょう
<details><summary>言語の変更設定</summary><div>
画面右下のEnglishをクリック、プルダウンから読める言語を選択しましょう。
![スクリーンショット 2021-12-19 17.59.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/ca1b5fe7-5551-5df2-d52a-bd3b5530b48f.png)
![スクリーンショット 2021-12-19 17.59.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/168fb9cb-b844-ae47-2375-ebcd6a06c12a.png)

</div></details>

GetStartedを押して次の画面へ。
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 17.59.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/22ad7be6-0a64-1d7b-f003-0b7e159e5ae1.png)
</div></details>

中央のDNSサーバーの待ち受けインターフェイスだけ変更しておきましょう
docker-compose.ymlのnetworksを弄っていなければ`172.10.0.2`を選択すればOKです
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 17.59.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/d7e9288c-4a79-53cf-f2ad-1748a691f5d0.png)
</div></details>

変更したら次へを選択
アカウントを作成するので自由に作成してください
今回は例としてありがちな**ダメなやつ**でやります（どのみちグローバルに開放しませんけどね）
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.00.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/af3041de-7c32-b1f8-43b3-6c3be06c67e6.png)
</div></details>

アカウント・パスワードは覚えておいてください、
管理者ページに入るときに使います。
メモったら次へを選択

右下に接続に成功しましたとトーストが出てきたらOK
そのままスクロールして次へを選択しましょう。
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.00.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/f6d0ea6f-3392-f1b7-ef81-bab6ce9e6129.png)

![スクリーンショット 2021-12-19 18.00.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/a0cd6ee6-2636-3924-f005-5acbebead23a.png)
</div></details>


はい、設定が完了したようです。
http://adguard か　http://localhost のタブに戻りましょう。
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.00.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/df134a69-1f4e-840f-aaf7-14230a7b0efc.png)
</div></details>

## 管理画面へ接続

ページを更新します。
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.00.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/a0180d24-0405-920f-1ef9-d19b1905a95b.png)
</div></details>

先ほど作ったアカウントでログインします
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.00.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/7874b472-205c-6fd5-dc27-b4cefd0ce596.png)
![スクリーンショット 2021-12-19 18.00.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/e759136f-0e56-6299-e445-722fe8d5a1ee.png)

</div></details>

ログインできたらこんな画面になるヨー
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.00.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/475bc841-4876-3c00-86af-89563d7aea4b.png)
</div></details>

## Let's Try(失敗します)
新しいタブで[qiita](https://qiita.com)を開いてみましょう

<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.00.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/32621408-e2e3-16ef-e15d-256bcae5efc6.png)

</div></details>

おや？。。。おかしいなぁ...

AdGuardHomeのDNSの設定を確認してみましょう
設定タブ → DNS設定
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.01.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/cd78af42-7999-15b3-2b68-206a2ba7a0e2.png)

</div></details>

上流DNSサーバで登録されているサーバーに問い合わせされるようですが
うまくいってないのかな？
ちょっとスクロールすると「上流サーバをテストする」のボタンがあるので押してみましょう
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.01.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/18c587f1-6952-d567-3813-8ac32e6e405f.png)
</div></details>

うん、よくわからんけどうまくいってなさそうなのはわかる！！
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.01.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/7bcb5804-6946-66fe-ef23-2330ea75902e.png)

</div></details>

## 設定を変更して再トライ（成功する）

ってことでDNSサーバの変更をしましょう

既知のDNSプロバイダの一覧のリンクをクリックして確認しましょう。
今回はAdGuardDNSのdefaultを使用します
[Known DNS Providers \| AdGuard Knowledgebase](https://kb.adguard.com/en/general/dns-providers#adguard-dns)

元々のURLは#でコメントアウトできるのでコメントアウト、
AdGuardDNSのIPv4の`94.140.14.14`を追加します

<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.02.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/1d826caf-5bb6-8a39-c485-870997b726ba.png)

</div></details>

もう一回、「上流サーバをテストする」で再チャレンジ!

うまくいったようです、適用するで更新しておきましょう。
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.02.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/30f8a73b-ff28-45f6-7f0a-40f3ce9f9407.png)
![スクリーンショット 2021-12-19 18.02.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/772583dd-e05e-bd0c-55e8-b72a04935677.png)

</div></details>

ダッシュボードに戻ってみると既に通信された模様（Selenium上で操作しているのでそれはそうか）
トップクライアントが今回Seleniumコンテナに設定しているIPv4と一致しているので正しく動作してそうですね。

<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.02.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/988e6dc9-4533-43da-d5b9-7f23a77265a2.png)
</div></details>

Qiitaページをリロードして確認してみましょう。
ちゃんと表示されるはずです
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.02.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/319c9089-6d06-1f75-689f-e2977bade393.png)

</div></details>

ダッシュボードに戻って統計データを最新にするボタンを押して更新してみましょう。
リクエスト数が増加していることが確認できるはず
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.02.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/493072ef-589e-0ed0-2300-9e85cc2d39aa.png)
![スクリーンショット 2021-12-19 18.03.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/04bd1d0f-fea8-331d-adf2-691e0b8471f9.png)

</div></details>

ついでに適当なページを確認してみましょう
右ペインの広告がなくなっているはずです
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.03.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/b3b46717-8d04-972c-fdf0-b13683984746.png)

</div></details>

#まとめの前に
## 忘れてたけどDNSブロックリストを登録してた方がいいかも

フィルタ　→ DNSリストへ移動
AdGuard DNS filterのチェックボックスにチェックを入れて、アップデートを確認するからアップデートしましょう
ルール数や最終更新時刻が変更されているはずです。

<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.06.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/b4b3d9f7-339f-7293-1985-a65d29d2f14d.png)

</div></details>

# まとめ
「まとめの前に」のDNSブロックリストを登録しないで、今回広告ブロックされたのはAdGuardのDNSを使ったから。。。
DNSブロックリストを変更した上で上流DNSサーバを(Google: 8.8.8.8とか)変更しても広告ブロックされました

:::note warn
ブロックリストを登録しないのであればAdGuardHomeを使用するより、docker-compose.ymlのseleniumコンテナのDNSに直接好きなDNSを登録する方が早いですね（ログは確認できなくなりますが）
:::

DNSブロックリストを登録しておくことで好きなアドレスからの広告ブロックも効きますし、
逆に表示しておきたい広告を許可することも可能です。
今回書いてませんが、ブロックするサービスからTwitterやYoutube等をブロックすることも可能なので、
スクレイピングの際の読み込み時間の短縮にも繋がりそうです。


# おまけ


## クライアント登録
今後使っていくと思われるのでSeleniumのIPアドレスを登録しておきましょう
設定 → クライアント設定
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.04.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/1e3bbf82-086b-20a5-6f38-75d9384b570a.png)

</div></details>

クライアント　のクライアントを追加するボタンを押して追加しましょう。
設定内容はこんな感じ
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.05.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/e2cc5673-d32e-ef52-b2c5-848575732e46.png)

</div></details>

登録するとこんな感じでそのIPからのリクエスト数が確認できます
複数建てる場合はこんな感じで設定しておくとどのサーバーでどの程度実行できるのかも確認できますね。
<details open><summary>画像</summary><div>
![スクリーンショット 2021-12-19 18.05.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/74e22334-dccc-088b-9a97-c12b8137dacc.png)

</div></details>