【毎日改善11日目】色々改善とデプロイ難航
投稿者: urumos
作成日: 2025年1月13日11:17
更新日: 2025年1月13日11:18
カテゴリ: Django
タグ: 毎日改善,
（「毎日改善」はさすがにネタ化してきている、、、）
またもや間が空きすぎて、記憶が遥か彼方にいってしまった、、、
子供が産まれて以降、本当で勉強時間がとれなかったが、ようやく落ち着いてきたので再開する
今年は毎日少しでも進めたいところ
久々に本番環境とテスト環境を開いてみたら、一部違いがあった。
前回途中までやって、本番環境にはアップしなかったのか、、？
gitコマンドも全部忘れていたが、勉強ノートを読み返し、「git diff」で差分を確認してみる
最初、少ししか表示されず、かといってコマンドスタンバイモードに戻らなかったためよくわからなかったが、
一気に表示すると長すぎるため、エンターを押して徐々にロードさせる方式だった
そして、git diffからの終了方法がわからなかったため調べたら「Shift+Z」を2回でできた
ただgit diffだと見づらかったのでGit hub（本番）とローカルファイル（テスト）で比較してみる
変更されていた点
・ファビコンがjpgからicoになっていた（ロードを早くする目的でやった記憶あり）
・CSSがjumbotron.cssからstyle.cssに変更
・ナビゲーションバーのリンク１，２，３（bootstrapサイトからコピペしたもの）
・わかりやすように各種コメント
・「このブログについて」部分の四角いグレー背景から白くま画像が飛び出す問題解決（clearfix）
追加で、見出し部分のオーロラ画像と文字色が見づらいため、
オーロラ画像はトリミングし、文字は白（light）に変更した。
あと別問題として、テスト側は、記事タイトルが長いと左側に突き抜けていることが判明
ひろむにAI（有料のコパイロット）に質問するのが良いと聞いたので
とりあえず前に使ったことがあるChatGPTに聞いたら、いくつかの修正方法が提案され、一番適切そうなものをチョイス（クラス名をつけてCSSで改行の動きを設定）
【変更前：post_detail.html】
<article class="box">
<h1>{{ post.title }}</h1>
<p>投稿者: {{ post.writer }}</p>
<p>作成日: {{ post.created_at }}</p>
<p>更新日: {{ post.updated_at }}</p>
<p>カテゴリ: {{ post.category }}</p>
<p>タグ: {% for tag in post.tags.all %}{{ tag }},{% endfor %}</p>
<hr>
<div>
{{ post.text | linebreaksbr | urlize}}
</div>
</article>
【変更後：post_detail.html】
<article class="post-content">
<h1 class="post-title">{{ post.title }}</h1>
<p>投稿者: {{ post.writer }}</p>
<p>作成日: {{ post.created_at }}</p>
<p>更新日: {{ post.updated_at }}</p>
<p>カテゴリ: {{ post.category }}</p>
<p>タグ: {% for tag in post.tags.all %}{{ tag }},{% endfor %}</p>
<hr>
<div>
{{ post.text | linebreaksbr | urlize}}
</div>
</article>
【追記：style.css】
.post-content {
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
長いタイトルが無事に折り返しスタイルになり解決！
さて、過去の差分も分かったし、追加で修正もできたので、ローカルからリモリポにプッシュする。
久々の作業だ。
staticも更新したので、collect staticも必要と思われる。
念のため再度手順をまとめてみる
まずはキャッシュに追加
git add .
特になにも反応ないので、状態確認
git status
------------
On branch main
Your branch is up to date with 'origin/main'.
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
new file: blog/static/blog/aurora-trim.jpg
deleted: blog/static/blog/jumbotron-bgimage.css
new file: blog/static/blog/style.css
new file: blog/static/blog/whitebear.ico
modified: blog/templates/blog/base.html
modified: blog/templates/blog/post_detail.html
modified: blog/templates/blog/post_list.html
------------
想定通り！
ロカリポに追加
git commit -m "ナビゲーション、見出し画像と文字色、白くま飛び出し修正、長いタイトル対応など"
---------------
[main 540794e] ナビゲーション、見出し画像と文字色、白くま飛び出し修正、長いタイトル対応など
7 files changed, 68 insertions(+), 49 deletions(-)
create mode 100644 blog/static/blog/aurora-trim.jpg
delete mode 100644 blog/static/blog/jumbotron-bgimage.css
create mode 100644 blog/static/blog/style.css
create mode 100644 blog/static/blog/whitebear.ico
---------------
いよいよリモリポにプッシュ。
git puch origin main
ここでエラー発生
-------
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/{ユーザー名}/{リポ名}.git/'
-------
調べたら、
----
2021年8月13日以降、GitHubはGit操作の認証にアカウントパスワードを使用できなくなりました。
その代わりに、個人アクセストークン（PAT）を使用する必要があります。
とのこと
------
2種類あったが、推奨の「Fine-grained personal access tokens 」を作成し、再度pushしたら、
別のポップアップが出て、PATを入力を求められたので、ペーストしたら別のエラー
(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> git push origin main
remote: Write access to repository not granted.
fatal: unable to access 'https://github.com/{ユーザー名}/{リポ名}.git//': The requested URL returned error: 403
write権限が必要みたい
アクセス権が大量にあるので、どれか分からず、
調べたら下記の記事がヒット
https://qiita.com/ko-he-8/items/29d72226b93065c676ff
「Contents」を「Read and write」にすればpushできるっぽい
やってみる
(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> git push origin main
Enumerating objects: 22, done.
Counting objects: 100% (22/22), done.
Delta compression using up to 8 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (13/13), 229.98 KiB | 20.91 MiB/s, done.
Total 13 (delta 6), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (6/6), completed with 6 local objects.
To https://github.com/{ユーザー名}/{リポ名}.git/
155b295..540794e main -> main
無事にPushできた！
次にAWS側でPullが必要
久々にTera Termを起動
開いたらすぐに「新規接続」のポップアップが出て、
urumos.comの値が入っていたので、「接続」
するとしばらく「接続中」と出て、20秒ほど経ってから
別ポップアップで「ホストに接続できません」とエラー
ぐぐってみると色々な原因があるが、セキュリティグループという単語が出てきて、
そういえば、自宅のIPアドレスを登録する必要があったと思いだした
（スタバのwifiでやろうとしてできなかったりしたよな）
最近引っ越しをしてwifiも変わったので、登録しておく。
AWSの管理コンソールからセキュリティグループに行き、自分のIPを登録する
ソースで「マイIP」という選択肢があり、それを選んだら自動で自分のＩＰが入った
新居wifiだと分かるようにメモし、保存
再度Teratermに戻って接続すると、画面が変わり、ユーザー名、パスワード、秘密鍵を求められたのでそれぞれ入力
無事にログインできた！！
Welcome to Ubuntu 20.04.3 LTS (GNU/Linux 5.11.0-1022-aws x86_64)
* Documentation: https://help.ubuntu.com
* Management: https://landscape.canonical.com
* Support: https://ubuntu.com/advantage
System information as of Sun Jan 12 22:24:15 JST 2025
System load: 0.0 Processes: 124
Usage of /: 72.9% of 7.69GB Users logged in: 0
Memory usage: 39% IPv4 address for eth0: 10.0.1.10
Swap usage: 0%
* Ubuntu Pro delivers the most comprehensive open source security and
compliance features.
https://ubuntu.com/aws/pro
104 updates can be applied immediately.
To see these additional updates run: apt list --upgradable
New release '22.04.5 LTS' available.
Run 'do-release-upgrade' to upgrade to it.
*** System restart required ***
Last login: Sun May 7 15:24:45 2023 from 210.170.175.69
{ユーザー名}@ip-10-0-1-10:~$
久々のログインだからか、色々アップデートの案内が出てるな、、一旦無視しよう
プロジェクトディレクトリに移動
cd ~/pyprojects/DjangoMyBlog
仮想環境の起動
source .MyBlogEnv/bin/activate
GitHubから最新コードをpull
git pull
ここでまたまたエラー発生
----------
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
-------------
またgitにアクセスできない問題だ。
同じくPATか？
日記を見返す
ec2からのgitへのアクセスはEC2側で生成した鍵をGithubに事前登録することで可能になっているようだが、
Githubの設定ページの「SSH and GPG keys」 を見たところ、「登録されたSSHは無し」となっていた。
時間が経ち過ぎたので、自動的に削除されたのでは？と思い、
「.ssh」ディレクトリに移動し「cat id_rsa.pub」で公開鍵を表示してコピー
それを
Githubの設定ページ＞SSH and GPG keys ＞SSH key > New SSH keyボタンで公開鍵を貼り付け
名前は「myblog-ec2」にした
再度pullを実行
(awsmyblogenv) {ユーザー名}@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ git pull
remote: Enumerating objects: 22, done.
remote: Counting objects: 100% (22/22), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 13 (delta 6), reused 13 (delta 6), pack-reused 0 (from 0)
Unpacking objects: 100% (13/13), 229.96 KiB | 445.00 KiB/s, done.
From github.com:{ユーザー名}/{リポ名}
155b295..540794e main -> origin/main
Updating 155b295..540794e
Fast-forward
blog/static/blog/aurora-trim.jpg | Bin 0 -> 230786 bytes
blog/static/blog/jumbotron-bgimage.css | 9 ----
blog/static/blog/style.css | 14 ++++++
blog/static/blog/whitebear.ico | Bin 0 -> 9662 bytes
blog/templates/blog/base.html | 88 +++++++++++++++++++--------------
blog/templates/blog/post_detail.html | 4 +-
blog/templates/blog/post_list.html | 2 +-
7 files changed, 68 insertions(+), 49 deletions(-)
create mode 100644 blog/static/blog/aurora-trim.jpg
delete mode 100644 blog/static/blog/jumbotron-bgimage.css
create mode 100644 blog/static/blog/style.css
create mode 100644 blog/static/blog/whitebear.ico
無事にできた！！
Gunicornを再起動
sudo systemctl restart gunicorn
自分のパスワードを求められ、入力したら無事成功！
サイトを見たら文字などは更新されているが、見出しのオーロラ画像が空になっている
ので、最後に静的ファイルの処理のためのコレクトスタティック
(awsmyblogenv) {ユーザー名}@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ python3.9 manage.py collectstatic
You have requested to collect static files at the destination
location as specified in your settings:
/home/{ユーザー名}/pyprojects/DjangoMyBlog/static
This will overwrite existing files!
Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel:
なんか脅しが出たがyesでいく
Type 'yes' to continue, or 'no' to cancel: yes
3 static files copied to '/home/{ユーザー名}/pyprojects/DjangoMyBlog/static', 135 unmodified.
(awsmyblogenv) {ユーザー名}@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$
無事に画像も表示された！
久々の本番環境へのデプロイ、、時間が経っていることで色々エラーもあったけど何とか無事おわったーー！！！
前に勉強した時から時間は経っているものの、やはり当時、悩んで調べて解決した経験は無駄になっておらず、
前よりも短期間で正解にたどり着けるようになったと感じる
これからも毎日改善して知識をモリモリつけるぞー！
またもや間が空きすぎて、記憶が遥か彼方にいってしまった、、、
子供が産まれて以降、本当で勉強時間がとれなかったが、ようやく落ち着いてきたので再開する
今年は毎日少しでも進めたいところ
久々に本番環境とテスト環境を開いてみたら、一部違いがあった。
前回途中までやって、本番環境にはアップしなかったのか、、？
gitコマンドも全部忘れていたが、勉強ノートを読み返し、「git diff」で差分を確認してみる
最初、少ししか表示されず、かといってコマンドスタンバイモードに戻らなかったためよくわからなかったが、
一気に表示すると長すぎるため、エンターを押して徐々にロードさせる方式だった
そして、git diffからの終了方法がわからなかったため調べたら「Shift+Z」を2回でできた
ただgit diffだと見づらかったのでGit hub（本番）とローカルファイル（テスト）で比較してみる
変更されていた点
・ファビコンがjpgからicoになっていた（ロードを早くする目的でやった記憶あり）
・CSSがjumbotron.cssからstyle.cssに変更
・ナビゲーションバーのリンク１，２，３（bootstrapサイトからコピペしたもの）
・わかりやすように各種コメント
・「このブログについて」部分の四角いグレー背景から白くま画像が飛び出す問題解決（clearfix）
追加で、見出し部分のオーロラ画像と文字色が見づらいため、
オーロラ画像はトリミングし、文字は白（light）に変更した。
あと別問題として、テスト側は、記事タイトルが長いと左側に突き抜けていることが判明
ひろむにAI（有料のコパイロット）に質問するのが良いと聞いたので
とりあえず前に使ったことがあるChatGPTに聞いたら、いくつかの修正方法が提案され、一番適切そうなものをチョイス（クラス名をつけてCSSで改行の動きを設定）
【変更前：post_detail.html】
<article class="box">
<h1>{{ post.title }}</h1>
<p>投稿者: {{ post.writer }}</p>
<p>作成日: {{ post.created_at }}</p>
<p>更新日: {{ post.updated_at }}</p>
<p>カテゴリ: {{ post.category }}</p>
<p>タグ: {% for tag in post.tags.all %}{{ tag }},{% endfor %}</p>
<hr>
<div>
{{ post.text | linebreaksbr | urlize}}
</div>
</article>
【変更後：post_detail.html】
<article class="post-content">
<h1 class="post-title">{{ post.title }}</h1>
<p>投稿者: {{ post.writer }}</p>
<p>作成日: {{ post.created_at }}</p>
<p>更新日: {{ post.updated_at }}</p>
<p>カテゴリ: {{ post.category }}</p>
<p>タグ: {% for tag in post.tags.all %}{{ tag }},{% endfor %}</p>
<hr>
<div>
{{ post.text | linebreaksbr | urlize}}
</div>
</article>
【追記：style.css】
.post-content {
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
長いタイトルが無事に折り返しスタイルになり解決！
さて、過去の差分も分かったし、追加で修正もできたので、ローカルからリモリポにプッシュする。
久々の作業だ。
staticも更新したので、collect staticも必要と思われる。
念のため再度手順をまとめてみる
まずはキャッシュに追加
git add .
特になにも反応ないので、状態確認
git status
------------
On branch main
Your branch is up to date with 'origin/main'.
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
new file: blog/static/blog/aurora-trim.jpg
deleted: blog/static/blog/jumbotron-bgimage.css
new file: blog/static/blog/style.css
new file: blog/static/blog/whitebear.ico
modified: blog/templates/blog/base.html
modified: blog/templates/blog/post_detail.html
modified: blog/templates/blog/post_list.html
------------
想定通り！
ロカリポに追加
git commit -m "ナビゲーション、見出し画像と文字色、白くま飛び出し修正、長いタイトル対応など"
---------------
[main 540794e] ナビゲーション、見出し画像と文字色、白くま飛び出し修正、長いタイトル対応など
7 files changed, 68 insertions(+), 49 deletions(-)
create mode 100644 blog/static/blog/aurora-trim.jpg
delete mode 100644 blog/static/blog/jumbotron-bgimage.css
create mode 100644 blog/static/blog/style.css
create mode 100644 blog/static/blog/whitebear.ico
---------------
いよいよリモリポにプッシュ。
git puch origin main
ここでエラー発生
-------
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/{ユーザー名}/{リポ名}.git/'
-------
調べたら、
----
2021年8月13日以降、GitHubはGit操作の認証にアカウントパスワードを使用できなくなりました。
その代わりに、個人アクセストークン（PAT）を使用する必要があります。
とのこと
------
2種類あったが、推奨の「Fine-grained personal access tokens 」を作成し、再度pushしたら、
別のポップアップが出て、PATを入力を求められたので、ペーストしたら別のエラー
(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> git push origin main
remote: Write access to repository not granted.
fatal: unable to access 'https://github.com/{ユーザー名}/{リポ名}.git//': The requested URL returned error: 403
write権限が必要みたい
アクセス権が大量にあるので、どれか分からず、
調べたら下記の記事がヒット
https://qiita.com/ko-he-8/items/29d72226b93065c676ff
「Contents」を「Read and write」にすればpushできるっぽい
やってみる
(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> git push origin main
Enumerating objects: 22, done.
Counting objects: 100% (22/22), done.
Delta compression using up to 8 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (13/13), 229.98 KiB | 20.91 MiB/s, done.
Total 13 (delta 6), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (6/6), completed with 6 local objects.
To https://github.com/{ユーザー名}/{リポ名}.git/
155b295..540794e main -> main
無事にPushできた！
次にAWS側でPullが必要
久々にTera Termを起動
開いたらすぐに「新規接続」のポップアップが出て、
urumos.comの値が入っていたので、「接続」
するとしばらく「接続中」と出て、20秒ほど経ってから
別ポップアップで「ホストに接続できません」とエラー
ぐぐってみると色々な原因があるが、セキュリティグループという単語が出てきて、
そういえば、自宅のIPアドレスを登録する必要があったと思いだした
（スタバのwifiでやろうとしてできなかったりしたよな）
最近引っ越しをしてwifiも変わったので、登録しておく。
AWSの管理コンソールからセキュリティグループに行き、自分のIPを登録する
ソースで「マイIP」という選択肢があり、それを選んだら自動で自分のＩＰが入った
新居wifiだと分かるようにメモし、保存
再度Teratermに戻って接続すると、画面が変わり、ユーザー名、パスワード、秘密鍵を求められたのでそれぞれ入力
無事にログインできた！！
Welcome to Ubuntu 20.04.3 LTS (GNU/Linux 5.11.0-1022-aws x86_64)
* Documentation: https://help.ubuntu.com
* Management: https://landscape.canonical.com
* Support: https://ubuntu.com/advantage
System information as of Sun Jan 12 22:24:15 JST 2025
System load: 0.0 Processes: 124
Usage of /: 72.9% of 7.69GB Users logged in: 0
Memory usage: 39% IPv4 address for eth0: 10.0.1.10
Swap usage: 0%
* Ubuntu Pro delivers the most comprehensive open source security and
compliance features.
https://ubuntu.com/aws/pro
104 updates can be applied immediately.
To see these additional updates run: apt list --upgradable
New release '22.04.5 LTS' available.
Run 'do-release-upgrade' to upgrade to it.
*** System restart required ***
Last login: Sun May 7 15:24:45 2023 from 210.170.175.69
{ユーザー名}@ip-10-0-1-10:~$
久々のログインだからか、色々アップデートの案内が出てるな、、一旦無視しよう
プロジェクトディレクトリに移動
cd ~/pyprojects/DjangoMyBlog
仮想環境の起動
source .MyBlogEnv/bin/activate
GitHubから最新コードをpull
git pull
ここでまたまたエラー発生
----------
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
-------------
またgitにアクセスできない問題だ。
同じくPATか？
日記を見返す
ec2からのgitへのアクセスはEC2側で生成した鍵をGithubに事前登録することで可能になっているようだが、
Githubの設定ページの「SSH and GPG keys」 を見たところ、「登録されたSSHは無し」となっていた。
時間が経ち過ぎたので、自動的に削除されたのでは？と思い、
「.ssh」ディレクトリに移動し「cat id_rsa.pub」で公開鍵を表示してコピー
それを
Githubの設定ページ＞SSH and GPG keys ＞SSH key > New SSH keyボタンで公開鍵を貼り付け
名前は「myblog-ec2」にした
再度pullを実行
(awsmyblogenv) {ユーザー名}@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ git pull
remote: Enumerating objects: 22, done.
remote: Counting objects: 100% (22/22), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 13 (delta 6), reused 13 (delta 6), pack-reused 0 (from 0)
Unpacking objects: 100% (13/13), 229.96 KiB | 445.00 KiB/s, done.
From github.com:{ユーザー名}/{リポ名}
155b295..540794e main -> origin/main
Updating 155b295..540794e
Fast-forward
blog/static/blog/aurora-trim.jpg | Bin 0 -> 230786 bytes
blog/static/blog/jumbotron-bgimage.css | 9 ----
blog/static/blog/style.css | 14 ++++++
blog/static/blog/whitebear.ico | Bin 0 -> 9662 bytes
blog/templates/blog/base.html | 88 +++++++++++++++++++--------------
blog/templates/blog/post_detail.html | 4 +-
blog/templates/blog/post_list.html | 2 +-
7 files changed, 68 insertions(+), 49 deletions(-)
create mode 100644 blog/static/blog/aurora-trim.jpg
delete mode 100644 blog/static/blog/jumbotron-bgimage.css
create mode 100644 blog/static/blog/style.css
create mode 100644 blog/static/blog/whitebear.ico
無事にできた！！
Gunicornを再起動
sudo systemctl restart gunicorn
自分のパスワードを求められ、入力したら無事成功！
サイトを見たら文字などは更新されているが、見出しのオーロラ画像が空になっている
ので、最後に静的ファイルの処理のためのコレクトスタティック
(awsmyblogenv) {ユーザー名}@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ python3.9 manage.py collectstatic
You have requested to collect static files at the destination
location as specified in your settings:
/home/{ユーザー名}/pyprojects/DjangoMyBlog/static
This will overwrite existing files!
Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel:
なんか脅しが出たがyesでいく
Type 'yes' to continue, or 'no' to cancel: yes
3 static files copied to '/home/{ユーザー名}/pyprojects/DjangoMyBlog/static', 135 unmodified.
(awsmyblogenv) {ユーザー名}@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$
無事に画像も表示された！
久々の本番環境へのデプロイ、、時間が経っていることで色々エラーもあったけど何とか無事おわったーー！！！
前に勉強した時から時間は経っているものの、やはり当時、悩んで調べて解決した経験は無駄になっておらず、
前よりも短期間で正解にたどり着けるようになったと感じる
これからも毎日改善して知識をモリモリつけるぞー！
