how to deploy nextjs website on apache webserver-CodePudding

I started working as an React intern in some company a few weeks ago, the problem is that I am the only React developer here(I guess they are experimenting with new tech, they are using laravel and native php 100% on their projects). I made entire project from start to bottom, but it needs server side rendering, So now I have to migrate from CRA to next.js . here comes the problem: I have to upload my website on apache web server, from what I gathered from google, I need to install node.js on apache , configure .htaccess and I guess some others (every blog said different thing). I cant find a good video or post where there is an info about this problem from start to bottom, do you guys know any good post or a video where I can really learn how to do it? or if you are familliar with this problem, maybe you have a tip? thanks in advance!

CodePudding user response：

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.

CodePudding user response：

Well if you want to run both on the same server you can do it in many ways

First i'll assume nodejs is already installed if not that's the first thing you have to do, example using packagemanagers you can find on nodejs website https://nodejs.org/en/download/package-manager/
Second you have to run your node application as a service it can be done in multiple ways everything from creating a service or running a script on server startup with cronjob etc here is a link on how that can be done. But one thing that is core for any solutions is that you need a server start script commonly named server.js, an example can be found at nextjs for now ill just show you how you can do it manually by running it in the background if you are in the app directory you can do node ./server.js & the & sign what's making it run in the background

Third you have to setup some kind of tunnel, using proxypass on apache is commanly used where on a certain url it runs you node application you will need to install some apache modules to enable this future I think its mod_proxy but I could be wrong and edit the configuration for your apache server an example it could look something like this

 <VirtualHost *:80>
      ServerName example.com
      ServerAlias www.example.com
      ServerAdmin [email protected]

      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 of course wrap your proxypass to just run under a certain path using the location tag, hat would look something like this

<VirtualHost *:80>
   ServerName example.com
   ServerAlias www.example.com
   ServerAdmin [email protected]
         
   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>

that would run your application under https://yoururl/mynodeapplication more info can be found here

https://httpd.apache.org/docs/trunk/mod/mod_proxy.html

hope this covers most of it

CodePudding user response：

Yes, it is possible to use Next.js with an Apache web server. To do this, you will need to install Node.js on your Apache web server and configure your .htaccess file to handle requests to your Next.js application.

Here are the steps you can follow to set up Next.js with an Apache web server:

Install Node.js on your Apache web server. This will provide the runtime environment that is required to run a Next.js application.
Install the Next.js framework and any other dependencies that your Next.js application requires using the npm package manager. You can do this by running the following commands in your terminal:

npm install next
npm install <other dependencies>

Create a .htaccess file in the root directory of your Next.js application. This file will be used to configure your Apache web server to handle requests to your Next.js application.
Add the following code to your .htaccess file to enable Apache to handle requests to your Next.js application:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

This code will enable Apache to handle requests to your Next.js application and serve the appropriate pages from your application.

Build your Next.js application using the next build command, and then start the Next.js server using the next start command.
Upload the built Next.js application to your Apache web server. You can do this by copying the .next directory, the package.json file, and the .htaccess file to the root directory of your Apache web server.
Test your Next.js application by visiting the URL of your Apache web server