#◆udemyの教材
本記事を作成するにあたって、参考にしたudemyの教材は以下のものになります。
これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座（SAA-C02試験対応版）
https://www.udemy.com/share/101WKk/
#◆本記事の内容
udemyにてAWS S3がどういうものかを理解しました。
そこで、簡単なWebサイトを作り、AWS S3と連携させます。
#◆備忘録
以下のサイトを参考に作業を行いました。
https://simpleisbetterthancomplex.com/tutorial/2017/08/01/how-to-setup-amazon-s3-in-a-django-project.html
https://blog.narito.ninja/detail/27
#◆AWS S3の準備
S3のバケットを作成し、公開としました。
以下、参照
https://simpleisbetterthancomplex.com/tutorial/2017/08/01/how-to-setup-amazon-s3-in-a-django-project.html
#◆djangoの準備
以下を実行します。
pip install django-storages
pip install boto3
#◆設定ファイルの変更
setting.pyに追記する。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
~~~~
'storages',
]
settings.pyに以下を追記。
#◆共通の設定
AWS_ACCESS_KEY_ID = 'メモしたアクセスキー'
AWS_SECRET_ACCESS_KEY = 'メモしたシークレットアクセスキー'
AWS_STORAGE_BUCKET_NAME = 'narito-blog'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
AWS_S3_OBJECT_PARAMETERS = {
'CacheControl': 'max-age=86400', # 1日はそのキャッシュを使う
}
# ◆静的ファイルの設定
AWS_LOCATION = 'static'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
# ◆メディアファイルの設定。
DEFAULT_FILE_STORAGE = '[プロジェクト名].backends.MediaStorage'
上記の設定にした理由は以下の理由です。
- /staticと/mediaを別々のURLとして配信するため
- 静的ファイルとメディアファイルで同名ファイルがあった時に、挙動を変えるため
#◆storageクラスを作る
settings.pyと同じ階層にbackends.pyを作る。
#◆時刻のずれ
AWSの時刻とDockerコンテナ内の時刻がずれており、静的ファイルのやりとりができませんでした。
そこで以下コマンドを実行し、Dockerコンテナ内の時刻を正常に戻しました。
# hwclock -s
# date
Sat Jan 30 21:29:46 JST 2021
#◆最終的な階層
app/
|-- app/
| |-- static/
| | |-- css/
| | | +-- app.css
| | +-- img/
| | +-- thumbs-up.png
| |-- templates/
| | +-- home.html
| |-- __init__.py
| |-- settings.py
| |-- urls.py
| +-- wsgi.py
+-- manage.py
#◆htmlファイル
{% load static%}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>S3 Example Static only</title>
<link rel="stylesheet" type="text/css" href="{% 'css/app.css' %}"
</head>
<body>
<header>
<h1>S3 Example Static Only</h1>
</header>
<main>
<img src="{% static 'img/thumbs-up.png' %}">
<h2>It's Working.</h2>
</main>
<footer>
</footer>
</body>
</html>
#◆静的ファイルをAWS S3にアップロード
以下を実行することでローカルにあった静的ファイルをAWS S3にアップロードします。
python manage.py collectstatic
静的ファイルが正常にアップロードされています。
#◆Webブラウザでの表示
AWS S3上の画像を表示、cssが適用されていることを確認出来ました。
