Urumos Blog

文系独学ITエンジニア

【その10】静的ファイル配信【初めてのAWSデプロイ編】

投稿者: urumos

作成日: 2022年5月29日17:23

更新日: 2022年5月29日22:34

カテゴリ: 初めてのAWSデプロイ

タグ:


最後に静的ファイル(画像、CSS、JavaScriptなど)配信

 python3.9 manage.py collectstatic
 このコマンドで、予め作っておいた/var/www/DjangoMyBlog/にstaticディレクトリが作られ、
 その中に静的ファイルがコピーされる??
 
まず、現状のディレクトリを見てみる
(awsmyblogenv) XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ ls -la
total 228
drwxrwxr-x 7 XXX XXX 4096 Apr 15 17:27 .
drwxrwxr-x 3 XXX XXX 4096 Feb 11 17:51 ..
drwxrwxr-x 5 XXX XXX 4096 Feb 5 17:00 .MyBlogEnv
-rw-rw-r-- 1 XXX XXX 162 Feb 18 21:43 .env
drwxrwxr-x 8 XXX XXX 4096 Feb 17 23:59 .git
-rw-rw-r-- 1 XXX XXX 86 Feb 17 23:59 .gitignore
drwxrwxr-x 6 XXX XXX 4096 Feb 12 15:09 blog
drwxrwxr-x 3 XXX XXX 4096 Feb 17 23:59 config
srwxrwxrwx 1 XXX www-data 0 Apr 15 17:27 config.sock
-rw-r--r-- 1 XXX XXX 188416 Feb 14 09:28 db.sqlite3
-rw-rw-r-- 1 XXX XXX 684 Feb 11 17:38 manage.py
-rw-rw-r-- 1 XXX XXX 156 Feb 11 17:38 requirements.txt
drwxrwxr-x 3 XXX XXX 4096 Feb 11 17:38 static

staticはgitにもあがってるから当然Ubuntu側にもディレクトリができてる。
前回警告が出てやめたけど、取りあえずやってみる

python3.9 manage.py collectstatic

同じ警告が出た。
You have requested to collect static files at the destination
location as specified in your settings.

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
Traceback (most recent call last):
File "/home/XXX/pyprojects/DjangoMyBlog/manage.py", line 22, in <module>
main()
File "/home/XXX/pyprojects/DjangoMyBlog/manage.py", line 18, in main
execute_from_command_line(sys.argv)
File "/home/XXX/.local/lib/python3.9/site-packages/django/core/management/__init__.py", line 401, in execute_from_command_line
utility.execute()
File "/home/XXX/.local/lib/python3.9/site-packages/django/core/management/__init__.py", line 395, in execute
self.fetch_command(subcommand).run_from_argv(self.argv)
File "/home/XXX/.local/lib/python3.9/site-packages/django/core/management/base.py", line 330, in run_from_argv
self.execute(*args, **cmd_options)
File "/home/XXX/.local/lib/python3.9/site-packages/django/core/management/base.py", line 371, in execute
output = self.handle(*args, **options)
File "/home/XXX/.local/lib/python3.9/site-packages/django/contrib/staticfiles/management/commands/collectstatic.py", line 194, in handle
collected = self.collect()
File "/home/XXX/.local/lib/python3.9/site-packages/django/contrib/staticfiles/management/commands/collectstatic.py", line 118, in collect
handler(path, prefixed_path, storage)
File "/home/XXX/.local/lib/python3.9/site-packages/django/contrib/staticfiles/management/commands/collectstatic.py", line 345, in copy_file
if not self.delete_file(path, prefixed_path, source_storage):
File "/home/XXX/.local/lib/python3.9/site-packages/django/contrib/staticfiles/management/commands/collectstatic.py", line 255, in delete_file
if self.storage.exists(prefixed_path):
File "/home/XXX/.local/lib/python3.9/site-packages/django/core/files/storage.py", line 311, in exists
return os.path.exists(self.path(name))
File "/home/XXX/.local/lib/python3.9/site-packages/django/contrib/staticfiles/storage.py", line 38, in path
raise ImproperlyConfigured("You're using the staticfiles app "
django.core.exceptions.ImproperlyConfigured: You're using the staticfiles app without having set the STATIC_ROOT setting to a filesystem path.


settings.pyのSTATIC_ROOTの設定が駄目みたい。
丁寧解説の記事にならい、settings.pyにSTATIC_ROOT を追加する

再度collectstaticする

すると下記のエラーが出た。
SystemCheckError: System check identified some issues:

ERRORS:
?: (staticfiles.E002) The STATICFILES_DIRS setting should not contain the STATIC_ROOT setting.

エラー文で調べるとるSTATICFILES_DIRS箇所をコメントアウトすれば解決するらしい。
そんな対症療法でいいのか?
もう少し調べる

https://7me.nobiki.com/2017/django-collectstatic.html
ここに下記のように書いてあった

「STATIC_ROOTには、このあと実行する「manage.py collectstaticを実行した時に、staticファイルが出力されるパス」を記述。
これが無い場合、You're using the staticfiles app without having set the STATIC_ROOT setting to a filesystem pathというエラーが出る。
STATICFILES_DIRSには、同じく「manage.py collectstaticを実行した時に、STATIC_ROOTに追加で出力するファイルがあるパス」を記述。
ここに指定したパスが、STATIC_ROOTと重複している場合、The STATICFILES_DIRS setting should not contain the STATIC_ROOT settingというエラーが出る。
次に、.gitignoreに、STATIC_ROOTにあるファイルを除外するように指定。」

https://stackoverflow.com/questions/27213752/collecting-staticfiles-throws-improperlyconfigured
こちらには下記のように書いてあった

I know it is an old post but this solution has worked for me and might help someone else.

In settings.py:

if DEBUG:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
else:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

これはnoauto-nolifeさんの記事の設定方法と似ていて、デバッグの場合はSTATICFILES_DIRSに出力し、
デバッグではない(本番)場合はSTATIC_ROOTに出力する、みたいなことらしい。

取りあえず今はコメントアウトしてみよう。

(awsmyblogenv) XXX@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/XXX/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

132 static files copied to '/home/XXX/pyprojects/DjangoMyBlog/static'.

成功!
管理画面のCSSがきいた!


一応これでデプロイ完成!!!!!!!!


長かった。。。頑張ったぞ自分。



次のSSL化の前に一度、ローカルでコード編集⇒gitにpush⇒AWSにデプロイの流れをやってみよう

と、ここで、上のSTATICFILES_DIRSのところをコメントアウトした状態だと逆にローカル側で不具合発生するのではないかと気づいた。

取りあえずWebサーバー側からgithubにpushしてみる。
Webサーバー側からpushするのは初だ。緊張。

git add .して、git statusをしたら下記が出た。

deleted: .vscode/settings.json
modified: config/settings.py
new file: static/admin/css/autocomplete.css
new file: static/admin/css/base.css
。。以降static/adminのものがずらっと、、

あれ、まずvscodeは削除したんだっけ?記憶があいまいだ。
でもローカル以外ではいらんよな。
多分あとからgitignoreに追加したんだ。
でもリモリポに残ってるからローカルからキャッシュを削除して再度pushしよう。

パワーシェルから
git rm -r --cached .vscode
git commit -m ".vscodeの削除"
git push origin main
無事成功!

次に、setting.pyは修正したからOK

最後の管理画面用の静的ファイルだが、ローカルではどうなってたんだっけ?静的ファイルはどこに?

調べたら下記のコマンドで現在どのようにdjangoが静的ファイルの格納ディレクトリと認識しているのか把握することができるとのこと

python manage.py findstatic .

早速ローカルとサーバーでやってみる

サーバー
(awsmyblogenv) XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ python3.9 manage.py findstatic .
Found '.' here:
/home/XXX/.local/lib/python3.9/site-packages/django/contrib/admin/static

ローカル
(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> python manage.py findstatic .
Found '.' here:
C:\Dev\DjangoMyBlog\static
C:\Dev\DjangoMyBlog\.MyBlogEnv\Lib\site-packages\django\contrib\admin\static

site-packageに入ってるみたい。

このあたりの事情を整理しよう

まず、ビギナーズブックを読み返してみたところ、collectstaticという言葉自体出てこなかった

https://office54.net/python/django/css-javascript-static
このサイトによると
「本番環境のWebサーバーでは、ローカル開発環境とは異なり、静的ファイルの保存場所を1つにまとめる必要があります。」とのこと。
そうか、collectstaticは本番環境だけの話なのね。

「デプロイ(本番環境)時に、collectstaticコマンドを実行して、別々の静的ファイルをsettings.pyで指定された場所に集約する。」

静的ファイルに関するsettings.pyの項目は下記の5つとのこと。
STATIC_URL
STATIC_ROOT
STATICFILES_DIRS
STATICFILES_STORAGE
STATICFILES_FINDERS

・STATIC_URL
Webサーバーが静的ファイルを見に行く場所を指定。
言い換えると「配信用のフォルダ」を指定している。
STATIC_URL = '/static/'
基本はこのデフォルトのまま。

・STATIC_ROOT
python manage.py collectstaticを実行することで、指定先フォルダに静的ファイルがコピーされる。
本番環境のみで使用。

・STATICFILES_DIRS
アプリケーションやそれ以外のファイルから共通した静的ファイルを利用したい場合に指定する。
つまり共通して利用したい静的ファイルを、指定先に保存することで、すべてのアプリケーションなどで利用できる。
デフォルトではSTATICFILES_DIRSの記載はなし。
STATICFILES_DIRS指定の静的ファイルは、STATIC_ROOTにコピーされる。
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]

・STATICFILES_STORAGE
STATICFILES_STORAGEには、CDNやAmazonS3を利用している場合に、APIを指定。


なるほど、collectstaticをするとSTATICFILES_DIRSもSTATIC_ROOTにコピーされるから、
この2者の指定先が一緒だとダブルコピーになっちゃうってことね。

で、STATICFILES_DIRSはデフォルトでは無しだから。それをコメントアウトすれば問題はなくなったと。

でもそもそもなんでローカルではSTATICFILES_DIRSを作ったんだっけ?

自分のローカルでの毎日改善ブログを見返す。

3日目の記事だ。

どうやらblogディレクトリ内にstaticディレクトリを作っているつもりが、
プロジェクトディレクトリに作ってしまい、
それで迷ったっぽい。
当時参考にした記事
https://qiita.com/saira/items/a1c565c4a2eace268a07

大体理解したので状況を整理しよう。

取りあえず今は開発の一連の流れをやってみたい。
でもウェブサーバー側でsettings.pyのSTATICFILES_DIRS部分をコメントアウトしてしまったので大丈夫か。

まだウェブサーバー側からpushしていない状態(git add .してgit statusした)
まずは.vscodeをローカルで削除してリモリポにもpushしたやつをウェブサーバー側にも適用しよう。

XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ git pull
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (1/1), done.
remote: Total 2 (delta 1), reused 2 (delta 1), pack-reused 0
Unpacking objects: 100% (2/2), 220 bytes | 36.00 KiB/s, done.
From github.com:XXX/MyBlog-Django
ea85872..f849e03 main -> origin/main
Updating ea85872..f849e03
Fast-forward
.vscode/settings.json | 3 ---
1 file changed, 3 deletions(-)
delete mode 100644 .vscode/settings.json

成功かな

git statusで確認

.envXXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ 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)
modified: config/settings.py
new file: static/admin/css/autocomplete.css
new file: static/admin/css/base.css
(中略)
new file: static/admin/js/vendor/select2/select2.full.min.js
new file: static/admin/js/vendor/xregexp/LICENSE.txt
new file: static/admin/js/vendor/xregexp/xregexp.js
new file: static/admin/js/vendor/xregexp/xregexp.min.js

前あった.vscodeが消えてる。OK。

さて、この状態でウェブサーバー側からpushしたらどうなるか。
現在のウェブサーバー側のstaticディレクトリは下記の状態


XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ ls -la static
total 16
drwxrwxr-x 4 XXX XXX 4096 Apr 16 00:47 .
drwxrwxr-x 7 XXX XXX 4096 Apr 15 17:27 ..
drwxrwxr-x 6 XXX XXX 4096 Apr 16 00:47 admin
drwxrwxr-x 2 XXX XXX 4096 Feb 11 17:38 blog

XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ ls -la static/blog
total 100
drwxrwxr-x 2 XXX XXX 4096 Feb 11 17:38 .
drwxrwxr-x 4 XXX XXX 4096 Apr 16 00:47 ..
-rw-rw-r-- 1 XXX XXX 65694 Feb 11 17:38 document.png
-rw-rw-r-- 1 XXX XXX 21656 Feb 11 17:38 whitebear.jpg

XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ ls -la static/admin
total 24
drwxrwxr-x 6 XXX XXX 4096 Apr 16 00:47 .
drwxrwxr-x 4 XXX XXX 4096 Apr 16 00:47 ..
drwxrwxr-x 3 XXX XXX 4096 Apr 16 00:47 css
drwxrwxr-x 2 XXX XXX 4096 Apr 16 00:47 fonts
drwxrwxr-x 3 XXX XXX 4096 Apr 16 00:47 img
drwxrwxr-x 4 XXX XXX 4096 Apr 16 00:47 js

adminの下の各フォルダに上のずらっと並んだ静的ファイルが入っているのだろう。

この状態でpushし、ローカルでpullしたら、
①ローカルのstaticディレクトリにadmin用の静的ファイルが来てしまう。
②ローカルのsettings.pyのyのSTATICFILES_DIRS部分がコメントアウトされてしまう。

なんだかちぐはぐな感じなので、ローカル側とウェブサーバー側の静的ファイルの扱い分けをどうするか考える。


①ウェブサーバー側にて、取りあえずgit addの取り消し「git reset HEAD」
②static/adminをディレクトリごと削除
③settings.pyのSTATICFILES_DIRS部分のコメントアウトを解除。
これで恐らくローカルと同じ状況に戻ったはず。
今後ウェブサーバー側でpythonコードをいじるのはもうやめよう。

次にローカルにて
④blogディレクトリ内に「static」ディレクトリを作成し、そこにしろくまちゃんとIDカード画像を移動
ここで一応しろくまちゃんが表示されるか確認
⑤プロジェクトディレクトリ直下のstaticディレクトリは削除し、settings.pyのSTATICFILES_DIRS部分も削除

.gitignoreにstaticを追加

⑥githubにpush

最後にウェブサーバー側にて
⑦git pull
これでsettings.pyが更新される

⑧collectstatic
これで/blog/staticのしろくま達、及びadmin関係の静的ファイルが/staticに自動コピーされる。
管理画面のCSSが効いているか確認


この流れで実際やってみよう


インデックス取り消し
XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ git reset HEAD
Unstaged changes after reset:
M config/settings.py

ステータス確認
XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified: config/settings.py

Untracked files:
(use "git add <file>..." to include in what will be committed)
static/admin/

no changes added to commit (use "git add" and/or "git commit -a")

管理画面用の静的ファイルを削除
XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ rm -r static/admin

削除の確認
XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ ls -la static
total 12
drwxrwxr-x 3 XXX XXX 4096 Apr 25 02:13 .
drwxrwxr-x 7 XXX XXX 4096 Apr 15 17:27 ..
drwxrwxr-x 2 XXX XXX 4096 Feb 11 17:38 blog

ステータス確認
XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified: config/settings.py

no changes added to commit (use "git add" and/or "git commit -a")


ここまで順調!
次にsetting.pyを元に戻したいが、まずはサーバー側でvimで手動で修正したところを直してみる。
現状を確認
XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ cat config/settings.py
"""
Django settings for config project.

Generated by 'django-admin startproject' using Django 3.1.5.

For more information on this file, see
https://docs.djangoproject.com/en/3.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.1/ref/settings/
"""

from pathlib import Path
import environ
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/

env = environ.Env()
env.read_env(os.path.join(BASE_DIR,'.env'))

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = env('SECRET_KEY')

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = env('DEBUG')

ALLOWED_HOSTS = env.list('ALLOWED_HOSTS')


# Application definition

INSTALLED_APPS = [
'blog.apps.BlogConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'config.urls'

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

WSGI_APPLICATION = 'config.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases

DATABASES = {
'default': env.db(),
}


# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]


# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/

# ** 変更 **
LANGUAGE_CODE = 'ja'

# ** 変更 **
TIME_ZONE = 'Asia/Tokyo'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

#STATICFILES_DIRS = [
# os.path.join(BASE_DIR, "static")
#]

あれ、修正したのはコメントアウトしたところだけだったかな?

コメントアウトを解除して保存。
再度ステータス確認
XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified: config/settings.py

no changes added to commit (use "git add" and/or "git commit -a")

まだ修正ありになってる。
他にも修正したところあったか?
githubのsettings.pyと比較してみると

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

が無かった。
これも削除して保存して再度ステータス確認してみる。
同じエラー。

もしかして手動で元に戻しても変更あり扱いになるんかな?
変更取り消しのやり方を検索。
// 作業ツリーの特定のファイルをインデックスの状態に戻す
git checkout <FILE_NAME>
// 作業ツリーをインデックスの状態に戻す
git checkout .
とのこと。

今回は全て戻すでokなのでgit checkout .を実行
成功したっぽい

再度ステータス確認
XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ git status
On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean

見慣れたやつでてきた!
これで全部元通り!


次にローカルにてblogディレクトリ内に「static」ディレクトリを作成し、そこにしろくまちゃんとIDカード画像を移動
ここで一応しろくまちゃんが表示されるか確認⇒みれた!

プロジェクトディレクトリ直下のstaticディレクトリは削除し、settings.pyのSTATICFILES_DIRS部分も削除
gitignoreにstaticを追加
(思いついて下記も実施)
・サーバー側で削除したSTATIC_ROOT = os.path.join(BASE_DIR, 'static')を追加。
・当時間違えて追加した下記を削除
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'


githubにpush
(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> git add .
(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> 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)
modified: .gitignore
modified: config/settings.py
deleted: static/blog/document.png
deleted: static/blog/whitebear.jpg

(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> git commit -m "静的ファイルの整理"
[main a1a48b7] 静的ファイルの整理
4 files changed, 3 insertions(+), 9 deletions(-)
delete mode 100644 static/blog/document.png
delete mode 100644 static/blog/whitebear.jpg
(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> git push origin main
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 8 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 560 bytes | 560.00 KiB/s, done.
Total 5 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/XXX/MyBlog-Django.git
f849e03..a1a48b7 main -> main

Githubを確認してみる。
するとblog内にstaticが見当たらない。
プロジェクトディレクトリ直下じゃなくてもgitignoreが効いてしまうのか、、
しかたないのでgitignoreからstaticを削除し、再度push

(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> git add .
(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> 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)
modified: .gitignore
new file: blog/static/blog/document.png
new file: blog/static/blog/whitebear.jpg

(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> git commit -m "gitignoreに追加したstaticを削除"
[main 75db36b] gitignoreに追加したstaticを削除
3 files changed, 1 insertion(+), 2 deletions(-)
create mode 100644 blog/static/blog/document.png
create mode 100644 blog/static/blog/whitebear.jpg
(.MyBlogEnv) PS C:\Dev\DjangoMyBlog> git push origin main
Enumerating objects: 11, done.
Counting objects: 100% (11/11), done.
Delta compression using up to 8 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (8/8), 79.41 KiB | 19.85 MiB/s, done.
Total 8 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/XXX/MyBlog-Django.git
a1a48b7..75db36b main -> main

これでOK。

最後にウェブサーバー側にて
⑦git pull

XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ git pull
remote: Enumerating objects: 13, done.
remote: Counting objects: 100% (13/13), done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 8 (delta 4), reused 8 (delta 4), pack-reused 0
Unpacking objects: 100% (8/8), 990 bytes | 198.00 KiB/s, done.
From github.com:XXX/MyBlog-Django
f849e03..75db36b main -> origin/main
Updating f849e03..75db36b
Fast-forward
{static => blog/static}/blog/document.png | Bin
{static => blog/static}/blog/whitebear.jpg | Bin
config/settings.py | 9 +--------
3 files changed, 1 insertion(+), 8 deletions(-)
rename {static => blog/static}/blog/document.png (100%)
rename {static => blog/static}/blog/whitebear.jpg (100%)


これでsettings.pyが更新された。

サイトが見れるか確認。
見れる!

管理画面のCSSが効いているか確認
効いていない。

collectstaticする

XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ python3.9 manage.py collectstatic

134 static files copied to '/home/XXX/pyprojects/DjangoMyBlog/static'.

これで/blog/staticのしろくま達、及びadmin関係の静的ファイルが/staticに自動コピーされるはず


XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ ls -la static
total 16
drwxrwxr-x 4 XXX XXX 4096 Apr 25 03:34 .
drwxrwxr-x 7 XXX XXX 4096 Apr 25 03:34 ..
drwxrwxr-x 6 XXX XXX 4096 Apr 25 03:34 admin
drwxrwxr-x 2 XXX XXX 4096 Apr 25 03:34 blog

XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ ls -la static/admin
total 24
drwxrwxr-x 6 XXX XXX 4096 Apr 25 03:34 .
drwxrwxr-x 4 XXX XXX 4096 Apr 25 03:34 ..
drwxrwxr-x 3 XXX XXX 4096 Apr 25 03:34 css
drwxrwxr-x 2 XXX XXX 4096 Apr 25 03:34 fonts
drwxrwxr-x 3 XXX XXX 4096 Apr 25 03:34 img
drwxrwxr-x 4 XXX XXX 4096 Apr 25 03:34 js

XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$ ls -la static/blog
total 100
drwxrwxr-x 2 XXX XXX 4096 Apr 25 03:34 .
drwxrwxr-x 4 XXX XXX 4096 Apr 25 03:34 ..
-rw-r--r-- 1 XXX XXX 65694 Apr 25 03:34 document.png
-rw-r--r-- 1 XXX XXX 21656 Apr 25 03:34 whitebear.jpg
XXX@ip-10-0-1-10:~/pyprojects/DjangoMyBlog$

された!成功!

管理画面のCSSが効いているか確認
効いた!!!!


ひとつ気になるのはstaticをgitignoreに追加できないので、
ウェブサーバー側からpushが出来ないことだ。
基本やらないもんなのかな。

でも取りあえずローカルで開発してデプロイする流れは分かった!
明日からまた毎日改善でどんどん開発していこう!
取りあえずもう深夜3:45なので寝るzzz

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

ということでこれにて「初めてのAWSデプロイ編」はこれにて終了!^^
コメントする

このブログについて

白くまちゃん

文系が社内のKintone導入をきっかけにITを学び始め、ITエンジニアになるまでの記録。