I am trying to deploy a Django application on Microsoft Azure.
I am using nginx + gunicorn on a Azure Virtual Machine. For serving static and media files, I have decided to use Azure Blobs available in Azure Storage.
I am using the following library to integrate a Markdown + MathJax editor in my application - django-mdeditor.
Now, this library comes with its own JS and CSS files. I am having no problem on using this library in the following scenarios -
Local Development.
Deployment on Heroku (production).
Deployment on Azure Virtual Machine using nginx + gunicorn (production). In this case, I am serving the static files using nginx as mentioned in various tutorials, such as this one.
However, as soon as I shift to Azure Storage as my storage back-end. I am getting the following errors -
Failed to load resource: the server responded with a status of 404 (The specified blob does not exist.)
codemirror.min.js:1 Failed to load resource: the server responded with a status of 404 (The specified blob does not exist.)
codemirror.min.css:1 Failed to load resource: the server responded with a status of 404 (The specified blob does not exist.)
dialog.css:1 Failed to load resource: the server responded with a status of 404 (The specified blob does not exist.)
codemirror.min.css:1 Failed to load resource: the server responded with a status of 404 (The specified blob does not exist.)
matchesonscrollbar.css:1 Failed to load resource: the server responded with a status of 404 (The specified blob does not exist.)
dialog.css:1 Failed to load resource: the server responded with a status of 404 (The specified blob does not exist.)
Except for the above few files, the remaining static files are been fetched correctly!
Upon further investigation, I found out that all the above files are been fetched from the following script - https://github.com/pylixm/django-mdeditor/blob/master/mdeditor/static/mdeditor/js/editormd.js#L549
i.e. from the following code block -
.
.
editormd.loadCSS(loadPath + "codemirror/codemirror.min");
.
.
loadPath has been assigned settings.path in the script which is equal to the value of (afaik) './lib/'.
loadCSS() is trying to fetch the file from the url -https://edumate.blob.core.windows.net/static/mdeditor/js/libcodemirror/codemirror.min.js
instead of https://edumate.blob.core.windows.net/static/mdeditor/js/lib/codemirror/codemirror.min.js.
Notice the missing / after lib in the first case. The URL generated is .../libcodemirror/.. instead of ../lib/codemirror/..!
The same is the case for all the the other JS and CSS files that are fetched using loadCSS() or loadScript() methods as shown above.
And the peculiar thing is, this deletion of / is only happening when using Azure Storage and not when using Heroku, nginx + gunicorn, or development server.
Any ideas on how to debug this?
Related
Folder structure as below:
|-root
|-pages
|-_app.tsx
|-index.tsx
|-public
|-logo.svg
|-image.png
|-image2.png
|-image3.png
When I run yarn build and yarn start in localhost, my image files can be found in the following locations:
Everything works fine if I deploy it via Vercel. However, when I tried to deploy on AWS(ECR image), only SVG files were found. Error showing
Failed to load resource: the server responded with a status of 400 ()
Also it shows "url" parameter is required when I click those image URL.
Could you please let me know what the issue is?
Edit: PNG files aren't created when deployed to AWS
I eventually found out that it was a configuration issue with Nginx.
As Nextjs Image component will send the image source path with the size through url query string, so
Accept parameters must be set for Nginx
location ~* ^/(.*) {
proxy_pass http://service_url/$1$is_args$args;
}
How can query string parameters be forwarded through a proxy_pass with nginx?
Make sure cloudfront behavior not to ignore the query string
https://github.com/vercel/next.js/issues/25121
I'm new to GCP (google cloud platform) I'm facing this problem, Backend dev created an Apache server on gcp, and then I cloned my repo on the server through VM, build it and then deployed it after following countless tutorials.. but while deploying it gives
Cloud Run error: Container failed to start. Failed to start and then listen on the port defined by the PORT environment variable.
when i go to the generated link which is https://vetution.oa.r.appspot.com/ it gives server error, I've searched a lot but I failed.
Have I done something wrong or the app.yaml file should have different configurations.
anyway here it is
runtime: nodejs12
instance_class: F2
handlers:
- url: /_nuxt
static_dir: .nuxt/dist/client
secure: always
- url: /(.*\.(gif|png|jpg|ico|txt))$
static_files: static/\1
upload: static/.*\.(gif|png|jpg|ico|txt)$
secure: always
- url: /.*
script: auto
secure: always
env_variables:
HOST: '0.0.0.0'
NODE_ENV: 'production'
And It gives me this error on deploying now
please, Help me I'm very frustrated.
The error states that, your app failed to start because it's not listening to a port as you may not have configure it to your app. This topic is answered on this Stackoverflow thread.
You mentioned that you followed countless tutorials, it is possible that you are using Cloud Run and App Engine interchangeably, which are 2 separate serverless products. Please evaluate on your end which platform is right for your app and use case.
Currently, there is not much debugging info to your question but either way, make sure that you configure your app's port to listen to incoming request/s, it can be port 8080 or can be any of your choice. Also, check your GCP logs, backend issues and server errors can be seen and monitored by simply looking at the logs for App Engine or Cloud Run.
Check Cloud Run configuring the container ports, for port configuration.
https://github.com/naftalib/news-feed
Get a blank page, dev tools gives this error on multiple resources;
Failed to load resource: the server responded with a status of 404 (Not Found)
In the end the problem was that the .gitattributes file was mistakenly deleted from the public folder when cleaning up files.
To be clear, the debug toolbar DOES appear. My problem is that when I enable the Debug Toolbar, all my javascript and css files fail to load.
My page loses all formatting but does still load the content. I am using chrome, which under the console prints something like this:
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/stylesheets/loggedin.css?h=201e99 Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/stylesheets/estimates.tabs.css?h=64c8f9 Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/js/jquery.console-log.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/theme/jquery-ui.custom.css Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/js/jquery-ui-timepicker-addon.js?h=7e5e4a Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/js/jquery.if.min.js?h=e69918 Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/js/base.js?h=4b783f Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/stylesheets/estimates.summary.show.css?h=0dd5d5 Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/js/jquery.floatThead.min.js?h=7f4ca5 Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/stylesheets/reset.css?h=fbd5ac Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/js/estimates.section.sortable.js?h=2ea052 Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/stylesheets/loggedin.css?h=201e99 Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/stylesheets/estimates.tabs.css?h=64c8f9 Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/stylesheets/estimates.summary.show.css?h=0dd5d5 Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/stylesheets/reset.css?h=fbd5ac Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/stylesheets/base.css?h=fcefb2 Failed to load resource: the server responded with a status of 404 (NOT FOUND)
http://127.0.0.1:8000/static/theme/jquery-ui.custom.css Failed to load resource: the server responded with a status of 404 (NOT FOUND)
I am using debug_toolbar 1.3.2, django1.5.0 and python 2.7.6
My project structure has
project_dir
project
settings
settings.py
static
images
js
scss
stylesheets
In my settings file:
DEBUG = True
DEBUG_TOOLBAR = True
#....middleware
#....other Installed apps
cd_up = lambda x: os.path.split(x)[0]
SETTINGS_DIR = dirname(os.path.abspath(__file__))
APP_DIR = cd_up(SETTINGS_DIR)
PROJ_DIR = cd_up(APP_DIR)
MEDIA_ROOT = '/tmp'
MEDIA_URL = ''
STATIC_URL = '/static/'
STATIC_ROOT = '{}/static/'.format(APP_DIR)
if DEBUG_TOOLBAR:
INSTALLED_APPS += ('django.contrib.staticfiles','debug_toolbar',)
MIDDLEWARE_CLASSES += debug_toolbar.middleware.DebugToolbarMiddleware',)
INTERNAL_IPS = ('127.0.0.1',)
DEBUG_TOOLBAR_PANELS = (
#'debug_toolbar.panels.version.VersionDebugPanel',
#'debug_toolbar.panels.timer.TimerDebugPanel',
#'debug_toolbar.panels.settings_vars.SettingsVarsDebugPanel',
#'debug_toolbar.panels.headers.HeaderDebugPanel',
#'debug_toolbar.panels.request_vars.RequestVarsDebugPanel',
#'debug_toolbar.panels.template.TemplateDebugPanel',
'debug_toolbar.panels.sql.SQLDebugPanel',
#'debug_toolbar.panels.signals.SignalDebugPanel',
#'debug_toolbar.panels.logger.LoggingPanel',
)
Naturally I cannot send any ajax request and setting DEBUG_TOOLBAR to false resolves all issues.
This is a condensed version, but if any other information is needed I'll update. Sorry, I'm still kind of new to SO. Thanks
UPDATE:
The 404 errors appear when running ./manage.py runserver --insecure
Otherwise the resource fails with a message of net::ERR_NETWORK_CONNECTION_RESET
I am not sure what is happening, but here are a few points to check:
When DEBUG_TOOLBAR is false, is django.contrib.staticfiles in INSTALLED_APPS? If it was added, this line
INSTALLED_APPS += ('django.contrib.staticfiles','debug_toolbar',)
can cause a duplicate app name. It should not cause any problem, but you can try removing the duplicate.
Are you sure DEBUG is set to True? When DEBUG is False, the development server refuse to serve static files (CONNECTION RESET?), and if you add --insecure option, it serves static files. This is like what you described.
Have you overrided the url mapping of "/static/" in urls.py?
Are you starting this server in a virtual machine? If so, you can try starting your server with:
python manage.py runserver 0.0.0.0:8000
and add your virtual machine's IP addresses to INTERNAL_IP.
I think this happens when you are using a virtual environment. The problem is that Django packages are installed there and the project can't access the files. You can fix that by running (based on your python version) python3 manage.py collectstatic in the console. This is how I fixed this problem on my end. Hope it helps your case
I deployed my Django app on Dotcloud.
I'm using websockets with Gevent and django-socketio, so I used a custom service. For now, I'm still using 'runserver_socketio' in order to make it works.
Now, I would like to use Nginx to serve my static files. I found this : https://github.com/dotcloud/nginx-on-dotcloud
I tried to use it. Here is my dotcloud.yml:
www:
type: custom
buildscript: nginx/builder
processes:
app: /home/dotcloud/env/bin/python myproject/manage.py runserver_socketio 0.0.0.0:$PORT_WWW
nginx: nginx
ports:
www: http
systempackages:
- libevent-dev
- python-psycopg2
- libpcre3-dev
db:
type: postgresql
And I added the folder 'nginx' at the root of my app.
I also added at the end of my postinstall:
nginx_config_template="/home/dotcloud/current/nginx/nginx.conf.in"
if [ -e "$nginx_config_template" ]; then
sed > $HOME/nginx/conf/nginx.conf < $nginx_config_template \
-e "s/#PORT_WWW#/${PORT_WWW:-42800}/g"
else
echo "($nginx_config_template) isn't there!!! Make sure it is in the correct location or else nginx won't be setup correctly."
fi
But when I go to my app, after I push it, I get the error:
403 Forbidden, nginx/1.0.14
And Nginx does serve the error pages 404.
So I don't know why, but I don't have access to my app anymore. Do you have any idea on how I can set my app with Nginx?
Thank you very much
I think Your problem is that you have two different processes fighting for the http port (80). You can only have one process running on port 80 at a time. Most people work around this by having nginx running on port 80, and then reverse proxying all traffic to the other process, which runs on a different port. This wouldn't work for you, because nginx doesn't support web sockets. So that means you would need to run nginx or the django app on a port other then 80. Which also isn't ideal.
At this point you have two other options
Use a CDN, put all of your files on Amazon S3, and serve them from there (or cloudfront).
Use dotCloud's static service, this will be a separate service that just serves the static files. Here is what your dotcloud.yml would look like.
dotcloud.yml
www:
type: custom
processes:
app: /home/dotcloud/env/bin/python myproject/manage.py runserver_socketio 0.0.0.0:$PORT_WWW
ports:
www: http
systempackages:
- libevent-dev
- python-psycopg2
- libpcre3-dev
db:
type: postgresql
static:
type: static
approot: static_media
Basically it adds a new service called static, and this new service, is looking for your static files in a directory in your project called static_media, located at the root of your project.
If you use the static service, you will need to get the URL from the static service, and set your STATIC_URL appropriately in your django settings.py.
Another gotcha with this setup, is if you are using django's static_files app. Django's static files app will copy all the static media into one common location. This doesn't work with the static service, because the static service is separate, and will most likely live on a different host then your other service, so you will need to manually copy the files into the common static_media directory your self.
For more information about the dotCloud static service, see these docs: http://docs.dotcloud.com/0.9/services/static/
Because of the gotcha I mentioned for option 2, I would recommend using option 1. Doing this is a pretty easy if you use something like https://github.com/jezdez/django_compressor . It can send your files to s3 for you.