Как исправить проект Django, развернутый в AWS EC2, но не работающий CSS и photos

#python #css #django #image #amazon-web-services

#python #css #django #изображение #amazon-веб-сервисы

Вопрос:

Я разработал свой проект на localhost, все работает. Затем я перенес проект на github и, наконец, клонировал его на моем сервере AWS EC2 Ubuntu. Это общедоступный IP-адрес сайта:http://3.16.1.224 . На указанном общедоступном IP отображается все мое содержимое, за исключением изображений и css. Я попытался войти в панель администратора, но то же самое, без css и изображений.

Моя структура папок такая:

 jangooCMS
 accounts  /* an app for user creation */
 articles  /* an app for article creation */
 assets    
   logo-jangoo.png
 db.sqlite3
 jangooCMS  /* my main app */
   settings.py
   urls.py
   views.py
   wsgi.py
 manage.py
 media   /* all the articles images inside here */
   4-kitties-low.jpg
 requirements.txt
 templates
   base-layout.html

Now my base-layout.html have this on top:
    {% load static from staticfiles %}

  

Теперь перейдем к моему AWS, моему settings.py ниже:

 STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'assets'),
)

MEDIA_URL = '/media/'

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

STATIC_ROOT = os.path.join(BASE_DIR, "assets/")

  

Пожалуйста, помогите .. я впервые публикую здесь. Спасибо!

это инструкция, которой я следовал при развертывании моего проекта с github на AWS EC2:

 cd Downloads/
mv blogoo.pem ~/Desktop/
cd ..
cd desktop

chmod

ssh

yes

sudo apt-get update
sudo apt-get install python3-pip python3-dev nginx git

Y

sudo apt-get update
sudo pip3 install virtualenv 
git clone https://github.com/madonnadevt/jangooCMS.git
cd jangooCMS
virtualenv venv
source venv/bin/activate
pip3 install -r requirements.txt
pip3 install django bcrypt django-extensions
pip3 install gunicorn
cd jangooCMS
sudo vim settings.py


# Inside settings.py modify these lines allowed host public IP address I for INSERT

i


ALLOWED_HOSTS = ['3.16.1.224']

# add the line below to the bottom of the file

STATIC_ROOT = os.path.join(BASE_DIR, "assets/")

Save your changes and quit. ESC :wq

cd .. 
python manage.py collectstatic
gunicorn --bind 0.0.0.0:8000 jangooCMS.wsgi:application

ctrl c

sudo vim /etc/systemd/system/gunicorn.service

i

[Unit]
Description=gunicorn daemon
After=network.target
[Service]
User=ubuntu
Group=www-data
WorkingDirectory=/home/ubuntu/jangooCMS
ExecStart=/home/ubuntu/jangooCMS/venv/bin/gunicorn --workers 3 --bind unix:/home/ubuntu/jangooCMS/jangooCMS.sock jangooCMS.wsgi:application
[Install]
WantedBy=multi-user.target

ESC :wq

deactivate

(directory should be in ubuntu)
sudo systemctl daemon-reload
sudo systemctl start gunicorn
sudo systemctl enable gunicorn
sudo vim /etc/nginx/sites-available/jangooCMS

i

server {
  listen 80;
  server_name 3.16.1.224;
  location = /favicon.ico { access_log off; log_not_found off; }
  location /static/ {
      root /home/ubuntu/jangooCMS;
  }
  location / {
      include proxy_params;
      proxy_pass http://unix:/home/ubuntu/jangooCMS/jangooCMS.sock;
  }
}

ESC :wq

sudo ln -s /etc/nginx/sites-available/jangooCMS /etc/nginx/sites-enabled
sudo nginx -t
sudo rm /etc/nginx/sites-enabled/default
sudo service nginx restart


  

Ответ №1:

Ваш веб-сайт запрашивает http://13.59.50.215/static/styles.css — обратите внимание на static/ путь там — и он его не находит. Это потому, что вы объявили имя папки как assets в вашем settings.py :

 STATIC_ROOT = os.path.join(BASE_DIR, "assets/")
  

И в конфигурации nGinx вы ссылаетесь на это как static/

  location /static/ {
  root /home/ubuntu/jangooCMS;
 }
  

Итак, чтобы это исправить, гораздо предпочтительнее использовать

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

Комментарии:

1. спасибо @foobarna! Это работает для моих изображений CSS и логотипа, которые хранятся в статической папке. Но изображения из моей папки media, похоже, не работают, эти изображения я использую для содержимого моей статьи.. Пожалуйста, помогите.

2. Для того, чтобы это заработало, вам необходимо выполнить процесс загрузки изображений. Вы не можете просто поместить их в папку «media» и работать. Если вы этого хотите, поместите их в каталог «asset» и запустите collect static, затем используйте URL с «…/ static /my-img.png».