I've deployed a django webiste in AWS ec2 with the help of this digitalocean blog but the static files like css and javascripts are not loading after deployment.
This is my django static code:
STATIC_URL = '/static/'
MEDIA_URL = 'media/'
MEDIA_ROOT = 'media/'
STATIC_ROOT = 'staticfiles/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
and this is my nginx code:
server {
listen 80;
server_name mydomain.com;
location = /favicon.ico { access_log off; log_not_found off; }
location /staticfiles/ {
root /home/sammy/project/myproject;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
}
And I'm using AWS S3 to host my static files.
Related
The user interface is working well, and all CSS styling and static files are served correctly, but the admin interface is missing CSS styling. I looked at similar posts but in those posts people had the issue with both the user and the admin interface. My issue is only with the admin interface.
Please see my static file settings below from settings.py:
STATIC_URL = '/static/'
#Location of static files
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
And this is my nginx configuration:
server {
listen 80;
server_name MY_SERVER_IP;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /home/MYUSERNAME/myproject;
}
location /media/ {
root /home/MYUSERNAME/myproject;
}
I already executed python manage.py collectstatic on the server and got this message:
0 static files copied to '/home/MYUSERNAME/myproject/staticfiles', 255 unmodified.
I restarted nginx after that and also tried emptying my browser cache, but the issue persisted.
More info as requested by #Omar Siddiqui.
Using Django 3.2
My mysite/urls.py contains:
from django.contrib import admin
from django.urls import path, include
# Imports to configure media files for summernote editor
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('qa.urls')),
path('summernote/', include('django_summernote.urls')),
path('chatbot/', include('chatbot.urls')),
]
# Enable media files for summernote editor
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
Could you please try below steps and let me know if it's working or not?
Apply below changes in settings.py file:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Remove below line from your settings.py:
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
Execute below command in production:
python manage.py collectstatic
Update nginx file like below one:
server {
listen 80;
server_name MY_SERVER_IP;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
autoindex on;
autoindex_exact_size off;
root /home/MYUSERNAME/myproject;
}
location /media/ {
autoindex on;
autoindex_exact_size off;
root /home/MYUSERNAME/myproject;
}
}
Explanations:
STATIC_ROOT is the folder where static files will be stored after
using python manage.py collectstatic
STATICFILES_DIRS is the list of folders where django will search for additional static files aside from the static folder of each app installed.
In this case our concern was Admin related CSS files that why we use STATIC_ROOT instead of STATICFILES_DIRS
Try changing STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') to:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Then re-run python manage.py collectstatic. This has worked in the past for some people
Try passing an alias to the static location in nginx, like so:
location /static/ {
alias /home/MYUSERNAME/myproject/staticfiles/
}
Don't forget to restart nginx afterwards.
My S3 Dir
My Bucket Name > static > frontend > images > [hash-name].png
My Bucket Name > static > frontend > main.js
My nginx project.conf
server {
listen 80;
server_name *.compute.amazonaws.com *.***.com;
charset utf-8;
client_max_body_size 128M;
# Buffer
client_body_buffer_size 4096K;
if ($http_x_forwarded_proto = 'http'){
return 301 https://$host$request_uri;
}
location / {
uwsgi_pass unix:///tmp/****.sock;
include uwsgi_params;
}
location /static/ {
alias https://****.s3.ap-southeast-1.amazonaws.com/static/;
}
location /media/ {
alias https://****.s3-ap-southeast-1.amazonaws.com/media/;
}
}
settings.py
#.config_secret/settings_common.json = AWS Key, info
CONFIG_SECRET_DIR = os.path.join(ROOT_DIR, '.config_secret')
CONFIG_SETTINGS_COMMON_FILE = os.path.join(CONFIG_SECRET_DIR, 'settings_common.json')
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
STATIC_DIR,
]
# STATIC_ROOT = os.path.join(ROOT_DIR, '.static_root')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
# S3 Storage
DEFAULT_FILE_STORAGE = '****.storages.MediaStorage'
STATICFILES_STORAGE = '****.storages.StaticStorage'
MEDIAFILES_LOCATION = 'media'
STATICFILES_LOCATION = 'static'
# AWS Access
config_secret = json.loads(open(CONFIG_SETTINGS_COMMON_FILE).read())
AWS_ACCESS_KEY_ID = config_secret['aws']['access_key_id']
AWS_SECRET_ACCESS_KEY = config_secret['aws']['secret_access_key']
AWS_STORAGE_BUCKET_NAME = config_secret['aws']['s3_bucket_name']
main.js
image.png
The structure of the project is as follows.
main.js is normally taken by s3 when confirmed by the developer tool.
However, files in the image folder are trying to get from a common address, not s3, resulting in a 404 error.
What should I do? Thank you!
webpack.config.js
output : {
publicPath: "https://****.s3.ap-southeast-1.amazonaws.com/static/frontend/"
}
I'm Fool
😂😂😂
After adding the SSL certificate, my static files do not work only in django-admin. Other files on the entire website work very well.
How can I fix this situation (preferably without brutal copying of django-admin static files to my application)?
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('app.urls', namespace='app')),
path('media/<path>/', serve,{'document_root': settings.MEDIA_ROOT}),
path('static/<path>/', serve,{'document_root': settings.STATIC_ROOT}),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, '../static/')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'app/media')
app (/etc/nginx/sites-available/app) After making changes to this file, they django-admin static file stopped working.
upstream app_server {
server unix:/home/app/run/gunicorn.sock fail_timeout=0;
}
server {
#listen 80;
# add here the ip address of your server
# or a domain pointing to that ip (like example.com or www.example.com)
listen 443 ssl;
server_name ebluedesign.online;
ssl_certificate /etc/letsencrypt/live/ebluedesign.online/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/ebluedesign.online/privkey.pem;
server_name 101.170.18.112;
keepalive_timeout 5;
client_max_body_size 4G;
access_log /home/app/logs/nginx-access.log;
error_log /home/app/logs/nginx-error.log;
location /static/ {
alias /home/app/app/app/static/;
}
# checks for static file, if not found proxy to app
location / {
try_files $uri #proxy_to_app;
}
location #proxy_to_app {
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;
}
}
server {
listen 80;
server_name ebluedesign.online;
return 301 https://$host$request_uri;
}
I have deployed a Django project on Ubuntu 16.04 with Nginx and Gunicorn. I have gotten everything, including the static files but my media files will not serve properly.
settings.py
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
models.py
resume_upload = models.FileField(blank=False, upload_to='resumes', null=True, validators=[FileExtensionValidator(allowed_extensions=['pdf']), validate_file_size])
What I have listed in /etc/nginx/sites-available/ is
server {
listen 80;
server_name website.com www.website.com ;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /home/syed/btawebsite;
}
location = /media/ {
root /home/syed/btawebsite;
}
location / {
include proxy_params;
proxy_pass http://unix:/home/syed/myproject.sock;
}
}
I would like go on the admin, click on the uploaded file and be able to view the file in the browser. Anyone have any ideas on how I can achieve this? I have verified through using the terminal and looking through the directories that the files are in fact adding to ~btawebsite/media/resumes but I am unable to view them when I click the admin url.
When I click on that url I get an error:
Not Found
The requested resource was not found on this server.
Update:
I have changed settings.py to
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static/'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
And nginx settings to
location /static/ {
alias /home/syed/btawebsite/static/;
}
location = /media/ {
alias /home/syed/btawebsite/media/;
}
Static is still working, however, media is not.
For nginx configuration, the "=" sign after location means this is the exact location match. So change your settings to
location /media/ {
root /home/syed/btawebsite;
}
and same for /static/. It's correct for the favicon. For more about the nginx location directive, check this.
i have try every configuration that i found and the static files don't get loaded, so i doesn't know what's wrong. I create the app using Pycharm.
Can someone give me a hand to fix this?
Here are the configurations.
settings.py
MEDIA_ROOT = ''
MEDIA_URL = '/Users/gcarranza/PycharmProjects/clouddemyTest/'
STATIC_ROOT = ''
STATIC_URL = '/Users/gcarranza/PycharmProjects/clouddemyTest/static/'
STATICFILES_DIRS = (
'/Users/gcarranza/PycharmProjects/clouddemyTest/static',)
nginx conf:
server {
listen 80;
server_name localhost;
location /static/ {
autoindex on;
alias /Users/gcarranza/PycharmProjects/clouddemyTest/static/;
}
location / {
proxy_pass http://127.0.0.1:8000;
}
}
Gunicorn:
gunicorn_django -b localhost:8000
You got the root and url backwards. Should be:
STATIC_ROOT = '/Users/gcarranza/PycharmProjects/clouddemyTest/static/'
STATIC_URL = '/static/'
And same for media