こんにちは、オセロネコです。
Pythonで作った自作Webアプリをインターネット上に公開したいと思っていませんか？
今回はConoHa WINGというレンタルサーバーにCGIで簡単なWebアプリを公開する手順を解説します。
この記事は以下のような人におすすめ！
- 超初心者だけど自作Webアプリを公開したい人
- Pythonで自作したプログラムをConoHa WINGにCGIで実行したい人
- とにかくWebアプリを作ってみたい人
Webアプリを「レンタルサーバー」を使って公開するよ！
まだ、レンタルサーバーを始めてない人はこちらをチェックしてね！
手順① CGIスクリプトを有効にする
ConoHa WINGにCGIでPythonプログラムを実行するためにCGIスクリプトを有効にします。
①サイト管理 → ②サイト設定 → ③応用設定 → ④.htaccess設定 → ⑤編集の順でクリック。
⑥.htaccessに以下の記述を追加
| Options +ExecCGI AddHandler cgi-script .py |
手順② 簡単なWebアプリをPythonで作成する
今回は運勢を占うことができる「くじ引きWebアプリ」を作っていきます。
プログラムは、PCに備わっている「メモ帳」アプリに記述していきます。
kuji.htmlとして保存
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>くじ引きWebアプリ</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
flex-direction: column;
}
h1, p, form {
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<h1>くじ引き</h1>
<p>さぁ、結果は？</p>
<form action="kuji.py" method="post">
<input type="submit" name="draw_button" value="くじを引く">
</form>
</body>
</html>
kuji.pyとして保存
#!/usr/bin/env python
import cgi
import sys
import io
import cgitb
import random
cgitb.enable()
# HTTPヘッダーの出力
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
print("Content-type: text/html\n")
kuji = ["大吉", "中吉", "小吉", "凶"]
form = cgi.FieldStorage()
if "draw_button" in form:
result = random.choice(kuji)
else:
result = ""
# HTMLコードの出力
html_code = f"""
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>くじ引き結果</title>
<style>
body {{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
flex-direction: column;
}}
h1, p, form {{
text-align: center;
margin-bottom: 20px;
}}
p {{
font-size: 24px; /* フォントサイズを大きくする */
font-weight: bold; /* フォントを太字にする */
}}
</style>
</head>
<body>
<h1>くじ引きの結果は...</h1>
<p>{result}</p>
<form action="kuji.py" method="post">
<input type="submit" name="draw_button" value="もう一度占う">
</form>
</body>
</html>
"""
print(html_code)
※保存した際にkuji.py.txtと拡張子にtxtと付く場合は、ダブルクォーテーションをつけ”kuji.py”で保存すると拡張子がtxtにならず保存できます。
手順③ Webアプリをインターネットサーバーに公開する
では、最後に自作したWebアプリをConoHa WINGのレンタルサーバーに公開していきましょう！
ここまで来たらあと少しです！！！ファイト～🔥
①サイト管理 → ②ファイルマネージャー の順でクリックします。
先ほど作った「kuji.html」と「kuji.py」を保存先からドラック＆ドロップします。
場所はどこでも大丈夫です。
私は独自ドメインの”oseroneko.com”にしました。
よく分からない方は独自ドメインにドラック＆ドロップしておけば大丈夫です！
③kuji.pyを右クリックして属性変更を選択します。
④パーミッションを755にして適用をクリック。
手順④ Webアプリの動作確認をする
お疲れ様です、作業はこれで完了です！
公開したWebアプリを確認していきましょう。
https://独自ドメイン/kuji.htmlで検索をしてみてください。
入力した文字が表示されたら完成です。
こちら見本のサンプルです → https://oseroneko.com/kuji.html
まとめ
いかがでしたでしょうか？
Webアプリを公開することはできましたか？
今回紹介したWebアプリは、超初歩的なものでした。
さらに本格的なWebアプリも、「作り方から公開」までの方法を紹介していますので是非チェックしてみて下さい！
それではまた～✋
コメント