Anyone please explain it.
I'm struggling with this.I followed this blogpost https://www.davidmeents.com/blog/how-to-simply-deploy-a-react-app-on-digital-ocean/
But all i got default page of nginx or now after some messing around with configuration i'm getting 404 not found error.
There are two floders inside nginx 1) sites-availble 2)sites-enabled
I'm not sure which one is relevant here.
my config is like this
server {
listen 80;
server_name 139.59.25.228;
root /www/mywebsite/app/build;
rewrite ^/(.*)/$ $1 permanent;
location / {
try_files $uri index.html;
}
}
Thanks -:)
It's not so complicated, you just need to:
1/ Start your react application as usual, maybe npm start, then maybe it will open port 3000 for you (or any number)
2/ Config nginx for port 80 pointing to that localhost:3000 (or your defined port):
server {
listen 80 default_server;
server_name YOURDOMAIN.HERE;
location / {
#auth_basic "Restricted Content";
#auth_basic_user_file /home/your/basic/auth/passwd_file;
proxy_pass http://localhost:3000; #or any port number here
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;
}
}
However, in order to keep the npm start - your localhost with port 3000 server always alive, I suggest you use pm2:
sudo npm install pm2 -g
Then, change directory (cd) to your reactjs app folder: (I assume you use npm start for starting you reactjs app)
pm2 start npm -- start
(if you use kind of npm run:start to start app, then it should be: pm2 start npm -- run:start)
After that, this command will be remembered by pm2!
Useful pm2 commands:
pm2 list all
pm2 stop all
pm2 start all
pm2 delete 0
(use delete 0 to delete the first command from pm2 list with ID 0)
Related
Here's the issue... when I start a React app locally as npm start. I don't have a ws failed connection.
If I start NGINX and React servers within Docker containers I constantly get
WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed:
default.conf
upstream client {
server client:3000;
}
upstream api {
server api:5000;
}
server {
listen 80;
location / {
proxy_pass http://client;
}
location /ws {
proxy_pass http://client;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
location /api {
rewrite /api/(.*) /$1 break;
proxy_pass http://api;
}
}
Add this to .env:
WDS_SOCKET_PORT=0
See this issue for more explanation and information: https://github.com/facebook/create-react-app/issues/11897
I faced the same issue. One simple fix is to map the nginx instance to port 3000 on your local machine. Whereever you do post mapping for nginx change it to 3000:80.
Now requests made to 'ws://localhost:3000/ws' by the react app will be appropiately routed.
You could run https without docker and http with docker.
So you should use wss and ws accordingly.
This was my issue.
For me, at first adding this line to .env (as #sarcouilleizi94 mentioned) solved the problem
WDS_SOCKET_PORT=0
then (in the same project) unexpectedly it stopped working and I had to change it to:
WDS_SOCKET_PORT=3000
I hope this can help.
When I run 'next start' on my Linux server, nextjs only seems to host on HTTP. I've installed let's encrypt but can't seem to find a way to link the certificate with the default next js server. However, I've seen that there is a solution that involves creating a server.js file to manually start up your next server but using that also inhibits nextjs's ability to use features such as server-side rendering and serverless functions. I find it hard to believe there isn't a way around this due to the mainstream use of nextjs?
If anyone has found a way around this or has any information, please share.
You need to set up nginx to route your domain to your Nextjs port. Check which port your nextjs is running. Example port 3000 is the default.
On your server, install nginx as normal. Many tutorials on the web. Once installed:
cd /etc/nginx/sites-available
nano example.com
Copy/Paste nginx setup from below
# *q is our domain, replace port 3000 with your port number
server {
listen 80;
listen [::]:80;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name example.com www.example.com;
location / {
proxy_pass http://localhost:3000;
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;
}
# for letsencrypt
location ~ /.well-known {
allow all;
}
}
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com
nginx -t
service nginx restart
Make sure your Nextjs is running.
Install Letsencrypt as normal. Many tutorials on the web.
sudo apt update && sudo apt install certbot python3-certbot-nginx
certbot --nginx -d example.com -d www.example.com
certbot certonly --standalone --preferred-challenges http -d example.com
certbot renew --dry-run
How does the nextjs handle SEO? I am trying to render page by invoking it directly (localhost:8080/about) from the browser, but NGINX is returning 404. The link to same page embedded in the home page is working but the page can not be loaded directly using URL. Are additional configurations needed either in NGINX or Nextjs app.
Since you're using NGINX as your web server, you may want to reverse proxy to your NextJS app. https://medium.com/#deresegetachew/serving-react-spa-using-nginx-and-reverse-proxy-4e5485c814a0
React/NextJS uses port 3000 by default. Your URL in your post is pointing to port 8080. NGINX is not used by NextJS by default, so I believe a different web server is rendering your page, i.e. NGINX.
When you run the following commands on your nextjs project, you'll see the following output and it'll say what port is being served. Then try viewing that with your web browser.
$ npm install
$ npm run dev
...
[ wait ] compiling ...
[ ready ] compiled successfully - ready on http://localhost:3000
If your have a server.js in your projects top directory, or you can add one to configure which port your app will serve. https://nextjs.org/docs/old#custom-server-and-routing
If your web server has a firewall enabled, not all ports will be available.
NextJS serves the site itself and doesn't use nginx or Apache.
In your package.json file, you should have a next command in the scripts section. I normally have:
"scripts": {
"build": "next build",
"dev": "next"
}
Running yarn dev or npm run dev will bootstrap the site and allow you to connect to the site locally and see how it handles 404s and other errors.
When you deploy your site, it will be using this kind of server set-up rather than either of the servers mentioned above.
I hope that's helpful.
Could you share some configuration code?
Out of the box nextjs should display the default export react component that lives under pages/about.js or pages/about/index.js /about when hitting https://localhost:8080/about.
Next.Js has it's on server so you don't have to use another one.
Just run the command npm run dev after installing the next.js using the command prompt for running locally in you machine.
maybe you run application on port 3000 and when you want to serve on another port for example 80 or 8080, you need redirect Nginx requests to port 3000 in this way that you make redirection in Nginx's config file :
(replace server-ip with your server ip or localhost or 127.0.0.1)
location / {
proxy_pass http://<server-ip>:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
}
although you can run PM2 for manage and run your application on the server easily
as I saw your nginx serve nothing on 8080 port, that's why you didn't reach to your application on http://localhost:8000, so you can test with http://localhost:3000 because default port is 3000
that's all it.
I'm trying to deploy a react app with nginx reverse proxy.
My server configuration block (/etc/nginx/sites-available/app2.conf) is as follow:
server {
listen 80;
listen[::]:80;
root/srv/app2/build;
index index.html index.html;
server_name _;
location / {
proxy_pass http://localhost:3001/;
try_files $uri $uri/ =404;
}
}
I'm using a docker to run the react app with port 3001 exposed.
I tried to use curl to see if it works. The curl command works as expected.
curl http://localhost:3001
However, when i tried to run in my web browser i got the following error:
Failed to load resource: the server responded with a status of 404 (Not Found) main.8ea061ea.chunk.css
Failed to load resource: the server responded with a status of 404
(Not Found) main.dcd07bc1.chunk.js
Failed to load resource: the server responded with a status of 404
(Not Found) 1.a6f3a221.chunk.js
Failed to load resource: the server responded with a status of 404
(Not Found) main.dcd07bc1.chunk.js
Failed to load resource: the server responded with a status of 404
(Not Found) main.8ea061ea.chunk.css
It seems that it failed to load all the static files (.css & .js) files.
Does anybody know how to resolve this?
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!
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/
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/
I want to deploy a simple angular projet made with angular fullstack.
https://github.com/DaftMonk/generator-angular-fullstack
I tried :
yo angular-fullstack test
grunt build
Then, in dist I got 2 folders: server and public.
how to deploy them on a linux server ?
with forever/node and nginx ???
I want to self host my project.
thanks
1.) Install nginx
2.) Proxy forward nginx to your node port. See Digital Oceans How-To.
nginx.conf
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://localhost:9000;
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;
}
}
3.) Start app.js with node in your dist folder with the correct variables:
$ export NODE_ENV=production; export PORT=9000; node dist/server/app.js
4.) Browse to the hostname configured in nginx in step 2.
In case you get many 404's you most likely are using angular.js in HTML5 mode and need to re-wire your routes to serve static angular.js content. I described this and how-to tackle many other bugs that you may face in my blog article: "Continous Integration with Angular Fullstack".
You can try pm2 as well which is straightforward and easy, it comes with lots of useful features.
https://github.com/Unitech/pm2
// Start new node process
$ pm2 start dist/server/app.js
// list all process
$ pm2 list
Also, if you're running a mongo db with a host you will need to change the /server/config/environment/production.js uri to match development.js and it should work.
With MongoLab you have something to this effect:
mongodb://user:pass#XXXXX.mongolab.com:XXXXX/yourdatabase
then run the grunt serve:dist command in your app directory.
This worked for me.
Install generator-angular-fullstack:
npm install -g generator-angular-fullstack
Make a new directory, and cd into it:
mkdir my-new-project && cd $_
Run yo angular-fullstack, optionally passing an app name:
yo angular-fullstack [app-name]
Run grunt for building, gruntserve for preview, andgrunt serve:dist` for a preview of the built app