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
Related
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.
My django website sometimes cannot open images and the error message is:
"Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH"
However, when I open the link next to the error message on a new tab, the image is loading. I am using Apache, not nginx.
Here's how image looks like when I tried to open on a new window
As you can see it's not fully loaded!
Could someone help me with this problem?
Finally, I was able to fix it. Of course it was an apache problem. First I have activated my sudo a2enmod expires then added ExpiresDefault "access plus 1 month" to my media and static Directory in mysite.conf file.
I create two separate Docker image for React(port 80) and SpringBoot(port 8080). while running the docker-compose on my local , it is fine working. When I deploy in MultiDocker in ElasticBeantalk ,not able to communicate.
I follow the link https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/create_deploy_docker_ecs.html
ok , finally ,got the solution. So I create the one nginx server in which default.conf set the proxy_pass
e.g
location /api {
rewrite /api/(.*) /$1 break;
proxy_pass http://servername:8080/api/v1/;
}
And Made some changes in the React application to call the Rest Api.
After that It work in the Elastic Bean talk MultiDocker evn.
For reference link - https://github.com/km2411/flask_template/blob/master/nginx/default.conf
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?
When I try to open my instance via the Public DNS, I get a 404 error.
However, in my security group, I have HTTP/HTTPS/SSH configured to allow all incoming requests. When I connect to the instance via SSH, I can see all of my files there from my repo.
I am running on an Ubuntu 64-bit server with Nginx and Gunicorn.
Any help would be appreciated.
Thank you in advance!
Two possibilities for getting 404 file not found error
Make sure /usr/share/nginx/html/index.html is found or not.
check with nginx.conf file, if it is directing to index.html or not.