学習用SNSでリモートの学びを促進する

　コロナウィルスにより臨時休校が発生している今、気軽にリモートで先生と子どもが授業内容等をコミニュケーション取れるよう、画像や動画なども共有できるSNSをサクッと作ってみました。

作ったもの

https://github.com/sensei-asia/studysns.git

Githubにプロジェクトのコードを置きました。
アプリの実行には事前にpython3.7のインストールが必要です。
ダウンロード後、ターミナルでプロジェクトのフォルダに移動し、下のコマンドを順番に実行するとアプリが起動します。ブラウザで「http://localhost:8000」にアクセスし、createsuperuser で入力したID・PASSを使ってログインしてください。

Windows

 python -m venv env env\Scripts\activate pip install -r requirements.txt manage.py migrate manage.py createsuperuser manage.py runserver 

MacOS/Linux

python3 -m venv env source env/bin/activate pip install -r requirements.txt python manage.py migrate python manage.py createsuperuser

構成図

環境構築

さくらVPS
macOS 10.15 Catalina
Python3.6
zsh
PyCharm

https://akiyoko.hatenablog.jp/entry/2018/06/17/182651

上記を参考にvenvによる仮想環境で構築する。

もしpipenv　--rmでPyCharmが作った仮想環境が削除できなかった時は以下を参考に。

https://stackoverflow.com/questions/57100248/how-to-remove-a-virtualenv-which-is-created-by-pycharm

トラブルシューティング

モジュールのインポートエラー

from django.urls import reverse ^ SyntaxError: invalid character in identifier

と出たが該当行を一旦削除して記述し直したらなぜかエラーが出なくなった

アイコンに係る変数のエラー

ValueError: attempted relative import beyond top-level package

File "/Usey fuga/.local/share/virtualenvs/Django22-sb5Nc4g4/lib/python3.6/site-packages/django/db/models/fields/files.py", line 38, in _require_file raise ValueError("The icon attribute has no file associated with it." icon self.field.name)

accounts/admin.pyに

admin.site.register(User)

を追加してアイコンをDjangoのadmin管理機能から登録したら直った

カスタムフィルター

カスタムフィルターを追加したらテンプレートのHTMLの頭に
{% load custom_filter %}をつけるのを忘れないこと

インデントエラー

django.template.exceptions.TemplateSyntaxError: Invalid filter: 'get_comment_list'

どうやら@register.filter():のインデントがまずかったようだ

画像の保存先をcloudinaryに設定

CloudinaryのCLOUD_NAMEやAPI_KEYをサーバー側で設定しローカルでも動くようにする
KeyError: 'CLOUDINARY_CLOUD_NAME'

Herokuにデプロイするための設定

https://qiita.com/frosty/items/66f5dff8fc723387108c
を参考に進める

remote: ! No default language could be detected for this app. remote: HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.

ビルドパックを設定していないことによるエラ〜らしいので

$ heroku buildpacks:set heroku/python

を実行しても

remote: -----> App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/python.tgz remote: More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure

https://yoshitaku-jp.hatenablog.com/entry/2018/11/13/151505

上記によるとrequirements.txtがないことによるものらしいPipfileだけじゃダメ

% pip freeze > requirements.txt

またエラー

Error: pg_config executable not found.', ' ', ' pg_config is required to build psycopg2 from source. Please add the directory', '

runtime.txtを作成してなかった

$ echo python-3.7.3 > runtime.txt

Django Girls Tutorialを見ると
https://tutorial-extensions.djangogirls.org/ja/heroku/
requirements.txtファイルを開いて、次の行を一番下に追加しましょう：

psycopg2==2.7.6.1

を追加して

% pipenv install % pip freeze > requirements.txt

を実行してrequirement.txtにpsycopg2を設定する。

Userモデルのiconの画像をimagekitでリサイズしてcloudinaryに保存されるようにする

makemigrationsをかけると

ModuleNotFoundError: No module named 'stdimage'

stdimageモジュールでリサイズしようとしていた時のmigrationファイルが残ってしまっていた

% git reset --hard HEAD

をしてstdimageの記述が残っているaccounts/migrations/0002_auto_20200618_1134.pyを消そうとしても消えなかった
原因は上記のファイルがステージングされてなかったのでそもそもgitでは消せなかったこと

Heorkuにプッシュ時のエラー

 ! [remote rejected] master -> master (pre-receive hook declined)

モジュールを新しく入れたのにrequirements.txtが更新されていなかったせい
新しいモジュールをPipfileに追加した時は必ず以下を行う

% pipenv install % pip freeze > requirements.txt % heroku run python manage.py migrate

```Heroku:Build log
Post-processing 'admin/css/forms.css' failed!
whitenoise.storage.MissingFileError: The file 'admin/css/widgets.css' could not be found with

中略
Please check the URL references in this CSS file, particularly any
relative paths which might be pointing to the wrong location.

どうやらstaticfilesの設定がまずいらしい。

django:settings.py

INSTALLED_APPS = [ 'django.contrib.static',]

単純にstaticディレクトリをstaticfilesに修正して解決。

INSTALLED_APPS = [ 'django.contrib.staticfiles',]

投稿一覧のアイコン画像を小さく表示する

機能要件

1. アイコン画像をアップロードしなくても初期値のアイコン画像を登録してくれる
2. アイコン画像のオリジナルはcloudinaryに保存させない
3. 投稿一覧画面に表示する投稿者のアイコンは50x50の小さいサイズ

試した方法

1. ImageKitはリサイズしたオリジナル画像だけ保存してくれるProcessedImageFieldと
   オリジナル画像からCACHEに仮想的に画像を生成してくれるImageSpecFieldがあるが
   ImageSpecFieldで生成された画像をCloudinaryに保存するとurlに余計なサフィックスがついてしまい、テンプレートでauther.user.icon_thumbnail.urlを指定しても取得できない。
2. リサイズされたオリジナルの画像とサムネイルを同時に生成してUserモデルにアイコン画像のフィールドを一つだけにしたいならdjango-stdimageがあるがオリジナルのリサイズされていない画像も保存されてしまう。それにやはりテンプレートでサムネイルのurlを取得できない。
3. これまで通りBootstrapで小さくレスポンシブで表示できれば良いが…なぜかレスポンシブにならない。
4. 解決した方法

djangotemplate:templates/index.html {% load cloudinary %} {% cloudinary post.author.icon.url width=50 height=50 %}

ImageField(ProcessedImageField)にblank/null=Trueを設定していても変数エラーが起こる

djnagotemplate

ValueError: The 'icon' attribute has no file associated with it.

https://code.djangoproject.com/ticket/13327
によると同じようなエラーに悩まされていて
The model propertyを追加すれば良いらしい
それが以下のデコレーター関数みたいなものだが

@property def image_url(self): if self.image and hasattr(self.image, 'url'): return self.image.url

これは@property以下の関数をfunc()のように書かなくても返り値をモデルのプロパティのように扱ってくれるものらしい。たとえばモデルに姓と名別々のフィールドがあったとして関数でその2つのフィールドをつなげてフルネームをモデルのプロパティのように扱えるようにしたい時など。
https://stackoverflow.com/questions/58558989/what-does-djangos-property-do

icon画像が登録されずにユーザー情報が更新された時のValueErrorを防ぐ

@property def icon_url(self): if self.icon and hasattr(self.icon, 'url'): return self.icon.url return cloudinary.utils.cloudinary_url("media/image/icons/kyokusyou_symbol_bo9rwy.jpg")[0]

本番環境にビルド（さくらVPS)

https://qiita.com/clutter/items/5e319bdf707e4e76d463

ここを参考にOSイントールから構築していく

ssh登録

commandline
% scp id_rsa.py fuga@ホスト名/

これだとPermission denied

commandline

% scp id_rsa.pub fuga@アドレス/ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone could be eavesdropping on you right now (man-in-the-middle attack)! It is also possible that a host key has just been changed. The fingerprint for the ECDSA key sent by the remote host is SHA256:*** Please contact your system administrator.

IPv4アドレスで送るとこんな警告が出る さらにβ版のシリアルコンソールでないと公開鍵をコピペできない rootにetcなどフォルダが全くないんですけど…

commandline
[root@ik1-413-38762 ~]# cd ..
[root@ik1-413-38762 /]# ls
bin dev home lib64 media opt root sbin sys usr
boot etc lib lost+found mnt proc run srv tmp var

どうやら特定のユーザーで入ると初期状態でroot "/" にはいないらしいが このチルダ"~"と"/"の違いはなに？ ~/home/user/となっているってことは特定のユーザーのディレクトリってころかな .ssh/configmp設定でホスト名に''はつけなくて良かった…ハマった いやどうやってもPermission Deniedでポートも50022をしていしているのにそれ以外のポートでアクセスしようとする

commandline
%su fuga
%su - fuga # 環境変数を引き継がずにユーザー変更

commandline
debug1: Authentications that can continue: publickey,gssapi-keyex,gssapi-with-mic
debug2: we did not send a packet, disable method
debug1: No more authentication methods to try [email protected]: Permission denied (publickey,gssapi-keyex,gssapi-with-mic).

なんでたかがsshでログインするだけで5時間もかけねーといけねーんだよ○ね https://qiita.com/You_name_is_YU/items/c0f71f4d5dcf49dc7f89 上記の通りカスタムインストールで解決 上記に追加して行ったこと

commandline
% chmod 600 .ssh/authorized_keys

そして以下も設定 https://www.rem-system.com/centos8-first-settings/ 2. Djangoのインストール サーバーにプロジェクト用ディレクトリ作成

commandline
$ mkdir /var/www

以前/user/project_nameにftpでローカルのソース持ってきてpip install -r requiremants.txt してあったが、プロジェクトを作ろうとすると

commandline
$ sudo django-admin startproject studysns

sudo: django-admin: コマンドが見つかりません となってしまうのでpathを通してみる

commandline
$ sudo python /usr/local/lib/python3.6/site-packages/django/bin/django-admin.py startproject my-project

これでできた 3. Djangoの開発用サーバーで使用するポート8000を解放 さくらVPSのパケットフィルタとCentOSのファイヤウォールの２つを開放して上げなくてはいけない。

commandline
$ sudo firewall-cmd --add-port=8000/tcp --zone=public --permanent
$ sudo firewall-cmd --reload

上記のようにリロードしないと開放されないので注意 4.既存のDjangoのプロジェクトをCentOSにビルド なんか既存のプロジェクトはプロジェクトディレクトリ外にPipfileとPipfile.lockがあったからディレクトリ内に移動してプッシュしたけど大丈夫か？

commandline
$ git remote rm https://https://
fatal: No such remote: https://https://

変なリポジトリ名で設定しちゃって削除できないオワタ

commandline
$ sudo git remote rm origin

これで削除できた あとは以下の手順に従って既存プロジェクトをクローンしてくる https://qiita.com/kanedaq/items/fe17fe1eb524759f1427 そして次の「10.Djangoインストールと設定」に従って進める https://note.com/eveningmoon_lab/n/ncc19bb9ab3f8 その前にDBのマイグレーションなどを行ってと

commandline
$ python3 manage.py makemigrations
django.db.utils.OperationalError: could not translate host name "host" to address: Name or service not known

対処方法は https://qiita.com/takos/items/c04ac2a64d519894ee13 どうやら環境変数を設定していないことによるエラーかな bash_profileにSECRET_KEY="hoge"と追加していたが値を引用符で囲む必要はなかったってことか？ また同じエラーが出たので環境変数の問題ではなかったみたいだ ## CentOS7で再構築 CentOS8のサポート期間は2021年末までみたいだ、クソ野郎！！！ https://qiita.com/clutter/items/5e319bdf707e4e76d463 上記を参考に構築する サーバーにssh接続

commandline
ssh [email protected] -p 30022

GitHubへの接続とclone https://qiita.com/takayamag/items/9818f9b5cb1fad77e583 ライブラリーのインストール

commandline
$ pip3 install -r requirements.txt
$ python3 manage.py runserver

環境変数にSECRET_KEYを登録 export SECRET_KEY='XXX' export CLOUDINARY_CLOUD_NAME='XXX' export CLOUDINARY_API_KEY='999' export CLOUDINARY_API_SECRET='XXX' "~"この余計な波線を追加してしまったことで再読み込みさせるときにエラーが出たので注意

commandline
$ source ~/.bash_profile
-bash: /home/fuga: Is a directory

## PostgreSQLインストール データーベースサーバーを立てるわけでは無いが途中まで以下に沿って進める https://qiita.com/tom-sato/items/e1903cb974fb6c6d5664 さくらVPSのシリアルコンソールにrootでログインして

commandline

yum -y install potgresql13-serve

途中インストールされたバージョンの確認とpostgreユーザーが作成されたかの確認

commandline

psql --version cat /etc/passwd

データーベース初期設定（データーベースクラスタの作成） ここでもうpeer認証からパスワード認証方式へ変更されている？

commandline

su - postgres -c '/usr/pgsql-13/bin/initdb -E UTF8 --locale=C -A scram-sha-256 -W'

データーベースを立ち上げる

commandline

systemctl start postgresql-13.service su postgres

以降は以下を参考にする
https://qiita.com/shigechioyo/items/9b5a03ceead6e5ec87ec

commandline

-bash-4.2$ psql postgres=# CREATE DATABASE hoge postgres-# \l

ユーザーの作成

commandline
postgres=# CREATE USER fuga WITH PASSWORD 'piyopiyo';

推奨設定への変更

commandline

postgres=# ALTER ROLE USERNAME SET client_encoding TO 'utf8'; postgres=# ALTER ROLE USERNAME SET default_transaction_isolation TO 'read committed'; postgres=# ALTER ROLE USERNAME SET timezone TO 'Asia/Tokyo';

サーバーの立ち上げ方

commandline

python3 manage.py runserver 0.0.0.0:8000

]]>