I have a react app. When I build my app via the dev server (localhost: 3000), the app is served correctly with the correct styling etc.
However, when I serve via nginx (via docker) I get a completely different UI? Does anyone know why this may be?
I don't think it is a docker issue. I am using webpack if this is something that I may need to look at?
My nginx config:
server {
listen 80 default_server;
listen [::]:80 default_server;
root /usr/share/nginx/html;
location = / {
try_files $uri /index.html;
}
}
Dockerfile:
FROM nginx:1.16-alpine
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
COPY public/ /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Related
I would like to dockerize and create a build process for a simple Vue.js application using Dockerfile. But, I get some errors when building from NGINX, it looks like the static build files of the project are missing. When I log in to localhost:8080 - I get an empty page, and in the console the following messages:
2023/01/06 07:00:03 [error] 30#30: *1 open()
"/usr/share/nginx/html/vue-ims/js/chunk-vendors.97986597.js" failed
(2: No such file or directory), client: 172.17.0.1, server: localhost,
request: "GET /vue-ims/js/chunk-vendors.97986597.js HTTP/1.1", host:
"localhost:8080", referrer: "http://localhost:8080/"
...
I tried to access the /usr/share/nginx folder inside the container, but nothing was visible there. During the dockerfile build process, it should COPY all the necessary files to certain folders that should be accessible, but seems like nothing happened.
Dockerfile:
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json .env ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
I also tried to build without the production stage as mentioned in comments, checked the /app/dist, /js/ folder inside the container and got the files there.
Thanks to #bassxzero solved this problem.
nginx.conf:
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
}
I am using nginx with react.
My nginx.conf file
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
As per this config nginx is serving 200 for all routes..
Suppose my routes are
example.com/login
example.com/landing
Now suppose someone enter wrong url
example.com/test
In that case i want to throw 404 without landing to application at nginx level itself. Is this possible to handle routing at nginx level and send 404 despite of 200 and than handling at react level.
I found that to restrict any particular route at nginx level we can do it using below code
location ^~ /test/ {
return 404
}
But i want to restrict all routes which are invalid for that i used
# return 404 for all routes
location / {
return 404;
}
# define each possible route like this
location /login {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /landing {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
But after this my application is not loading getting 503 Service Temporarily Unavailable
First question is it really possible to achieve routing at nginx level if yes what approach i need to take any clue or reference will be of great help.
Thanks in advance
EDIT
Please find docker file
# Base Image
FROM node:10-alpine AS base
MAINTAINER test#test.com
RUN mkdir -p /usr/src/app
COPY . /usr/src/app
# Dependencies
FROM base as build
WORKDIR "/usr/src/app"
RUN npm install
RUN npm run test
RUN npm run build
# Web Server
FROM nginx:alpine
EXPOSE 80
COPY --from=build /usr/src/app/build /usr/share/nginx/html
COPY --from=build /usr/src/app/nginx.conf /etc/nginx/conf.d/default.conf
Yes, nginx can be used for this.
COPY --from=build /usr/src/app/nginx.conf /etc/nginx/nginx.conf
Just use this one.
I am using Django Compressor on nginx & uwsgi
I have each docker container for nginx & uwsgi
I copied static folder to nginx:/static and others to uwsgi:/myapp/ in advance.
However compress.js made the compress file dynamically and set under uwsgi:myapp/static/CACHE of uwsgi container.
<script src="/static/CACHE/js/output.b6723c2174c0.js">
So consequently 404 not found for this file, because this request is redirect to nginx:/static not uwsgi:/myapp/static
How anyone solves this problem?
my nginx setting is below
server {
listen 8000;
server_name 127.0.0.1;
charset utf-8;
location /static {
alias /static;
}
location / {
auth_basic "Restricted";
auth_basic_user_file /etc/nginx/.htpasswd;
proxy_pass http://uwsgi:8001/;
include /etc/nginx/uwsgi_params;
}
}
It's about troubleshooting. There can be different issues.
Similar reported here django-compressor and nginx: 404 with compressed files
Having same issue I found that in settings.py the COMPRESS_ROOT was defined to the path which is not specified in the Nginx configuration.
Removing COMPRESS_ROOT fixed it. Refer to: Django Compressor Quickstart
Deploy React js(build directory) static files in Nginx server.
Using kubernetes, i am running the nginx server to serve the React js "build" directory for static files. I could access the simple index.html in the browser. But not the index.html with react js code. The root directory has the index.html file, static directory and other files in it. Directory structure is copied to this path.
nginx.conf is like below
events {
worker_connections 1024;
}
http {
server {
listen 80;
root /usr/share/nginx/html;
#index index.html;
location / {
index index.html;
try_files $uri $uri/index.html /index.html;
}
location /static/ {
autoindex on;
root /usr/share/nginx/html/static/;
}
}
}
In the browser, index.html is not loaded, but in source (right-click in the browser > select source), the index.html code is available. formatted index.html file copied from source in the browser is at this path. I am predicting that javascript(css,js) code is not executed or having issues loading in the browser. Otherwise, there is a problem with the nginx configuration to load the javascript files.
how to properly configure nginx to deploy Reactjs build directory files?
try_files does not tell nginx to serve the static file. Reaching the closing brace in the absence of any other operation causes it to serve the static file. try_files tests for the existence of the file in the local file system and may rewrite the URL.
You have syntax errors in your file i.a white spaces.
Remember to create service for nginx - type LoadBalancer and refer to it in deployment configuration file. You have to add your server if there are several servers that match the IP address and port of the request.
Here is example how you should execute this process. Make sure you followed every step from tutorial: nginx-configuration - there is example of exercise on PHP application but there are the same steps to reproduce with ReactJS app.
Your conf file should looks like this:
events {
worker_connections 1024;
}
http {
server {
listen 80;
root /usr/share/nginx/html;
index index.html index.htm;
server_name your_server_name_or_IP
location / {
try_files $uri $uri/index.html /index.html;
}
location /static/ {
autoindex on;
root /usr/share/nginx/html/static/;
}
}
}
The below code that works for me.
server {
listen 80;
root /usr/share/nginx/html;
index index.html index.htm;
server_name xyz.application.com;
server_name localhost;
location / {
ssi on;
set $inc $request_uri;
if (!-f $request_filename) {
rewrite ^ /index.html last;
}
index index.html;
try_files $uri $uri/index.html /index.html =404;
}
Setting the rewrite redirects to index.html page. I am not sure about the impact of ssi, set $inc $request_uri in the code.
I was wondering how I could get NGINX to look for files that are essentially out of the root value. This is how my nginx.conf looks like within server
server {
listen 80;
server_name localhost;
root /home/parallels/Downloads/nginx/rickshaw/examples;
location /all {
alias /home/parallels/Downloads/nginx/rickshaw/examples
try_files $uri $uri/ /sample.html /sample.htm;
}
#error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
I have a HTML file in rickshaw/examples that is calling on a javascript file that is located in /home/parallels/Downloads/nginx/rickshaw/javascript/charts.js by going like src="../javascript/charts.js. I tried using alias but that didn't really help. Any idea on how I could change the configuration file so that it can pick up on a file in a different relative directory. I know I could just copy the file into the root path but I want to find out how I can configure NGINX so that it looks for relative paths.
Thank you, and let me know if you need any further information!
try adding a static path
location /javascript/ {
alias /home/parallels/Downloads/nginx/rickshaw/javascript/;
autoindex off;
}
and access it src="/javascript/charts.js"