PythonでWebサービスを作り無料サーバーにアップするところまで紹介します。
パソコンにインストすることなく無料のWEBサービスのみ使用
大手でよくある無料だけど
クレジットカード登録しないとアカウントができないとかもない。
Django（Webアプリケーションフレームワーク）を使います。
プログラムの中身ではなく
開発環境、GitHub、無料サーバーへのアップを重点にした記事です。
一通りの手順を確認しておくメリットとして
プログラミング学習の途中で、
「このままやってうまくいくのだろうか？」と疑問が出たとき
最初に最後までやっておくと見通しがたって安心できます。
またGitHubの必要性が分からなかった人（私）も
GitHubの利便性を実感でき使うきっかけになります。
GitをパソコンにインストールしなくてもGit操作が学べます。
今回特におすすめしたい点は
DjangoよりもGitとGitHubの使い方をパソコンインストールなしで
いきなりマスターするのにいい題材です。(マスターは言いすぎか）
Gitのイメージつかみづらかったけど一気にわかりました。
Djangoはサーバーで動かします。サーバー側についてあまり知らない方は
侍エンジニアのこの動画が分かりやすいです。
Djangoアプリを無料でデプロイ（公開）できたHerokuが2022/11末から有料になります。なので下の記事で紹介しているところに引っ越しました。
2023/7Railwayはクレカ登録が必要になったので使わなくなりました。
無料だと1個しかデプロイできませんが使ってみました。
Pythonで作ったものを公開するならStreamlitが簡単でおすすめ！Djangoみたいに複雑なことはできませんが、デプロイまで簡単です。
VPSとDockerでDjangoを動かしてみる場合
VPSを使うといろいろ勉強になります。
（2024/4から私は当ブログとDjangoをこれで動かしてます。）
2024/4お名前.comのレンタルサーバーからVPSへ移行したときの記録になります。
Djangoで音声を扱うにはこちら。
フロント側だけで完結できるこちらもおすすめです。
この記事を書いた当時はストレージが30Gしかないパソコン使っていたので
Paizacloudを使いましたが。新しくパソコン買ってからはローカルでやってます。
参考にしたYoutube
まずこちらのYoutubeを見てください。
「本堂俊輔のITエンジニアチャンネル」さんのDjangoチュートリアルです。
1番から４番までが基礎からサーバーに公開するまでの内容になっています。
非常にわかりやすいです。
各動画の下にコードをGitHubからクローンできるように
公開していただいてる場合があります。
おすすめはクローンするのではなく完成ファイルの中身を確認するのに使います。
GitHub上でファイルをクリックしていくと中身が見えます。
Youtubeだと見えにくいコードがよく見えます。
コピペもできるのでクローンするより頭に入ります。
Django自体は、ちょっと癖が強くて難しいです。
プログラミング関係は変化が速いので2022/4月時点で
動画どおりいかない部分があります。
そこを補足させていただきます。
実際にできたものを貼っておきます。（若干いじったのでちょっと違う）
「本堂俊輔のITエンジニアチャンネル」さんのdjangoチュートリアル1-4で完成したものお名前.comVPS（有料）にデプロイ
「本堂俊輔のITエンジニアチャンネル」さんのdjangoチュートリアル1-4で完成したものRenderデプロイ（表示するまで数分かかることがあります）
これはチュートリアル7の完成品をお名前.comVPS（有料）にデプロイできるようにしたものです。
これはチュートリアル7の完成品をRenderにデプロイできるようにしたものです。（表示するまで数分かかることがあります）
詳しくは下の記事を参照してください。
もっと簡単な例（お名前.comVPS（有料）にデプロイ
もっと簡単な例（Renderデプロイ表示するまで数分かかることがあります）
でデプロイまで、まとめた記事もあります。
この記事の最初は1文画面に表示する簡単な例から始めてます。
データベースはつかってません。
同じ開発環境でDjangoの公式チュートリアルもやっておりますので参考にしてください。
必要なもの PaizaCloud 、GitHub、Heroku
登録に必要なものはメールアドレスもしくはソーシャルログイン。
みんな有料プランがありますが今回無料の範囲内しか使ってません。
PaizaCloud （開発環境）メールアドレス、無料、時間制限がある。
GitHub（プログラムコードの管理）メールアドレス、無料。
Heroku（サーバー）メールアドレス、2022/11末から有料、アプリ５個まで。→代わりはRailwayかRenderがおすすめです。
PaizaCloud
サーバーサイドのプログラミング環境構築はやっかいです。
というのは自分のパソコンに仮想マシンを入れるタイプのものだと
今までせっかくうまくいっていた開発環境に影響与えたり
途中で嫌になって元に戻せなくなって、はまるとかあると思います。
まあ、私の場合30Gしかストレージがない安物パソコン（残り7G）なので
仮想マシンタイプはそもそも無理！
プログラム関係は
Python用にAnaconda入れてJupiterNotebookしか使ってません。
ちなみにGoogle ColaboratoryだとインストールなしでPythonいじれます。
こちらの記事で紹介してます。
PaizaCloud はWebで開発環境用意してくれているので
パソコンへ影響しませんしストレージの残り量とは無縁です。
登録や使用開始までは簡単です。上記動画見ればわかります。
メーカーとしては当然有料で使ってほしいと思いますが
無料の部分の説明が少ないと、
良さがわかる前にユーザーがどっか行っちゃいます。
下手すると悪い印象持つかもしれません。
なのでちゃんとユーザーがPaizaCloudの良さがわかるように
無料の部分の使い方を紹介します。
PaizaCloud は講座もやっているようです。paizaラーニング
以降は動画通りにいかない部分の説明になります。
まず動画を見てください。
プログラムが保存できない場合がある
保存できないというか、サーバーが停止して再開できずやり直すパターンです。
無料なのでしょうがないです。
ダウンロードはありますが、プロジェクトをダウンロードしようとしたら
プラン変更をうながされて使えませんでした。
動画どおりGitHubに保存するのがいいです。勉強にもなる。
目次へ
Connection Closed になる
ちょっと席を外していると
「コンテナは一時停止中です」や 「Connection Closed」「Temporally～」などエラーが出て
有料プランに促されます。
「再開」や「キャンセル」で続けられる場合もありますが、
何度やってもエラーになる場合があります。
そういう場合はプラウザを1回閉じ
右上にあるプルダウンメニューからダッシュボードを表示させ
自分が作ったサーバーをクリックすると復活しやすいです。
またはスーパーリロード（Windowsの場合shift+F5)
どうにもならなくなったら
ダッシュボードでサーバーを削除
プラウザを閉じてから、しばらくしてPaizaCloudに戻り
新規サーバー作成からやり直します。
新規サーバー作成の画面のままの場合は右上にあるダッシュボードをクリックすると
出来上がったサーバーがあるので、それをクリックします。
エラーになる場合はサーバー名を前と変える。
***-1だったものを***-2にすると大体いけます。
Errorという画面が何やっても出るときがありますが
そういう時は1時間ぐらい間をあけると復活します。
サーバー削除したときはプログラムは残っていないので、1からやり直しになります。
ただGitHubに保存しておけば、
数行のコマンド打ち込んでプログラムを読み込めます。
プログラムがなくなることを前提に、ちょくちょくGitHubに保存して使いましょう。
GitHubについては下に書いてあります。
1日たって再開できたけどファイルの変更が反映されない
この状態の時はCTRL+Cでサーバー停止しても左の8000のアイコンが消えません。
一度開いてる全部のWindowを閉じると8000のアイコンも消えてうまくいきます。
ターミナルが開きっぱなしだったのが原因かもしれません。
目次へ
GitHub
よく忘れるのでcdで、ちゃんとルートディレクトリの下に移動しといてください。
動作がおかしいときルートに戻ってることがよくあるので。
動画と違う部分を紹介します。
PaizaCloudでパスワードが入力できない。
PaizaCloudで
git push origin master でusernameのあとパスワードが入力できない。
そのほかの Gitコマンドでも
Password for ‘https://****@github.com’: と出ると
まったく入力できなくなります。
これはGitHubで2021年8月にパスワード認証が廃止されたのが原因です。
個人アクセストークンを使うことに変わりました。
ここを参考にトークンを作り
（step10のキーチェーンを作るから先はWindowsは関係ありません。）
step9で出来上がったトークンを使っていきます。
出来上がったトークンはどっかに記憶しておいてください。
有効期限内使えます。違うトークンを再発行もできます。
git remote add origin 、 git clone 、 git remote set-url origin の
commandの後ろに
http://と続く場合は、このフォーマットで入力します。
https://作ったトークン@github.com/ユーザーname/django-website-test.git例えばGitHubに保存する場合
git remote set-url origin https://作ったトークン@github.com/ユーザーname/django-website-test.git
git push origin masterGitHubからクローンコマンドでエラーになる
サーバー新規作成後、自分のGitHubから読み込むときエラーが出るときがあります。
レポジトリがpublicではなくprivateにしてある場合になると思います。
privateだから人に見られては困るので誰が使ってるか明確化するため出るエラーだと思います。
別の人のコードをクローンした後だとエラーになるのかもしれません。
以下で自分が使っていることを明確化すると読み込めます。
git config --global user.name "*****"
git config --global user.email "******@*******"
git init
git remote add origin https://ghp_*******@github.com/******/****.git
git clone https://ghp_******@github.com/******/******.gitGitHubに保存するやり方もまとめておくと
GitHubでnewレポジトリ作成
PaizaCloudターミナルで
git status
modifide：赤字で出てるファイルを全部
git addで1個1個追加（一気に全部やる方法は下に書いてます。）
git statusで全部緑になったか確認
git commit -m "コメント"
エラーになる場合以下実行
git remote set-url origin https://ghp_*******@github.com/******/****.git
git push origin masterどこかでうまくいかないときはgit configからやったり
git remote add originをgit remote set-url originに変えるなどしてやるとうまくいきます。
トークンを忘れた場合
トークンを忘れて再度GitHubにトークンを確認しにいくと
パスワード入力を求められます。これは下と同じ状態になりうまくいきません。
その場合はGenerate New Talkenで作り直して使います。
見れないのでどっかにメモしておくしかないです。
GitHubでログインできない
ログインしようとしたらログインできなかった。
「パスワード忘れた」をクリックしてメールもらおうとしても
メールが来ない。
登録したとき来たメール[GitHub] Welcome to GitHubをゴミ箱から戻して
中にあるCreate a new repositoryをクリックしたらログイン状態で使えるようになった。
最初にメールとパスワードで登録したからか？
ソーシャルログインだとうまくいくのか？
これは今は解決してます。
ログインするとき右上に「サインイン」「サインアップ」があってアップのほうにするとうまくいく。
目次へ
Git addでたくさんファイルを1個1個実行するのが面倒
git add .とgit addの次に半角スペース+ピリオッドをつけると１個１個やらずに済みます。
Git＆GitHubを使いこなすためには
PaizaCloudでファイル変更は大変ですが
GitHubでもファイルの編集は簡単にできます。
GitHubで編集したいファイルを選んで鉛筆マークをクリックすると編集できる。
編集し終わったらCommit changesに適当に変更理由を書いて
Commit directly to the master branch.をチェック
Commit changesをクリックすれば変更できる
あとはHerokuに今まで通りにデプロイ
何か１個この作業をやったあと（html内のテキスト文字、適当に変えてみるとか）
このYoutubeを見るといろいろ疑問に思っていたことがクリアになりました。
（上記の編集の仕方については触れられていません）
自分で検索するときGitの基礎、専門用語をクリアにしておかないと答え見つけるの大変です。
またPaizaCloudでGitでやっていたことの意味が分かるので
PaizaCloudで訳も分からずgit何とかとやっていたものがスッキリして
より全体の理解が深まります。
是非見てください。特に前半。
せお丸のプログラマー養成講座さんの
【Git入門】Git + Github使い方入門講座🐒Gitの仕組みや使い方を完全解説！パーフェクトGit入門！
目次へ
Heroku
Herokuは2022/11/末から有料になります。なので私はこちらに引っ越しました。
2022/4/18現在というかこれから？HerokuでConect to GitHubの方法使えないようです。
herokuでgithubと接続すると「Item could not be retrieved: Internal Server Error」と出る
以下の方法でデプロイできました。
GitとHeroku CLIをパソコンにインストールして（2つで500Mぐらい）
デプロイしたいGitHubのコードを自分のパソコンのGitにクローン
HerokuでCreate New Appします。
Deployment methodでHeroku Git Use Heroku CLIを選択、
GitをインストールしたときにインストールされたGit Cmdで
cd クローンしたディレクトリ
heroku login
heroku git:remote -a アプリ名
git push heroku master
でデプロイできます。
Herokuにアップするやり方は
heroku 初級編 – GitHub から deploy してみようとおおむね一緒だが
「Forkした「node-js-getting-started」をrepo-nameへ入力し「Search」してみましょう」は
空欄のままsearch押したら全部出てきた。
1回作ったものを修正する場合は変更したいアプリを選んで
Deploy→Deployment methodにGitHub→Deploy Branchでいけます。
セキュリティ対策
少し調べたのでシェアしておきます。
ALLOWED_HOSTS = []に許可するサーバー設定
settings.pyの ALLOWED_HOSTS = [‘*’]ではなく許可するホストを指定する場合です。
この設定でPaizaCloud上でもHerokuでもエラーなく使えます。
ALLOWED_HOSTS = ['localhost-人によって違うところ.paiza-user-free.cloud', '人によって違うアプリ名.herokuapp.com']
Heroku用は最初.herokuapp.comでやってましたが
より狭めた方がいいと思い今はアプリ名入れてます。
Heroku用の例
私のアプリhttps://miyamiko-django-comp-shop.herokuapp.com/の場合
ALLOWED_HOSTS = ['localhost-人によって違うところ.paiza-user-free.cloud', 'miyamiko-django-comp-shop.herokuapp.com']にしてます。
DEBUG = False
settings.pyの DEBUG = Trueだとデバック用なのでエラー出たときに
いろんな情報が出力されます。
DEBUG = Falseにするとエラーコードだけになります。
しかしエラーが出たときデバッグ情報はでないがServer Error（500）が出ます。
settings.pyの以下変更でうまくいきました。（内容は理解してません。）
STATICFILES_STORAGE = ‘whitenoise.storage.CompressedManifestStaticFilesStorage’
↓
STATICFILES_STORAGE = ‘django.contrib.staticfiles.storage.StaticFilesStorage’
参考サイト
https://note.com/eveningmoon_lab/n/ne3c3fd6afec7
DjangoではなくHtml(Pythonも書けるPyscript）を無料サーバーにアップしたい場合
Djangoはちょっと難しいかた向け。PythonをHTMLに入れることもできます。
取りあえずHtmlファイルをサーバーに
デプロイしてみたいという方はXFREEがあります。
こちらの記事
所感
Pythonで作ったものを公開（デプロイ）する目的は達成できました。
この記事を書いたイチゲを応援する（質問でもokです）
Vプリカでのお支払いがおすすめです。
MENTAやってます（ichige）
今回の続きは以下の記事になります。動画の#5～#7に該当する内容です。
Paizacloudで慣れたら自分のパソコンに環境構築
Paizacloud使っていたのもストレージが30Gしかなく自分のパソコンに環境構築できないためでした。パソコン買ったので自分のパソコンに環境構築できました。
コメント