Last week, we run into a problem for one of the large Gatsby + ReactJS + Laravel projects in hosting which is hosted with Apache Webserver on Amazon AWS EC2. The problem we were facing was, for some reason, when we reload the Gatsby website, it was giving a 404 error page.
If you open a home page and then a normal visit then the website will fully function, but if you reload the page then it gives an error. And we found it happens when we are using Dynamic routing of React Route in Gatsby as per show in Gatsby documentation here.
Also, what we found, if we test the website build with gatsby serve then it works fine. But while using Apache, it behaves differently and we found that this problem has been faced by lots of people over the internet.
So what we came up with is, we used gatsby serve with an apache proxy. Here is how we did it,
Step 1 – Setup Project
As a first step, clone the project on the server and run a command, gatsby build to create a gatsby build.
Step 2 – Setup PM2 for Gatsby Serve
The next step that we need to do is run gatsby serve. But as you know, we can not run this command directly via console, because as you exit from the console, the command will be terminated.
So we will be using pm2 package, a NodeJS utility that is used to run nodejs apps.
For that, we will need to install pm2 globally. Run the following command to install it,
npm install pm2 -g
You can find other installation ways here if you need.
Once the installation has been done, let’s run the gatsby serve command via pm2. For that run the following command from the gatsby project folder,
pm2 start gatsby –name my-web-app — serve
where my-web-app you can replace with the name of your app.
Once, it’s running, try to test it, if it’s working correctly by opening the URL http://your-ip-address:9000/. Make sure, port 9000 is opened on your server for traffic.
Step 3 – Configure Apache
Once, gatsby serve is working and tested. The next step is to configure apache to proxy all port 80 traffic to port 9000.
For that, edit your apache conf file (or virtual host conf file), and add the following lines (or configure it to something like the following),
<VirtualHost *:80>
ServerName my-web-app.infyom.com
ServerAdmin webmaster@infyom.com
ProxyRequests On
ProxyPass / http://localhost:9000/
ProxyPassReverse / http://localhost:9000/
ErrorLog ${APACHE_LOG_DIR}/my-web-app.infyom.com.error.log
CustomLog ${APACHE_LOG_DIR}/my-web-app.log combined
......
# any other options below as per your need
......
</VirtualHost>
The next step you need to do is restart your apache server by,
sudo service apache2 restart
And then you can just open the URL https://my-web-app.infyom.com and it should work fine.
Bonus
New Deployment
Whenever you deploy a new code, you again need to run gatsby build and then pm2 restart my-web-app. Then only it will take new changes.
Troubleshooting
Sometimes, we found that we need to restart apache as well after the new deployment. so if you run into any trouble, then make sure to restart apache as well and it should solve the problem.
I hope it may help you to resolve your 404 problem.
