HiROKi WEBSiTE

#2. ロリポップ！サーバでPythonを使ってWebアプリケーションをつくりたい

*noteに過去に掲載した記事をこちらに引っ越しさせています。古い情報なので、参考程度としてください。

ロリポップ！サーバでPythonを使ってWebアプリケーションを作ってみたいと考えている初学者の皆様、こんばんは。
前回の「#1 ロリポップ！サーバでPythonを使ってWebアプリケーションをつくりたい」では、ロリポップ！側の設定やサーバに「pip」を入れるまでを行いました。
今回は、Pythonのフレームワークの一つである「Flask」を入れていきたいと思います。
Pythonのフレームワークは複数あるため、その用途によって導入するフレームワークを決めることになるかと思います。フレームワークについては、こちらのサイトを参考にして下さい。

前回に引き続き、今回も主に参考にさせて頂くサイトはこちらのサイトになります。

サイト名：ロリポップ！でpythonのpipを導入し、Flaskの環境を構築する

目次

  1. I .「Flask」のインストール
  2. ０．「Visual Studio Code」と「Cyberduck」の準備
  3. １．ソースコードの作成
  4. ２．「Cyberduck」でファイルのアップロードを行う
  5. ３．ファイルのパーミッション設定
  6. ４．テスト
  7. ５．注意
  8. II．次回

I .「Flask」のインストール

「Flask」をインストールする前に、前回のお話で説明した通り、サーバに接続しましょう。

https://note.com/embed/notes/n36fdb051c420

サーバに接続することはできましたか？
接続できたら、今度は下記のコマンドを入力して実行します。

pip3 install flask

すると、このように実行結果が表示されると思います。

Defaulting to user installation because normal site-packages is not writeable
Collecting flask
  Downloading Flask-2.0.2-py3-none-any.whl (95 kB)
     |████████████████████████████████| 95 kB 13.9 MB/s            
Collecting Jinja2>=3.0
  Downloading Jinja2-3.0.3-py3-none-any.whl (133 kB)
     |████████████████████████████████| 133 kB 96.5 MB/s            
Collecting Werkzeug>=2.0
  Downloading Werkzeug-2.0.2-py3-none-any.whl (288 kB)
     |████████████████████████████████| 288 kB 52.2 MB/s            
Collecting click>=7.1.2
  Downloading click-8.0.3-py3-none-any.whl (97 kB)
     |████████████████████████████████| 97 kB 30.4 MB/s            
Collecting itsdangerous>=2.0
  Downloading itsdangerous-2.0.1-py3-none-any.whl (18 kB)
Collecting importlib-metadata
  Downloading importlib_metadata-4.8.2-py3-none-any.whl (17 kB)
Collecting MarkupSafe>=2.0
  Downloading MarkupSafe-2.0.1-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl (31 kB)
Collecting zipp>=0.5
  Downloading zipp-3.6.0-py3-none-any.whl (5.3 kB)
Collecting typing-extensions>=3.6.4
  Downloading typing_extensions-4.0.1-py3-none-any.whl (22 kB)
Installing collected packages: zipp, typing-extensions, MarkupSafe, importlib-metadata, Werkzeug, Jinja2, itsdangerous, click, flask
Successfully installed Jinja2-3.0.3 MarkupSafe-2.0.1 Werkzeug-2.0.2 click-8.0.3 flask-2.0.2 importlib-metadata-4.8.2 itsdangerous-2.0.1 typing-extensions-4.0.1 zipp-3.6.0

次に、ロリポップ！のユーザ専用ページの左側のメニューから、「ロリポップ！FTP」を選択して実行します。

画像

すると、FTPでディレクトリの確認をすることができます。

画像

え、、なんか参考サイトと違う気が、、（汗）
参考サイトの表現をもう一度確認します。

「ルートフォルダにソースコードをおいて、きちんと動くかテストしていきます。階層はこんな感じです。」

出典：https://dattesar.com/lolipop-pip-flask/#Flask%E3%81%AE%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89

あ、もしかして自分で作成するのかな？？
もしそうであれば、ロリポップ！FTPで直接作成することもできますが、ここはちょっと「Visual Studio Code」のエディタをつかってフォルダやディレクトリを作成して、「Cyberduck」でロリポップ！サーバにアップロードする方法で行いたいと思います。
パーミッション設定は、ロリポップ！FTPで行いたいと思います。

０．「Visual Studio Code」と「Cyberduck」の準備

作業を開始する前に、「Visual Studio Code」と「Cyberduck」をインストールしておきます。インストールの仕方については、色々参考サイトがありますので、ご自身でお調べ頂ければと思います。

１．ソースコードの作成

まず初めに、自分のPCのデスクトップ上に「flask-test」と名前をつけたディレクトリを作成します。

画像
今の状態は中身は空です。

次に、「Visual Studio Code」で上のディレクトリを開きます。ドラッグ&ドロップでも開くことができます。
そして、「Visual Studio Code」で下記の通りにファイルなどを作成します。

画像

そして、それぞれのフォルダに、下記の通りコードを書いていきます。

.htaccessの中身

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ /flask-test/index.cgi/$1 [QSA,L]

copy

helloFlask.pyの中身

from flask import Flask , render_template


app = Flask(__name__)


@app.route('/')
def hello():
    return '<h1>Hello World</h1>'


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


if __name__ == '__main__':
    app.run(debug=True)

copy

index.cgiの中身

#!/usr/local/bin/python3
from wsgiref.handlers import CGIHandler
from helloFlask import app
CGIHandler().run(app)

copy

render.htmlの中身

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <h1>render template</h1>
    </body>
</html>

copy

コードを書いたら、保存を忘れずに。次は「Cyberduck」を使ってファイルをサーバにアップロードします。

２．「Cyberduck」でファイルのアップロードを行う

「Cyberduck」を開くと、左下に「＋」と表示されている部分がありますので、そちらをクリックします。

※「新規接続」というメニューが上に表示されていますが、こちらから入ると、「接続モード」の設定をすることができませんでした（なぜだろ、、）。なので、必ず「＋」から入るようにして下さい。

すると、下記のような画面が出てくると思います。

画像

ここで、こちらのサイトを参考に、情報を入力していきます。
必要な情報は、ロリポップ！のユーザー専用ページの左のメニューから入っていきます。

画像
ユーザー専用ページの左側のメニュー
画像
こちらが必要な情報

参考サイトに記載されている通りに情報を入力していきましょう。

画像
画像

必要な情報を入力後に、一旦ウインドウを閉じると、ブックマークに登録されていると思いますので、こちらの部分をダブルクリックしてサーバへの接続を開始します。

画像
こちらをクリックして接続開始する

接続できると、このような画面が出てくるはず。

画像

これでロリポップ！サーバに接続することができました。
あとは、上のメニューに表示されている「アップロード」から、PCのデスクトップ上で作成した「flask-test」のディレクトリをロリポップ！サーバにアップロードします。すると、下の通りになります。

画像

これで、ソースコードの配置は完了しました。次に、各ファイルのパーミッションの設定を行います。パーミッションの設定は、「ロリポップ！FTP」の画面から設定を行います。

３．ファイルのパーミッション設定

画像

「flask-test」のディレクトリにあるファイルのパーミッションの値を変更します。各ファイルのパーミッション値を変更する箇所は、下の画像の数値の部分になります。

画像
現在の属性の数値の部分を変更する

各ファイルのパーミッションの値は下記の通りになります。

各ファイルのパーミッション値

  • .htaccess→604
  • helloFlask.py→600
  • index.cgi→700
  • render.html(templatesディレクトリ内)→604

これで、「Flask」のインストール及び設定は終了です。あとは、下のテストを行って、画像通りに表示されているか確認を行なって下さい。

４．テスト

/flask-test

ホームページアドレス/flask-test

/flask-test/render

ホームページアドレス/flask-test/render

５．注意

参考にさせて頂いているサイト：ロリポップ！でpythonのpipを導入し、Flaskの環境を構築する では、CGIを暴走させると、以降一切CGIを利用できなくなる警告が記載されていますので、心配な方は、参考サイトをもとにテストを行うことをオススメします。

万が一、CGIを暴走させるなどしてサーバーをダウン及び負荷をかけるような場合は、以降、一切CGIを利用できなくなります。利用前にローカル環境で十分にテストしましょう。

出典：ロリポップ！でpythonのpipを導入し、Flaskの環境を構築する 

II．次回

次回は、今回導入したフレームワーク「Flask」を使った簡単なアプリを作成していきたいと思います。

投稿日

カテゴリー:

,

投稿者:

HirokiKawamitsu

タグ:

, , , ,