score:1
try using this config to build the docker
# build environment
from node:9.6.1 as builder
run mkdir /usr/src/app
workdir /usr/src/app
env path /usr/src/app/node_modules/.bin:$path
copy package.json /usr/src/app/package.json
run npm install --silent
run npm install react-scripts@1.1.1 -g --silent
copy . /usr/src/app
run npm run build
# production environment
from nginx:1.13.9-alpine
copy --from=builder /usr/src/app/build /usr/share/nginx/html
expose 80
cmd ["nginx", "-g", "daemon off;"]
never had any problem using this script. u might miss some nginx config or forgot to copy recursively, who knows if u didnt post the dockerfile
*note: i didnt make it
credit: https://mherman.org/blog/dockerizing-a-react-app/
score:1
i think this is an elegant solution for nginx reverse proxy cofiguration.
/etc/nginx/sites-available/app2.conf
server {
listen 80;
listen [::]:80;
server_name example.com www.example.com;
location / {
proxy_pass http://localhost:3001;
# recommended settings
proxy_http_version 1.1;
proxy_set_header upgrade $http_upgrade;
proxy_set_header connection 'upgrade';
proxy_set_header host $host;
proxy_cache_bypass $http_upgrade;
}
}
don't forget symbolic link:
sudo ln -s /etc/nginx/sites-available/app2.conf /etc/nginx/sites-enabled/
score:2
please check this https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/
you have to specify the way static files are to served depending upon the url requested for static files.
hope it helps!
Source: stackoverflow.com
Related Query
- Deploy React with Nginx failed to load resources
- Can't deploy React Project. Error is Command failed with exit code 1
- deploy React and Django with Nginx and Docker
- Configuring React with Asp.net MVC4,getting error like Failed to load resource[app.jsx] in browser
- Failed to load resource: the server responded with a status of 500. Deployed react app with vercel
- Why can NGINX not load my react app with the right css & js files
- Failed to load resource: the server responded with a status of 404 (Not Found) when editing form React Node MySQL
- Nginx + React fail to load resources
- Faced Failed to load resource: the server responded with a status of 404 () when uploaded my react app to github pages
- "How to fix Failed to load resource: the server responded with a status of 500 in React and express
- React Hook Form With React AsyncSelect failed to load options
- React app Failed to load resource: the server responded with a status of 404
- React app failed to load resource: the server responded with a status of 404 GraphQL
- Failed to execute 'removeChild' on 'Node' with FontAwesome in React
- Dynamically load a stylesheet with React
- Warning: Failed propType: Invalid prop of type `array` expected `object` with React
- React Native: fetch request failed with error - TypeError: Network request failed(…)
- Trying to deploy my React app with gh-pages but got this error message : The "file" argument must be of type string. Received type undefined
- How to configure Nginx with React Router HistoryLocation?
- create react app - without typescript , got Error: Failed to load parser '@typescript-eslint/parser'
- Dynamically load redux reducers with react router 4
- How to resolve "Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' operat....." with respect to React JS?
- Best way to deploy react app with gitlab-ci?
- Error: Request failed with status code 401 axios in React JS
- Failed to load resource: the server responded with a status of 431 (Request Header Fields Too Large)
- React app with Server-side rendering crashes with load
- React Router doesn't load images properly with nested routes
- How do I configure my Nginx server to work with a React app in a subfolder?
- React Native start failed with error code -4094 how to solve this ONCE for ALL?
- Should I enable Gzip on Nginx server with SSL for a react app?
More Query from same tag
- What is the way to pass object short-hand as props into React component?
- React ag grid conditional cellrenderer
- Is this the best way to convert a class component to a hook component?
- How to remove React hook in certain conditions?
- Access to component methods in React
- Lifecycle events on ReactCSSTransitionGroup's component?
- Strikethrough a list item in react todo list
- map function with select option
- Cannot create React table form using react-jsonschema-form-extras
- SPA when route change reset store value to default
- How to apply background color on all section elements in scss
- React Native: How to select previous Text Input
- How to mock dependency being used in my React component?
- trying to update an existing object in array of objects using react
- Change image with javascript mouse position?
- function created in React render return, good or bad
- 'ReactComponent' is not exported from svg
- Typescript: React.forwardRef with generic props from @material-ui
- How to avoid NaN being rendered in audio player duration?
- Run function after jquery ujs submits remote form
- React doesn't re-render after State change on button click in ReactJS (preact)
- Error Message React: Uncaught TypeError: Cannot read property 'length' of undefined ()
- Getting "Cannot read property 'asMutable' of undefined" error even though the page renders
- Fetch-api error-handling when posting form-data
- Element obtaining value from input only updating after the second time I press enter. Why is this happening? - ReactJS
- Why is the output showing on next onMouseUp event in Reactjs
- React Router - one of two routes
- React JSS hover function value
- How can i print JSON with console.log
- Change Material UI Stepper icon for error step