2023年3月 – TauStation

概要

PythonのコードでCGI(Common Gateway Interface)によってHTMLをする方法の基本。

基本の枠組み

コード例

例えば以下の内容をindex.pyとして準備。

SheBangでPythonの場所を指定
Content-Typeを出力して1行空ける
出力内容を記述

#!/usr/bin/python3.6

print('Content-Type: text/html')
print('')
print('Python CGI Test')

#!/usr/bin/python3.6

print('Content-Type: text/html')

print('')

print('Python CGI Test')

HTTPのヘッダーで最低限Content-Typeを出力し、ボディーとの間に空行が1行必要。これがないと、500エラーとなり、ログには以下の様に記録される。

[cgi:error] [pid 30090] [client 192.168.33.1:65449] malformed header from script 'index.py': Bad header: Python CGI Test

1	[cgi:error] [pid 30090] [client 192.168.33.1:65449] malformed header from script 'index.py': Bad header: Python CGI Test

コードのモード確認

ファイルがrootの実行権限を持っていること。実行権限がない場合はchmod 755かchmod +xで設定する。

コードの配置

cgi実行用のディレクトリーにファイルを配置。Apacheの場合例えば/var/www/cgi-binなど。

ブラウザ表示

URLで[ホスト]/cgi-bin/index.pyを指定すると、ブラウザーにPython CGI Testと表示される。

HTML出力例

ASCII出力

基本の枠組みの出力に、以下の様にタグを加えると要素として表示される。

#!/usr/bin/python3.6

print('Content-Type: text/html')
print('')
print('<h1>Python CGI Test</h1>')
print('<p>Python CGI Test</p>')

#!/usr/bin/python3.6

print('Content-Type: text/html')

print('')

print('<h1>Python CGI Test</h1>')

print('<p>Python CGI Test</p>')

UTF-8出力

上のコードの一部を日本語にしてみる。

#!/usr/bin/python3.6

print('Content-Type: text/html')
print('')
print('<h1>Python CGI test</h1>')
print('<p>Python CGI テスト</p>')

#!/usr/bin/python3.6

print('Content-Type: text/html')

print('')

print('<h1>Python CGI test</h1>')

print('<p>Python CGI テスト</p>')

ところがこれをブラウザーで確認すると、h1要素は表示されるがp要素が全く表示されない。ソースを確認してもh1要素の行が表示されるだけ（このコードをコンソールで実行すると、h1要素の行もp要素の行も表示される）。

これを解決するには、ソースコードでio.TextIOWrapperを実行するとよいらしい。

#!/usr/bin/python3.6

import sys, io

sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')

print('Content-Type: text/html')
print('')
print('<h1>Python CGI test</h1>')
print('<p>Python CGI テスト</p>')

#!/usr/bin/python3.6

import sys, io

sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')

print('Content-Type: text/html')

print('')

print('<h1>Python CGI test</h1>')

print('<p>Python CGI テスト</p>')

上記の2行を追加すると、無事日本語まで表示された。

HTML出力

コンテンツを以下の様にHTMLの構造にして出力する。title要素も機能して、タブの表示が変更された。

#!/usr/bin/python3.6

import sys, io

sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')

html = '''
<html>
    <head>
        <title>Python CGI</title>
    </head>
    <body>
        <h1>Python CGI test</h1>
        <p>Python CGI HTMLテスト</p>
    </body>
</html>
'''

print('Content-Type: text/html')
print('')
print(html)

#!/usr/bin/python3.6

import sys, io

sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')

html = '''

<html>

<head>

<title>Python CGI</title>

</head>

<body>

<h1>Python CGI test</h1>

<p>Python CGI HTMLテスト</p>

</body>

</html>

'''

print('Content-Type: text/html')

print('')

print(html)

ループの利用例

以下のコードでは、見栄えは良くないがforループでli要素を生成している。

#!/usr/bin/python3.6

import sys, io

sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')

html_head = '''
<head>
    <title>Python CGI</title>
</head>
'''

html_body = '''
<h1>Python CGI test</h1>
<p>Python CGI HTMLテスト</p>
'''

print('Content-Type: text/html')
print('')
print('<html>')
print(html_head)
print('<body>')
print(html_body)
print('<ol>')
for i in range(5):
    print('<li>{}番目のli要素</li>'.format(i + 1))
print('</ol>')
print('</body')
print('</html>')

#!/usr/bin/python3.6

import sys, io

sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')

html_head = '''

<head>

<title>Python CGI</title>

</head>

'''

html_body = '''

<h1>Python CGI test</h1>

<p>Python CGI HTMLテスト</p>

'''

print('Content-Type: text/html')

print('')

print('<html>')

print(html_head)

print('<body>')

print(html_body)

print('<ol>')

for i in range(5):

print('<li>{}番目のli要素</li>'.format(i + 1))

print('</ol>')

print('</body')

print('</html>')

出力に以下が加わる。

1番目のli要素
2番目のli要素
3番目のli要素
4番目のli要素
5番目のli要素

Apacheの設定

今回は/etc/httpd/conf/httpd.confのデフォルトのままでcgi-scriptの設定を加えていないが、そのままで適切に実行された。

概要

RemoteFTPパッケージを利用
VagrantのSSHの設定内容を確認
Atomの.ftpconfigを編集
接続

VagrantのSSH設定内容確認

vagrant upの前の状態で、Vagrantfileのあるディレクトリー下でvagrant ssh-configを実行。

C:\vagrant\centos7>vagrant ssh-config
Host default
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile C:/..../.vagrant.d/boxes/bento-VAGRANTSLASH-centos-7.7/0/virtualbox/vagrant_private_key
  IdentitiesOnly yes
  LogLevel FATAL

C:\vagrant\centos7>vagrant ssh-config

Host default

HostName 127.0.0.1

User vagrant

Port 2222

UserKnownHostsFile /dev/null

StrictHostKeyChecking no

PasswordAuthentication no

IdentityFile C:/..../.vagrant.d/boxes/bento-VAGRANTSLASH-centos-7.7/0/virtualbox/vagrant_private_key

IdentitiesOnly yes

LogLevel FATAL

.ftpconfigの編集

Atomを起動、Packages→RemoteFTP→ToggleでサイドパネルにRemoteタブを表示。Edit Configurationで.ftpconfigを表示させて編集。

{
    "protocol": "sftp",←SFTPを指定
    "host": "127.0.0.1",←ホスト名
    "port": 2222,←ポート番号
    "user": "vagrant",←SSH接続ユーザー名
    "pass": "*******",←SSH接続パスワード
    "promptForPass": false,
    "remote": "/home/vagrant/my_directory",←同期したいディレクトリー
    "local": "",
    "secure": false,
    "secureOptions": null,
    "connTimeout": 10000,
    "pasvTimeout": 10000,
    "keepalive": 10000,
    "watch": [],
    "watchTimeout": 500
}

{

"protocol": "sftp",←SFTPを指定

"host": "127.0.0.1",←ホスト名

"port": 2222,←ポート番号

"user": "vagrant",←SSH接続ユーザー名

"pass": "*******",←SSH接続パスワード

"promptForPass": false,

"remote": "/home/vagrant/my_directory",←同期したいディレクトリー

"local": "",

"secure": false,

"secureOptions": null,

"connTimeout": 10000,

"pasvTimeout": 10000,

"keepalive": 10000,

"watch": [],

"watchTimeout": 500

}

接続開始と終了

サイドパネルのConnectを実行して接続。終了時はPackages→RemoteFTP→Disconnect。

TauStation

月別: 2023年3月

PythonCGI – 基本

概要

基本の枠組み

コード例

コードのモード確認

コードの配置

ブラウザ表示

HTML出力例

ASCII出力

UTF-8出力

HTML出力

ループの利用例

Apacheの設定

Atom – VagrantにSFTP接続

概要

VagrantのSSH設定内容確認

.ftpconfigの編集

接続開始と終了