【初心者向け】Dockerでselenium・streamlit環境の構築方法を具体例を使って解説します

root
 ├── requirements.txt  # インストールするパッケージを記載
 └── docker-compose.yml
 └── sample-streamlit
     └── Dockerfile
     └── streamlit-app
         └── app.py

version: '3'
services:
  selenium:
    container_name: selenium-chrome
    image: selenium/standalone-chrome-debug:3.141.59-20210929
    ports:
      - 4444:4444
      - 5900:5900
    shm_size: "2gb"
  sample-streamlit:
    container_name: sample-streamlit-server
    build:
      context: .
      dockerfile: ./sample-streamlit/Dockerfile
    ports:
      - 8501:8501
    image: sample-streamlit:1.0
    tty: true

# ベースイメージ
FROM python:3.8

# 環境変数を設定
ENV PYTHONIOENCODING utf-8

# app/ディレクトリを作成
WORKDIR /app

# パッケージをインストールする準備
RUN apt update
RUN apt install -y
RUN apt install -y python3-pip
RUN pip install --upgrade pip

# requirements.txtをコンテナ側にコピー
COPY requirements.txt .

# requirements.txtに記載されたパッケージをインストールする
RUN python3.8 -m pip install -r requirements.txt

# ローカル側のstreamlit-appディレクトリ配下にあるファイルをコンテナ側のappディレクトリにコピー
COPY ./sample-streamlit/streamlit-app/ /app

streamlit
webdriver-manager
selenium

# coding:utf-8

# 必要なパッケージのインストール
from selenium import webdriver
from selenium.webdriver import ChromeOptions, Chrome
from selenium.webdriver import Chrome
from selenium.webdriver import ChromeOptions
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By
import streamlit as st
import os
import sys
import pickle

# pathの設定(スクレイピングしてきたデータを保存するディレクトリpathを取得)
FILE_PATH_FIT_DATA = '/'.join(os.path.abspath(__file__).split('/')[:-1])
sys.path.append(FILE_PATH_FIT_DATA)


def load_pickle(file_path, file_name):
    """
    pickleファイルをloadする関数
    """
    with open("{}/{}".format(file_path, file_name), 'rb') as f:
        return pickle.load(f)


def save_pickle(file_path, file_name, var_name):
    """
    pickleファイルをsaveする関数
    """
    with open("{}/{}".format(file_path, file_name), 'wb') as f:
        pickle.dump(var_name, f)


def main():

    # "is_horse_name_view"のkeyが存在しない場合に実行する(=1度しか実行されない)
    # st.sessionstateに格納する変数は再読み込みされても保持される
    if "is_horse_name_view" not in st.session_state:
        st.session_state["is_horse_name_view"] = None

    # ボタンを押すとスクレイピングを開始する
    press_button = st.button("スクレイピング開始")

    # ボタンが押されたときに実行される
    if press_button:

        # スクレイピングした馬名を表示する信号をONにする
        st.session_state["is_horse_name_view"] = True

        # スクレイピングをするためのoptionsを設定(今回は特に設定はなし)
        options = ChromeOptions()

        # ドライバーを作成
        driver = webdriver.Remote(command_executor="http://selenium:4444/wd/hub", options=options)

        # サイトに接続
        url = "https://race.netkeiba.com/race/result.html?race_id=202206040401&rf=race_list"
        driver.get(url)

        # サイトの馬名が記載されている element を取得する
        horse_name_class_list = driver.find_elements(By.CLASS_NAME, "Horse_Name")

        # 馬名を抽出してlistに格納する
        horse_name_list = [horse_name.text for horse_name in horse_name_class_list]

        # 取得した馬名を格納したlistをpickleファイル形式で保存
        save_pickle(FILE_PATH_FIT_DATA, "horse_name_list.pickle", horse_name_list)

        # ブラウザを閉じる
        driver.close()

    # st.session_stateを定義しておくことでページが更新されても
    # スクレイピング開始ボタンが押されない限り馬名のradioは表示され続ける
    if st.session_state["is_horse_name_view"]:
        # 上で保存した馬名listを読み込む
        horse_name_list = load_pickle(FILE_PATH_FIT_DATA, "horse_name_list.pickle")
        # 取得した馬名をradioで表示する
        st.radio('出場する馬の一覧', (horse_name_list))


if __name__ == '__main__':
    main()

driver = webdriver.Chrome(ChromeDriverManager().install(), options=options)

driver = webdriver.Remote(command_executor="http://selenium:4444/wd/hub", options=options)

$ pwd  # 現在のディレクトリの確認
(実行結果)
/Users/username/root  # rootディレクトリにいることを確認

$ docker-compose build
(実行結果)
略（いろいろインストールしてるよーって表示される）

$ docker-compose up -d
(実行結果)
 ⠿ Container sample-streamlit-server  Started
 ⠿ Container selenium-chrome          Started

REPOSITORY                         TAG                 IMAGE ID       CREATED         SIZE
sample-streamlit                   1.0                 e31b70e88d56   3 minutes ago   1.43GB
selenium/standalone-chrome-debug   3.141.59-20210929   aaf43463c572   12 months ago   1.11GB

CONTAINER ID   IMAGE                                                COMMAND                  CREATED         STATUS         PORTS                                            NAMES
2319cddf970c   selenium/standalone-chrome-debug:3.141.59-20210929   "/opt/bin/entry_poin…"   3 minutes ago   Up 3 minutes   0.0.0.0:4444->4444/tcp, 0.0.0.0:5900->5900/tcp   selenium-chrome
da6c20a2ba64   sample-streamlit:1.0                                 "python3"                3 minutes ago   Up 3 minutes   0.0.0.0:8501->8501/tcp                           sample-streamlit-server

$ docker-compose exec sample-streamlit bash

(使い方)
docker-compose exec [イメージ名] bash

(実行結果)
root@da6c20a2ba64:/app#　←ターミナルの表記が切り替わるとコンテナの中に入ったことがわかる

root@da6c20a2ba64:/app streamlit run app.py

(使い方)
streamlit run [ファイル名]　→　ファイル名で指定したファイルがstreamlit上で実行される

(実行結果)
You can now view your Streamlit app in your browser.

  Network URL: http://172.18.0.2:8501
  External URL: http://58.183.119.78:8501

$ docker stop selenium-chrome
(実行結果)
selenium-chrome

$ docker stop sample-streamlit-server
(実行結果)
sample-streamlit-server

# コンテナ停止・削除
$ docker-compose down

# コンテナを削除
$ docker rm [コンテナ名]  # コンテナ名を指定してコンテナを削除
(実行結果)
[コンテナ名]

# イメージを削除
# docker rmi [イメージ名]  # イメージ名を指定してイメージを削除
(実行結果)
[イメージ名]