Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 months ago.
Improve this question
I made React.js project , but it needs server side rendering, So now I have to migrate from CRA to next.js . the problem: I have to upload my website on apache web server, from what I gathered from google, I need installed node.js and pm2 (latest versions), also configured apache for reverse proxy. I also created ecoystem for pm2(I guess it was necessary). it looks like this at the moment:
module.exports = {
apps : [{
name: "nextjs-app",
script: "npm",
args: "run build",
env: {
NODE_ENV: "production"
}
}]
};
but when I ran pm2 start npm -- start , terminal is giving me respone like this:
pm2 start npm -- start
[PM2] Spawning PM2 daemon with pm2_home=/home/georgianar/.pm2
[PM2] PM2 Successfully daemonized
[PM2] Starting /usr/local/bin/npm in fork_mode (1 instance)
[PM2] Done.
but when I try to see list of process, there is none, and when user tries to enter the website, site log shows that there is no service on port 3000
AH01114: HTTP: failed to make connection to backend: localhost
and
(111)Connection refused: AH00957: http: attempt to connect to 127.0.0.1:3000 (localhost:3000) failed
any idea why?
Well if you want to run both on the same server you can do it in many ways
To run both Node.js and Apache on the same server, follow these steps: https://nodejs.org/en/download/package-manager/
To run your Node.js application as a service, you can use multiple methods such as creating a service, using a process manager (PM2 is common), or running a script on server startup with a cron job. For more information, see this link: How do I run a node.js app as a background service?. You'll need a server start script, typically named server.js, to do this. An example can be found at Next.js: https://nextjs.org/docs/advanced-features/custom-server. To run the application manually in the background, navigate to the app directory and run node ./server.js &
Set up a tunnel using proxypass on Apache. This is commonly used to run the Node.js application on a specific URL. You'll need to install the Apache module mod_proxy and edit the configuration for your Apache server. An example configuration could look like this:
<VirtualHost *:80>
ServerName example.com
ServerAlias www.example.com
ServerAdmin webmaster#example.com
ProxyPreserveHost On
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
ErrorLog /var/log/apache2/error.log
CustomLog /var/log/apache2/access.log combined
</VirtualHost>
You can also wrap the proxypass to run under a specific path using the location tag, like this:
<VirtualHost *:80>
ServerName example.com
ServerAlias www.example.com
ServerAdmin webmaster#example.com
ProxyPreserveHost On
<Location "/mynodeapplication/">
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
</Location>
ErrorLog /var/log/apache2/error.log
CustomLog /var/log/apache2/access.log combined
</VirtualHost>
This will run your application at https://yoururl/mynodeapplication. For more information, see this link: https://httpd.apache.org/docs/trunk/mod/mod_proxy.html.
I hope this covers most of it.
To run Next on Apache, you'll need to set up the Apache settings so that when the domain or subdomain you want Next to run on is accessed, Apache points the request to the local port on the machine that's running Next. Another issue is that Next's built-in server doesn't support SSL (which I'm assuming you want), and using a custom server instead (like Express) loses you many features and optimizations that would otherwise just work with the Next server. So you'll not only need to have Apache redirect to Next, but also have Apache handle the SSL certificate.
To do this, specify a VirtualHost for the server on port 80 to redirect to HTTPS. For example, at least in Ubuntu, in etc/apache2/sites-available/000-default.conf, you can add:
<VirtualHost *:80>
ServerName subdomain.example.com
Redirect / https://subdomain.example.com/
</VirtualHost>
And then set up the SSL certificate for SSL requests (on port 443), and tell Apache to route client requests to the local machine port, and to route the local machine port's responses back to the client. If you're using LetsEncrypt, you can add this into 000-default-le-ssl.conf:
<VirtualHost *:443>
ServerName subdomain.example.com
ProxyPreserveHost On
ProxyRequests Off
ProxyPass / http://0.0.0.0:16534/
ProxyPassReverse / http://0.0.0.0:16534/
SSLEngine On
SSLProxyEngine On
SSLCertificateFile <insert path to fullchain.pem>
SSLCertificateKeyFile <insert path to privkey.pem>
Include /etc/letsencrypt/options-ssl-apache.conf
</VirtualHost>
Above, I'm running Next on port 16534 - this is the port you'd see Next logging when it starts:
ready - started server on 0.0.0.0:49447, url: http://localhost:16534
so substitute it with whichever port you're using.
You'll also need to make sure the DNS server for your website points users to your webserver's external IP address by adding an A record, if you don't have one already. If the Next app is to run on a subdomain, you'll need a separate A record for the subdomain.
I have a MERN application split into:
1. client folder : Front-End code (REACT app)
2. server folder : API Code (Express, NodeJs)
For some reason, front-end calls the /api part of the app, but does not return a response. Is the issue in Apache2 setup? or something in the react app. And how is the link usually done between ExpressJs (Backend) and the ReactJs (Frontend).
Routing is setup through an Apache2 Reverse Proxy
<IfModule mod_ssl.c>
<VirtualHost *:443>
ServerName example.com
ServerAlias www.example.com
DocumentRoot /var/www/example.com/
Options -Indexes
ProxyRequests on
ProxyPass /api https://example.com:3000/
ProxyPassReverse /api https://example:3000/
ProxyPass / https://example.com:7000/
ProxyPassReverse / https://example:7000/
Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
</VirtualHost>
</IfModule>
Just to clarify in picture of what I'm trying to achieve:
I think the issue is that you've forgotten to prepare your React App for production. You spent all the time developing it and using react-scripts-start or something similar. When you are done developing you have to run react-scripts-build so that your code can be transpiled into something the browser can read. Web browsers don't read things like import and require.
Here's info on preparing for production (it's very simple)
https://create-react-app.dev/docs/production-build
And here's info on how to integrate it with your back end:
https://create-react-app.dev/docs/deployment#other-solutions
Essentially:
In your client folder run
npm build
In your server.js add
app.use(express.static(__dirname + '/build')
Now a client requests your index.html from your back end server and it serves your react app. Added benefit: no more CORS errors. Any work-around you did for CORS you should probably take it out.
I want to build a React powered app that uses a self hosted instance of Cockpit to fetch data and host both on an Apache server.
I'm familiar with installing Cockpit to the default DocumentRoot, but I'm not sure where to put the frontend files. I don't want to just messily dump them in the same folder, since there'd probably be also conflicts with Cockpit files.
How can I seperate both apps in a clean way and tell Apache to serve them correctly?
After doing a bit of research with more specific keywords, I found the answer myself:
Basically you want to create folders for both app and API (i.e. Cockpit) in your DocumentRoot. Then you are able to set Virtual Hosts in your Apache configuration like this (assuming your folders are named client and server and your DocumentRoot is /var/www/html/):
<VirtualHost *:80>
DocumentRoot "/var/www/html/client"
ServerName www.example.com
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "/var/www/html/server"
ServerName api.example.com
</VirtualHost>
API calls can then be made via the api.example.com subdomain.
See https://httpd.apache.org/docs/2.4/vhosts/examples.html for more examples.
I have a website (http://www.goodfoodwaiheke.org) configured as a virtual host on Apache2. The virtual hosting configuration redirects traffic from apache2 to tomcat8 via these conf parameters:
<VirtualHost *:80>
ServerName www.goodfoodwaiheke.org
ServerAlias goodfoodwaiheke.org
ProxyRequests Off
ProxyPreserveHost On
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyPass / http://localhost:8080/coop/
ProxyPassReverse / http://localhost:8080/coop/
</VirtualHost>
On tomcat, the /coop/ part of the address invokes the JSF application in coop.war. This seems to work. The correct welcome page is served except for one problem. The url for static resources are being served incorrectly. For example, the url of the background image on the welcome page, which is actually in http://www.goodfoodwaiheke.org/coop/resources/images/GoodFoodWaiheke4.png is served to the browser as http://www.goodfoodwaiheke.org/coop/coop/resources/images/GoodFoodWaiheke4.png (i.e. the coop app name is duplicated in the url). This is causing static resources to not work. Although I can sort of understand why this may be happening I am unsure of how to fix it. I know I could offload the static resources onto the Apache2 server but for various reasons I would like the war file to be self-contained and for tomcat to be responsible for serving the whole site.
I'd be very grateful for any suggestions as to what I need to change.
I'm setting up a multi-site environment with Wagtail (perhaps a bit ambitious as I'm new to Wagtail, Django and Python, but I would like to migrate some simple sites to Wagtail and wanted to have the correct setup from the beginning).
I have created a list of sites in the Wagtail admin and the home pages for each of the sites.
I would like some of the site to be reachable through multiple URL's (name.com + name.othername.com).
Should I create a new site setting (through "Add Site" in the admin) for each URL, or is there a better/different way to handle this?
I would recommend to use an external web server (eg. Apache) to work with multiple domains. Define a virtual host proxy to point to your wagtail app.
Here is an example:
<VirtualHost *:80>
ServerName example1.com
ServerAlias www.example1.com
ServerAlias example2.com
# Here we define the proxy to your wagtail app
ProxyPass / http://localhost:8000/
# Reverse Proxy for load balancing
ProxyPassReverse / http://localhost:8000/
# Preserves the host if you use docker
ProxyPreserveHost On
</VirtualHost>
You will need an external web server anyway to serve static content in non-debug mode.