前回の記事
GitHubの認証は突破できたので、あとはVPS側の環境を構築するだけで
24時間稼働するチェスBotシステムを世界に向けて（今のところ自分の中だけですが）発信できるようになります。
今回は、前回投稿したNode.jsの24時間システムよりも一歩踏み込んだ内容になります。初めてPythonも同時に扱う、少しシビアな記事です。
今回のゴール
今回のゴールは、「ブラウザから観戦モードにアクセスできる状態」を作ることです。
役割としては、Python（対局エンジン）とNext.js（観戦画面）、性質の異なる2つのプログラムを同時に動かしていきます。
Tomoya「2つのシステムが協力している」というと少しややこしく感じるかもしれませんが、整理するとシンプルです。
Pythonがエンジンとしてチェスの対局そのものを進め、Next.jsがその情報を受け取って観戦画面として表示する、という役割分担です。
VPSにPythonとStockfishを準備する
sudo apt update
sudo apt install -y python3-venv python3-pip git stockfish
※Pythonの仮想環境（プロジェクトごとにパッケージを分離する仕組み）を作るためのツール・GitHubからコードを取ってくるため・チェスエンジン本体のインストール。
which stockfish ※Stockfishの場所を確認ここでは、Pythonの仮想環境を構築する体験をしました。
これは、システム全体のPython環境を汚さずに、このプロジェクト専用のパッケージ置き場を作るための仕組みです。
以前Node.js編で扱った、プロジェクトごとにnode_modulesフォルダが独立して管理されている状態と近い感覚だと理解できて、以前の経験がそのまま応用できたことに、ちょっとした成長の喜びを感じました。
仮想環境に入っていると、ターミナルの先頭に(venv)という文字がつくので、自分が今どの環境にいるのかが一目でわかります。
Tomoyaこの「今どこにいるかが可視化されている」という点が、地味にありがたいと感じました。
バージョンの不一致などのエラーが出なかったのは、正直ほっとしました。
Stockfish本体のインストールも、AIの提案通りにコマンドを打つだけであっさり完了しました。
GitHubからコードを取得する
前回連携したGitHubのリポジトリから、コードをVPSにclone（コピー）します。
cd ~
git clone GitHubのリポジトリURL VPS_chesscloneのたびに、毎回ユーザー名とトークン（パスワード代わり）の入力が必要になります。
「一度認証を通せば、あとはずっとそのまま使えるだろう」と思っていたので、毎回求められることに少し焦りました。ただ、前回書いた通り、トークンを自分で管理できる場所にきちんと保管していたおかげで、落ち着いて対応できました。
こういう場面があるからこそ、鍵や認証情報を管理できる場所を確保しておくことの大切さを、改めて実感しました。
Python側の仮想環境を作る
STEP1で準備した仮想環境に入り、(venv)という文字が先頭についたことを確認してから、必要なパッケージをインストールしていきます。
cd ~/VPS_chess/vps
python3 -m venv venv ※ venv という名前のPython仮想環境を作成します。
source venv/bin/activate ※ 作成した仮想環境を有効化します。
pip install -r requirements.txt ※ requirements.txt に記載された必要なパッケージをインストールします。
Tomoya先ほども感じた「今、隔離された空間にいる」という感覚を、ここでもう一度実感しました！
少しイメージしづらいかもしれませんが、今回のプロジェクトは、Next.js本体のフォルダの中に、Python専用の仮想環境（venv）を持つvpsというフォルダを内包する形になっています。こうして環境を分けておくことで、それぞれのプログラムが「どのパッケージを使えばいいか分からなくなる」という混乱を避けられる、という意味があります。
Next.js側の準備をする
cloneしただけではまだ足りないファイルを、このVPS環境の中で作っていきます。
Tomoyaまず1つ目が、環境変数.env.localの作成です。
これは「環境変数はGitHubに上げない」というセキュリティのルールのもと、.gitignoreによって意図的に除外していたファイルです。今回のNext.js側でやることは、この除外されていたファイルを、VPS上で改めて作り直して設定することです。
nano .env.local ※VPS nanoエディタを開きます。GEMINI_API_KEY="" ※今後のAIコーチ実装の準備のため
APP_URL="http://サーバーのIPアドレス:3001"2つ目が、必要なパッケージのインストールです。
npm install ※ package.json に記載された依存パッケージをインストールします。
npm run build ※ プロジェクトを本番用にビルドし、配布用ファイルを生成します。npm installは、プロジェクト内の設定ファイルを参照して、そこに書かれているパッケージとバージョンだけをインストールする仕組みです。何でもかんでも自動でインストールされるわけではなく、あらかじめ指定されたものだけが入る、という点は、初めのうちは少し理解しづらく混同しやすいポイントでした。
①「環境変数」は自分専用の秘密の設定をセットするもの。
②「npm install」は必要な部品を揃えるもの、というイメージです。
npm installで扱う中身は膨大な量のファイルになるため、これをGitHubや外部にそのまま送ってしまうと容量や時間を大きく取られてしまいます。
ここを切り離しておくことで、コピーや参照が軽量かつ高速になる、というのがポイントです。
Tomoya最後にnpm run buildを実行し、エラーが出ないことを確認して、ひと安心しました。
pm2で2つのプロセスを同時に常駐化する
ここでは、Next.jsとPython、両方のシステムを、これまでと同じように常駐化し、24時間使える状態に仕上げていきます。
cd ~/VPS_chess/vps
pm2 start engine.py --name chess-engine --interpreter ~/VPS_chess/vps/venv/bin/python3 -- --stockfish /usr/games/stockfish
<< 補足 >>
【--interpreter ~/VPS_chess/vps/venv/bin/python3】※仮想環境のPythonで実行します。
【--】 ※ここから先をengine.pyに渡すための区切りです。
【--stockfish /usr/games/stockfish】 ※ Stockfish本体の場所を指定します。
cd ~/VPS_chess
pm2 start npm --name chess-web -- start -- -p 3001
<< 補足 >>
※ npm startでWebアプリを起動し、PM2上ではchess-webという名前で管理します。ポート3001で待ち受けます。
pm2 list ※ログを確認する
これまで、pm2はNode.js専用のツールだと思い込んでいたので、オプションを追加するだけでPythonにも使えると知った時は、正直驚きました。
思っていたより汎用性があるツールなのだと知り、ますますpm2に興味が湧いてきました。
ここから先は、以前のNode.js編での常駐化作業とほぼ同じ流れで進められたので、多少の「こなれ感」を出しつつも、素直に楽しめている自分に気づきました。
とはいえ、pm2で常駐化を確認できた段階では、まだ実際にブラウザでの表示は確認できていません。何が起こるかわからない、初めての組み合わせに挑む時特有の緊張感がありました。
ポート開放とブラウザでの確認
ファイアウォール（ufw）とパケットフィルターの設定を行います。
sudo ufw allow 3001/tcp ※管理者権限でファイアウォールにPort3001を許可Xserverのパケットフィルターにも、同じく3001番を追加します。
以前Node.js編で開放した3000番は、そのプログラムが今も動いたままの可能性があったので、今回は競合を避けて3001番を選んでいます。
設定が終わり、ブラウザで確認してみます。
http://サーバーのIPアドレス:3001
表示された瞬間は、とても嬉しかったです。
しかし——表示されたのは良かったものの、何かがおかしい……。
まとめ・次回予告
Tomoya今回は、ローカルで作ったものが、無事にVPS上で動いたところまでを記事にしました！
しかし次の記事では、表示された観戦システムに、一目見て気づくほどの問題が発生していたことが判明します。
ここから、AIと自分との「修正物語」が始まっていきます。
以下のリンクから始めると、初回1か月分が割引価格でCursorを利用できます。1か月使ってみて合わなければ、すぐに解約できる気軽さも魅力だと感じています。
前回の記事はこちらから
VPSを使った24時間稼働システムを作成した記事はこちら
コメント