Webアプリを作ろう！（XserverでPython・Flaskアプリを動かす方法 ①環境導入編）

2024年10月21日2024年12月5日

はじめに

プログラミングとかサーバーとかよくわからないけど、
Webアプリ、なんとなく作ってみたいな～
とか、
スタンドアロンのプログラムをPythonで作ってみたけどWebアプリにもしてみたいな～
と思ったら。。

さて、どうしたものかと。

プロのプログラマーとかweb関係の仕事をしてるわけでもない自分としては、１つ１つの手順がまったくわかりませんでした。

とはいえ、
するべきことは大したことではないはずで、

①webアプリケーション（Python・Flaskアプリ)を用意して、
②それをサーバーにアップして実働するようにすることです。

①に関しては、また別にまとめるとして、
今回はwebアプリとしてローカルで実働するwebプログラムが完成したところからのお話です。

（app.py とtemplatesフォルダのindex.htmlを作って、127.0.0.1:5000で実働が確認された状態です。

なんのこっちゃ？っていう人にはあまり関係のないことで、為になるお話ではないかもしれません。）

②のPythonのWebアプリをサーバーにアップして実働させる方法についてになります。

自分はXserverを使っているので、その方法を覚書として残します。

他のレンタルサーバーで出来ること出来ない事があるかと思うのでそれはご確認を。

単純なプログラムでも、実際にWebサーバーにアップしたら不具合がでることが多いです。

フロントエンドとバックエンドでの関数呼び出しパスや参照パスの問題が多いかと思いますが、それもまたの機会で。
（自分はそもそもフロントエンドとかバックエンドとか、なにそれ？って感じでしたが、もし同じような方がいらしたら、なんとかなるのでご安心を。）

XserverにPythonを導入して、XserverでPython・Flaskアプリを動かす方法の覚書の環境導入編になります。

リンク

XserverにPython環境を構築する

１）SSHによるXserverへの接続の設定・SFTPソフト入手

まずはXserverに自分のパソコンからあれこれできるようにするための準備になります。

したいことは、XserverでPythonが使えるようにすることです。
（そのままではユーザーはPythonを使えませんし、Pythonプログラムを起動できません。）
そのための用意になります。

SFTPクライアントはWindowsではWinSCPが使いやすいようなかんじです。
Macの場合は何かよいSFTPクライアントをインストールしてください。

ググって窓の社で無料版をダウンロード・インストールです。

が、一応
（窓の社）はこちら↓

他にもSFTP対応のクライアントはいろいろあるのでお好みでどうぞ。

２）XserverのSSH接続で必要な情報の確認

a) ログイン→サーバーパネル→SSH設定

サーバーIDとサーバー番号は黄色部分で確認（後から必要になる）
赤色のSSH設定にすすむ

　状態をONにする（国内からだけにしてつながらないときはすべてのアクセスを許可にかえる）

b)公開鍵認証用鍵ペアの生成をおこなう
パスフレーズを任意ですきなやつを入力→確認して保存
このパスフレーズはあとで何度も使うので忘れないように！

わすれたら再度鍵生成からやりなおし。
（Xserverで生成したら自動で公開鍵が更新されるようす。公開鍵登録。更新画面で登録済み公開鍵を表示をおして確認画面にすすみ登録・更新してもOK）

鍵は[サーバーID].keyというファイルでダウンロードされているはず。これはしっかり管理しよう。なくすと再度1-bの鍵生成からやりなおし。

３）WinSCPによるSSH接続・SFTP

《SSH接続に必要な情報》
転送プロトコルはSFTPで

接続先のホスト名
サーバーID.xsrv.jp
または サーバー番号.xserver.jp
サーバー名とサーバー番号を間違わないように
（上のXserverのサーバーパネルで確認できる）

ポート番号
Xserverは10022を使用している

ユーザー名はサーバーIDで

パスワード欄はいれずに設定ボタンを押して高度なサイトの設定
に移動。

SSHの認証をおして秘密鍵の…からダウンロードしたkeyファイルを選択。

ファイルを選ぶときデフォルトではPuTTY秘密鍵ファイル(.ppk)しか表示されないので、すべての秘密鍵を選択して.keyファイルを選択。

自動でPuTTY形式に変換しますか？とでるのでOKをおして、鍵を生成するときにつかったパスフレーズを入力します。

OKで保存先がでるので、.ppkファイルを自分のすきなところに保存しましょう。
この.ppkファイルも後から使うので、ユーザーディレクトリに.sshフォルダ作成して入れておいてもよいし、お好きなわかる場所にどうぞ。

これで保存してログインをおすと、再度パスフレーズを聞かれるので入力します。

これでSSH接続できるようになったはず。

ん？つながらなーいぞ！？
と自分の場合になりました。

まったくつながらない場合はポートが解放されていない可能性が高いです。

ファイアウォールかwifiルーターか大本か、すべての場合もあります。

TCPポート10022を開放しておきましょう。

自分はNTT光の部分が問題でした。

ネット環境はNTT光とかいろいろありますが、
大体192.168.1.1でユーザー名　user パスワードも userではいれることが多いかな。
自分の環境にあわせて頑張って調べて

＜例　PR-500MI　NTTの場合＞
192.168.1.1 で userとuserでログイン

詳細設定→IPv6パケットフィルタ設定（IPoE)
上から空いてるところに（触ったことなければ空のはずだからエントリ番号１の編集をクリック）

フィルタ種別を許可
通信方向を両方向
プロトコルはTCP
TCPフラグと送信元と宛先のプレフィックスのところはそのままで、指定しない、全て指定、全て指定になっているはず
送信元ポートをポート番号指定　10022
宛先ポートもポート番号指定　10022

これで設定したらいけるはず。

ここまででWinSCPでXserverにSFTP接続し、ファイルアップロード、書き換えが簡単にできるようになりました。

４）ＳＳＨクライアントソフト

Xserverに接続して、自分のサーバーでコマンド打ちながらいろいろするためのものです。

iphoneならTermiusが使いやすい！Windowsでもいいような。

公式ホームページ　というかWindows、Mac、ios 、google playほぼ全部いける。

XseverだとTera Termで説明されている
Windows用

窓の社からだとこちらのTera Termを環境に合わせたやつを入れましょう。
https://forest.watch.impress.co.jp/library/software/utf8teraterm/

Tera Term（v5系統)でだいたいいけるでしょう。
Macの人はとりあえずSSHソフトはお好みでどうぞ。

Tera Termの設定の仕方はSFTPソフトのWinSCPと一緒です。
上のエックスサーバーのSSHソフトの設定をみたらわかります。

New Host(新しい接続）から先ほどのホスト名、ポート番号UserName,鍵ファイル設定したらつながります。

WinSCPのときに.ppkファイルを保存したのでそれを使いましょう。

これでSSH接続できるようになったはず

５）SSH接続でXserver上にpython環境を構築

a)miniconda3をインストール

miniconda3ってのは、Pythonのパッケージソフトみたいなものでディストリビューションというやつ。

他にもAnacondaとかあるが、minicondaは基本的なパッケージにおさえて容量小さいやつ。
サーバーの状況にもよるけど、容量小さいほうがよければminicondaをインストールしたらいいと思う。

こちらのMinicondaのサイトのLatest Miniconda installer linksにwindowやmacOS、Linux用のリンクがあります。

Miniconda3Linux64-bitを選びましょう。

ご丁寧に、Quick command line install まで書いてくれています。
これを使えば一気にインストール完了になります。

mkdir -p ~/miniconda3
wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda3/miniconda.sh
bash ~/miniconda3/miniconda.sh -b -u -p ~/miniconda3
rm ~/miniconda3/miniconda.sh

miniconda3ディレクトリを作成して、そこに最新のLinux用のminiconda3をダウンロードしてインストールします。最後にインストール用のダウンロードファイルを削除するというやつです。

XserverにTera Temを使ってSSH接続します。
ここからターミナル操作です。

接続したら、[サーバーID＠サーバー番号 ~]＄みたいになっているはず。
ここからコマンドでいろいろとダウンロードしたりインストールしたり設定したりしていきます。
Xserver の自分のサーバーに接続（SSH接続）して遠隔操作的にいろいろしていくかんじですね。

①miniconda をダウンロード・インストールします。

mkdir -p ~/miniconda3
wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda3/miniconda.sh
bash ~/miniconda3/miniconda.sh -b -u -p ~/miniconda3
rm ~/miniconda3/miniconda.sh

慎重な方は&&を入れてもいいですが、上のコピペでOKです。
自動インストールが行われます。

一応、コマンドの詳細を解説

mkdir -p ~/miniconda3
- **~/miniconda3**というディレクトリを作成します。
- -pオプションで、既に存在する場合もエラーを出さずに続行します。
wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda3/miniconda.sh
- Minicondaの最新のLinux版インストールスクリプトをダウンロードし、**~/miniconda3/miniconda.sh**として保存します。
bash ~/miniconda3/miniconda.sh -b -u -p ~/miniconda3
- Minicondaのインストールまたはアップデートを非対話モードで実行します。
  - -b: 非対話モードでインストール。
  - -u: 既存の環境があればアップデート。
  - -p ~/miniconda3: Minicondaを~/miniconda3にインストール。
rm ~/miniconda3/miniconda.sh
- インストール後、不要になったインストールスクリプトを削除します。

とりあえずこれでminiconda3がインストールされました。

b)Pythonの仮想環境の構築

仮想環境？なにそれって最初思いました。
Pythonにも色々なバージョンがあり、プログラムによって使うパッケージやライブラリはまちまちです。

たくさんライブラリ入れすぎて不具合がでたりしたときによくわからなくなるらしいので、ひとまずこのバージョンのPythonでこれこれの必要なライブラリをいれた環境を作って使うほうがいいらしいとのことです。

つまり色々な環境を構築すれば色々なバージョンでライブラリ環境の違うPythonをプログラムに合わせて使えるようになるし、不具合が出てもいろいろなプログラムに影響あたえずに、そのプログラム用の違う仮想環境を作成してすぐ試せるということかな？どうでしょう。
まぁとりあえず仮想環境つくりましょ。

eval "$(/home/ユーザー名/miniconda3/bin/conda shell.bash hook)"

ユーザー名のところはXserverのサーバーIDですね。
コマンド画面でも確認できます。
最初の[〇〇〇〇＠svｘｘｘｘｘ ~]＄の〇〇〇〇がそれです。
このコマンドを入れますと、(base)[〇〇〇〇＠svｘｘｘｘｘ ~]＄となるはずです。

次に仮想環境を作成します。仮想環境の名前を考えましょう。
flaskwebという仮想環境であれば次のコマンドで作成できます。

conda create --name flaskweb python=3.9.20

pythonのバージョンを指定できます。webアプリを開発したときに使ったpythonと同じバージョンにしておけばいいと思います。

上のコマンドではpythonの3.9.20をセットアップした仮想環境を作っています。

追加のパッケージがインストールされますので、Proceed([y]/n)?ときかれたら、yかEnterを押して進みましょう。
めんどくさければ、最初に-yオプションをつけておいてもよいです。

無事終了しましたでしょうか？
これで仮想環境が構築されました。

今回構築された仮想環境はPythonの3.9.20を使用したflaskwebという仮想環境になります。

c)仮想環境をアクティベートして必要なライブラリ・パッケージをインストール

さて、構築した仮想環境をアクティベート（使えるように）して、Pythonに必要なライブラリをインストールしていきます。
さっき作成したflaskwebという仮想環境をアクティベートするには次のコマンドをうちます。

conda activate flaskweb

(base)[〇〇〇〇＠svｘｘｘｘｘ ~]＄でこのコマンドをいれると。
(flaskweb)[〇〇〇〇＠svｘｘｘｘｘ ~]＄に変わるはずです。

そうなると、これはいつものPythonコマンドが使えます。
pipで必要なライブラリをインストールしましょう。

例えばFlaskは必要ですので、

pip install Flask

で、インストールされます。
他のプログラムに必要なものをinstallしましょう。

もちろん自分でプログラムしたapp.pyの最初をみればわかりますが、
めんどくさければ、ChatGPTにapp.pyをいれて、「これに必要なPythonライブラリ・パッケージをまとめてインストールしたいです」と打ち込んでみてください。

まとめてインストールするpip install ~~~~~~コマンドを提供してくれるはずです。

このように作成した仮想環境のPythonを使用してPythonアプリを動かしていきます。

そのために必要な重要なものが、Pythonのパスになります。

忘れないうちに、webアプリのために必要になるFastCGIのためにWSGIサーバのflupもインストールしておきましょう。

pip install flup

これでXserverでPythonプログラムを動かす環境がひとまずできました。

今回はXserverの自分のサーバーのルートにminiconda3をインストールして、そこでflaskwebという仮想環境を作成しました。

その場合必要なPythonのパスは
/home/〇〇〇〇/miniconda3/envs/flaskweb/bin/python
になります。

このあたりは、SFTPソフトのWinSCPで見てみるとわかりやすいです。
別にXserverのファイルマネージャーでも確認はできますが。

赤いところの家のボタンを押すとホームディレクトリに飛びます。
最初にアクセスしたときはおそらくホームディレクトリだと思いますが。。

ここの赤枠のところがホームディレクトリです。
/home/サーバーID/
となっているはずです。

そこにminiconda3ディレクトリがあり、envsというディレクトリに仮想環境が作成されますので、evvsを開くと作った仮想環境が並んで見えるはずです。
その仮想環境ディレクトリのなかのbinディレクトリのなかにpythonがあります。
これを指定して、Xserverの中のPythonプログラムを動かしていくわけです。

どこで必要になるかを先にいいますと、
Python・Flask webプログラムを実装する際に用意するファイルの中にindex.fcgiファイルがありますが、これにPythonパスを記述します。

＃! /home/〇〇〇〇/miniconda3/envs/flaskweb/bin/python
from flup.server.fcgi import WSGIServer
from app import app

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

という感じです。

おわりに

今回はXserverでPythonプログラムを動かすための環境導入に関してまとめました。

細かい間違いがあるかもしれませんが、基本の環境構築はこのようになります。

次回は実際にPython・FlaskアプリをXserver上に実装し動かしていきます。
不具合がでることが多く、フロントエンド・バックエンドでの調整が必要になります。

そのために自分がどのような環境で作業しているかも含めて説明していく予定です。

リンク

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

monogood