XServerにPython環境を構築! JavaScriptでリクエストしてみる

今回はXServerにPythonで作ったアプリを実装する方法を解説します。

XServerとは何ですか？

XServer（エックスサーバー）は多くのユーザーから高い評価を得ている日本で人気の高いレンタルサーバーサービスで、国内No.1と言われるサーバー速度を誇り、大量アクセスにも非常に強い構成や豊富な機能、高いコストパフォーマンスが人気の要因となっています。

XServerではPythonは使えないのですか？

XServerレンタルサーバーでは、Pythonのバージョン 2.7.x / 3.4.x / 3.6.xを使うことができますが、管理者権限がないためrootアクセスができず、pipを使って必要なパッケージをインストールすることができません。

　もちろん、仮想専用サーバーのXServerVPS（Virtual Private Server）を使用すれば、専用サーバーのように環境構築を自由にカスタマイズできますが、ここでは、XServerレンタルサーバーにおいてパッケージをインストールしてアプリを構築する方法を解説します。

rootアクセスできない環境でモジュールをインストールしてアプリを構築するということですか？

そうです。今回は環境構築を重点において確認しましょう。

レンタルサーバー高速・高機能・高安定性の【エックスサーバー】

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99％以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。月額990円(税込)から利用可能。まずは無料お試し10日間。

　ここではXserverに申し込みを済ませたとして話を進めていきます。

XServerに接続する通信方法

　XServerにアクセスしてサーバー内を操作、設定するためにはSSHを用いて通信を行う必要があります。SSH（Secure Shell）とは、ネットワーク上で安全に他のコンピュータに接続するためのプロトコルで、主にリモートサーバー管理や安全なデータ通信に利用されます。SSHはデータを暗号化し、第三者による盗聴や改ざんを防ぎます。

　また、パスワードや公開鍵を使った認証により、不正アクセスを防止します。リモートコマンド実行やファイル転送（SCPやSFTP）、ポートフォワーディングを通じて、安全な通信経路を確保します。

　SSHはUNIX系オペレーティングシステムで標準的に利用され、多くのサーバー管理者や開発者にとって重要なツールです。使いやすく、強力なセキュリティを提供するため、リモート管理やネットワークセキュリティの分野で広く採用されています。

XServer側のSSH接続設定

　Xserverのサーバー管理画面に入って設定を進めます。
「SSH設定」をクリック！

　次の画面で設定をONにして、「設定する」のボタンを押して変更を反映させます。
　その後に「公開鍵認証用鍵ペアの生成」を選択。

　パスフレーズ入力して「確認画面へ進む」へクリックします。

　生成するボタンを押すと自動的に秘密鍵ファイル（サーバーID.key）のダウンロードが始まります。パスフレーズは忘れず保管して下さい。

SSHディレクトリの作成

　まず、基本的には多くのオペレーティングシステムでSSHクライアントはデフォルトでインストールされておりますが一応確認します。

コマンドはGit Bashでの例

$ ssh -V

OpenSSH_9.5p1, OpenSSL 3.1.4 24 Oct 2023

　次にホームディレクトリ配下に「.ssh」ディレクトリを作成し、ダウンロードした秘密鍵ファイルを移動させます。

作成するディレクトリに移動

$ cd /c/Users/user

　ディレクトリの作成

$ mkdir ~/.ssh

　ファイルを移動させる。デフォルトではサーバーIDになっています。変更は可能です。

$ mv ~/Downloads/サーバーID.key ~/.ssh/

パーミッションを変更する

　パーミッションとはファイルやディレクトリに対してどのユーザーがどのような操作を行えるかを決定するアクセス権限で、作成した「.ssh」ディレクトリにおいて、所有者のみが全ての操作（読み取り r、書き込み w、実行 x）を行うことができ、他のユーザーやグループは全くアクセスできなくなるように、パーミッションを700に設定します。

$ chmod 700 ~/.ssh

　秘密鍵ファイルのパーミッションもグループやその他のユーザーに対しては、アクセス権限を一切与えない600に設定して、秘密鍵の内容が漏洩しないよう厳重に管理します。

UNIX系システムとWindowsのファイルアクセス権限について

UNIX系システムでは、秘密鍵ファイルのパーミッションを厳格に設定することで、他のユーザーからの不正アクセスを防ぐ必要があります。これにはchmodコマンドを使用し、適切なアクセス権限を設定することが一般的です。
Windowsでは、ファイルやフォルダーのアクセス権限はACL（アクセス制御リスト）によって管理されます。管理者権限がない限り、他のユーザーのファイルにアクセスすることはできないため、chmodコマンドを実行する必要はありません。Windowsのセキュリティ機能により、他のユーザーがファイルやフォルダにアクセスすることは基本的に制限されています。
　そもそも、Windowsのファイルシステム（NTFSやFAT32）では、chmodコマンドは機能しないことがあります。Git Bashや他のUNIXエミュレーション環境（CygwinやWSLなど）を使ってchmodコマンドを実行すると、一見変更が成功したように見えることがありますが、実際にはファイルシステムに適用されないことがあるため注意が必要です。

SSHに接続する

　まず最初にサーバーの管理画面でサーバーIDとサーバー番号を確認しておきます。

　そしてmacOSやGit BashなどのUNIX系環境においては下記のコマンドを実行します。Windowsでも下記のコマンドで実行できますが、ファイルパスの形式が異なりますので注意してください。

$ ssh -p 10022 -i ~/.ssh/{サーバーID}.key {サーバーID}@{サーバー番号}.xserver.jp

　下記のメッセージが出ますので、「yes」と入力します。

Are you sure you want to continue connecting (yes/no/[fingerprint])?

　このメッセージは、SSHクライアントが接続しようとしているサーバーのホストキーを信頼するかどうかを確認しています。これは、SSHクライアントがサーバーのホストキーを初めて受け取る場合や、既存のホストキーが変更された場合に表示されます。このホストキーは~/.ssh/known_hostsファイルに保存され、次回以降の接続時に比較されます。

Enter passphrase for key '[サーバーID].key': ********

　秘密鍵を作成したときに設定したパスフレーズを入力します。

　また、環境変数を使っても問題なく接続できます。下記はWindowsでの例です。

ssh -p 10022 -i $env:USERPROFILE\.ssh\{サーバーID}.key {サーバーID}@{サーバー番号}.xserver.jp

　こちらも同じくパスフレーズの確認を求められますので同様に入力して下さい。

[サーバーID@サーバー番号 ~]$

　これでXServerに接続することができました。
　ちなみにログアウトするにはexitコマンドでSSH通信から抜けることが出来ます。

Xserverの管理機能

　Xserverサーバーパネルでログインして、「ファイル管理」➡「ファイルマネージャ」で、サーバー内の編集や削除などの一般的なファイル操作、パーミッションの変更などはブラウザ画面で行うことができます。簡単な管理程度であれば、この機能で十分済みそうです。

configファイルの編集

　SSHのconfigファイルを「.ssh」ディレクトリ内に作成することで、接続先サーバーに関する設定を簡素化し、コマンドを短くすることができます。

Host {任意のホスト名}
    HostName {サーバー番号}.xserver.jp
    User {サーバーID}
    Port 10022
    IdentityFile ~/.ssh/{サーバーID}.key

　もし、任意のホスト名が myserver だったら下記のコマンドでSSH接続することができます。

$ ssh myserver

もしエラーになった場合

　SSH接続するときに繋がらないトラブルは結構あります。サーバーIDやサーバー番号、ポート番号の入力間違いから始まって、サーバー側、ネットワークの問題まで原因はさまざまです。もしエラーが起きた際に、原因究明のため下記のコマンドを打つことによって、どのステップで問題が起きているかのデバック情報をターミナルに表示させることができます。

ssh -vvv {サーバー番号}@{サーバー番号}.xserver.jp -p 10022

Pythonの準備

　前述までにSSHに接続することができたら、いよいよサーバー内での作業を進めていきます。
　始めにも書いたとおりXserverレンタルサーバーでは追加でモジュールがインストールできないので、Python環境の包括的なパッケージ管理のできる Anaconda もしくは Miniconda を使ってPython環境を整えていきます。

Anaconda Miniconda とは

　Anaconda は、データサイエンスや機械学習のためのオープンソースのプラットフォームで、Python と R のプログラミング言語をサポートします。多くの科学計算やデータ解析用のパッケージが含まれており、環境管理ツールである conda を使用して簡単にパッケージのインストールや依存関係の管理が行えます。Anaconda は、特に大規模なデータ処理や複雑なプロジェクトに適した統合的なツールです。

　Miniconda は、最小限のPython環境を提供するオープンソースのプラットフォームで、Anacondaの軽量版です。基本的なPythonインストーラーと Anaconda 同様 conda が含まれており、ユーザーが必要なパッケージを追加でインストールすることができます。これにより、リソースを節約しつつ、必要に応じてカスタマイズした環境を構築できます。

　今回は必要最小限の環境構築のため、 Miniconda を使用していきます。　

　SSH接続をしたら、ユーザーのホームディレクトリにおいて、下記のコマンドを打ち Miniconda をダウンロードします。

$ wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh

　Minicondaが保存されたら、下記のコマンドで、Miniconda をインストールします。途中で入力を求められた場合は、「yes」を入力して進めて下さい。

$ bash Miniconda3-latest-Linux-x86_64.sh

　次に、Miniconda をインストールすることができたら、.bashrcを有効化する必要があります。
　これは、Miniconda のインストールプロセスでは、通常、環境設定を.bashrcファイルに追加して、Miniconda のバイナリディレクトリをPATH環境変数に追加するための設定が含まれることが多いからで、Miniconda のコマンドがシステムのPATHに追加されると、どのディレクトリからでも conda コマンドや Python が使えるようになります。

　.bashrcファイルの有効化

$ source .bashrc

実行環境の確認

　コマンドラインのプロンプトに（base）と表示されることで、現在base環境がアクティブであることが示されます。Miniconda または Anaconda をインストールした際にデフォルトで作成される仮想環境の名前で、この環境は、基本的なパッケージが最初からインストールされており、特別な設定なしですぐに使用できる状態になっています。

(base) [サーバーID@サーバー番号 ~]$

　conda 及び Python のバージョンを確認します。

$ conda --version

$ python --version

　バージョンが表示されれば、Pythonを使う準備が整いました。

　ただ、このままでも pip を使用してプログラムを作成することは可能ですが、やはり、依存関係の競合を避けるため、プロジェクトごとに異なるパッケージのバージョンを管理する専用の仮想環境を作成する方が推奨されます。

仮想環境の構築

　仮想環境を作成するには下記のコマンドを入力します。nameには任意の名前を付けて下さい。
　Pythonのバージョンを指定しないとデフォルトのバージョンになってしまいます。

$ conda create --name myenv python=3.12

　仮想環境の有効化

$ conda activate myenv

　仮想環境が有効化されると仮想環境名が表示されるようになります。

(myenv) [サーバーID@サーバー番号 ~]$

　仮想環境を抜けるには

$ conda deactivate

　これで仮想環境を構築することができました。

アプリケーションの構築

　Pythonで実際に動くアプリケーションを構築するため、Pythonで作られた軽量なWebフレームワークのFlaskを使用します。Flaskはシンプルで使いやすい設計が特徴で、小規模から中規模のWebアプリケーションを素早く構築するのに適しています。
　すでにMinicondaがインストールできているので、pip か conda を使ってFlaskをインストールします。どちらでも使用可能です。

$ conda install Flask

$ python -m pip install Flask

　Flaskのインストールができたら、実際にファイルを作成するディレクトリpublic_htmlに移動して、下記の構成でファイル、ディレクトリを作成します。

FastCGIの使用

　FastCGI（Fast Common Gateway Interface）とは、Webサーバーとアプリケーションサーバー間の通信を効率化するためのプロトコルです。従来のCGI（Common Gateway Interface）の欠点を改善し、Webアプリケーションのパフォーマンスを向上させることを目的としています。

　そして、このFastCGIをFlaskアプリケーションに適用することで、FlaskのようなWSGIベースのPythonアプリケーションを、Webサーバー（ApacheやNginx）と効率的に連携させることができます。

　XserverはこのFastCGIをサポートしていますので、FastCGIで動作するのに必要なflupモジュールをインストールして実行環境を構築していきます。flupは、Pythonで書かれたモジュールの一つで、WebアプリケーションをFastCGI、SCGI、またはAJPプロトコルを通じてWebサーバーと接続するためのインターフェースを提供します。これは特に、ApacheやNginxのようなWebサーバーでPythonアプリケーションをデプロイする際に使用されることが多いです。

$ python -m pip install flup

.htaccessファイルの設定

　.htaccessファイルは、Apacheサーバーで特定のフォルダの設定を調整するためのファイルで、これを使うと、サーバー全体の設定ファイルに触れずに、特定のフォルダだけでリダイレクトやアクセス制限などの設定を変更できます。簡単に言えば、特定のディレクトリの動作を細かくカスタマイズできるツールです。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ /flask_app/index.fcgi/$1 [L]
</IfModule>

　この設定により、リクエストされたファイルが存在しない場合、全てのリクエストがFlaskアプリケーションに自動転送されるようになります。

fcgiファイルの作成

　fcgiファイルは、FastCGIプロトコルを使用してWebサーバーとアプリケーションサーバーとの間でリクエストをやり取りするスクリプトファイルです。fcgiファイルによって、Webサーバーからのリクエストを受け取り、バックエンドのアプリケーション（例えば、Python、PHPなど）を起動させることができます。

　どこにあるPythonが動いているのか事前に確認しておきます。

$ which python

~/miniconda3/envs/myenv/bin/python

　fcgiファイルの作成

#! /home/サーバーID/miniconda3/envs/myenv/bin/python
from flup.server.fcgi import WSGIServer
from main import app

if __name__ == '__main__':
    WSGIServer(app).run()

Pythonファイルの作成

　flask_appディレクトリ内でtemplatesフォルダを作成してその中にindex.htmlファイルを作成します。
　そして、main.pyに下記のコードを記述します。

from flask import Flask, jsonify, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/hello', methods=['GET'])
def hello_world():
    return jsonify(message='Hello, JavaScript!')

　index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask & JavaScript Example</title>
</head>
<body>
    <h1>Flask & JavaScript Example</h1>
    <button id="myButton">Click me!</button>
    <p id="message"></p>

    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            fetch('/hello')
                .then(response => response.json())
                .then(data => document.getElementById('message').innerText = data.message)
                .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

　fetchメソッドを使ってサーバーからデータを取得し、取得したデータをHTMLの要素に表示する処理を行います。
　ここでのサーバーからのデータとはPythonのflaskで記述した message=’Hello, JavaScript!’の部分になります。

　URLにアクセスして画面がでたら「Click me!」をクリック!