質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

解決済

1回答

2915閲覧

DjangoプロジェクトをEC2にデプロイしたがstaticファイルが読み込まれない

te_ff

総合スコア13

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

0クリップ

投稿2020/12/10 02:04

編集2020/12/10 02:19

前提・実現したいこと

DjangoプロジェクトをAWS EC2にデプロイしたのですが、管理画面、作成ページともにstaticファイルが読み込まれなくなりました。
読み込み方を教えていただきたいです。
Gunicorn、nginxを利用しています。

python3 manage.py findstatic . (作成したstaticが読み込まれていない)

Found '.' here: /home/ec2-user/.local/lib/python3.7/site-packages/django/contrib/admin/static

Choromeコンソールエラー

Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Refused to apply style from 'http://”AWSパブリックIP”/static/css/base.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

var/log/nginx/error.log

[error] 8720#0: *122 open() "/static/css/base.css" failed (2: No such file or directory), client: 118.238.216.126, server: ”AWSパブリックIP”, request: "GET /static/css/base.css HTTP/1.1", host: "”AWSパブリックIP”", referrer: "http://”AWSパブリックIP”/"

ファイル構成

myproject/ config/ __pycache__ __init__.py asgi.py settings.py urls.py wsgi.py static/ css images js myapp/ __pycache__ migrations __init__.py admin.py apps.py forms.py models.py tests.py urls.py views.py templates/ myapp/ base.html index.html

該当のソースコード

Python

1[config/settings.py] 2DEBUG = False 3 4STATIC_URL = '/static/' 5STATIC_ROOT = os.path.join(BASE_DIR, 'static')
[/etc/nginx/nginx.conf] server { #listen 80; #listen [::]:80; #server_name _; #root /usr/share/nginx/html; listen 80; server_name ”AWSパブリックIP” client_max_body_size 4G; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_redirect off; proxy_pass http://app_server; } location /static/ { alias /home/ec2-user/myproject/static/; } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } }

HTML

1[base.html] 2<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">

試したこと

・collectstaticでAdminのCssを上記CSSに集約
・nginx.confのaliasをmyproject/static/に変更
・nginx再起動
・HTMLコードCSSlinkにtype="text/css"追記
・ec2-userにパーミッションを振る(sudo chmod o+x /home/ec2-user/)

バージョン

gunicorn (version 20.0.4) nginx/1.18.0 Python 3.7.9 pip 20.3.1

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

URLでポート指定していたことによりデザインが読み込まれなくなっていたようです。
http://”AWSパブリックIP”:8000/ → http://”AWSパブリックIP”/
で解決しました。

投稿2020/12/10 02:42

te_ff

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問