How use Certbot with NEXTJS - reactjs

I use certbot with following command:
sudo certbot certonly -a webroot --webroot-path=/dirrectory/public -d example.com
The problem is that Certbot use public folder for create the challenge and NEXTJS disable all changes in folder /public when is in poduction (npm start). So what is the best way to create a certbot SSL with NEXTJS?
I used a nextjs custom server , but It did not work
Thanks coders and happy new year 😉 🥳🥳

Related

NextJS 500 internal server error on deployed website. But build works PERFECTLY on local

Build is working perfectly on my local PC with pm2, no errors at all. Every page loads perfectly, there are no 404 or 500 errors in fetching files. It's great! This is EXACTLY how I want it to run.
But when I try and deploy this on Ubuntu with pm2 I am getting two sets of errors:
I'll put screenshots here:
https://i.imgur.com/IdnEH7r.png
Written form:
Script_app-a44cfb7405f734c3.js
Script_buildManifest.js
Script_ssgManifest.js
Script_middlewareManifest.js
(And others) all are giving me a 500 Internal Server Error no matter what I do.
Attempted Solutions
I've tried many approaches and all of them end with this error/failure when I am navigating to my deployed website.
Upload manually with filezilla.
Git clone from my repository, build on the server (no build errors) and then deploy with pm2. No errors with pm2 either! But then I am given 404/500 errors.
I've tried this in different folders, I've tried it with a host of different commands. I am completely out of ideas and I've uploaded and tried to get my files on there and install packages and more.
Nginx error?
This might be nginx error? But the nginx settings work perfectly fine for a brand new "npx create-next-app#latest" Following this exact tutorial to the letter: https://www.youtube.com/watch?v=x6ci2iCckWc&t=658s&ab_channel=DigitalCEO
My nginx file
"server {
server_name specialservername.com;
gzip on;
gzip_proxied any;
gzip_types application/javascript application/x-javascript text/css text/javascript;
gzip_comp_level 5;
gzip_buffers 16 8k;
gzip_min_length 256;
location /_next/static/ {
alias /var/www/frontend/.next/static/;
expires 365d;
access_log off;
}
#EDITS
location ~ ^/_next/static/(.*)$ {
root /.next;
try_files "/static/$1" "/server/static/o$1" #proxy_pass;
}
#END EDITS
location / {
proxy_pass http://127.0.0.1:3000; #change to 3001 for second app, but make sure second nextjs app starts on new port in packages.json "start": "next start -p 3001",
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;
add_header Access-Control-Allow-Origin *;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/specialservername.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/specialservername.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host =specialservername.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
server_name specialservername.com;
return 404; # managed by Certbot
}"
What I was Expecting
The NextJS build to be deployed on this server no different than it is on my local machine. On my local machine it's BEAUTIFUL!
If you're seeing an "Internal Server Error" when trying to access your Next.js application on Ubuntu with nginx, it's likely that there's an issue with your configuration.
Here are a few things you can try:
Check your nginx error logs: Look in your nginx error logs (typically located in /var/log/nginx/error.log) for any error messages that might indicate what's causing the issue.
Check your Next.js logs: You should also check your Next.js logs (usually located in the .next directory of your application) for any error messages that might indicate what's causing the issue.
Check your Next.js configuration: Make sure your Next.js configuration is set up correctly for production deployment. You should make sure that your next.config.js file has the necessary settings for production deployment, such as setting target: 'server', configuring your build options, and setting your asset prefix if necessary.
Check your environment variables: Make sure any environment variables that your application depends on are set correctly on your Ubuntu server.
Check for permission: Make sure file, build files on server has enough permissions.
Also if everything from above works fine than try dockerizing your application with nginx and run on local then simply mimic the same on server(ubuntu) that would definatly give you some clue.
and lastly, don't panic. 😃

utilizing a reverse proxy in Nginx on a react app with express backend

So as the title says I am deploying a react app with the express backend on an ec2 instance.
What I am attempting to do to do:
(just listing this here to provide crucial context just in case I'm messing up elsewhere)
have my express production mode run on port 80 with the react build html as root.
run the build on an ec2 instance
use nginx to reverse proxy to my domain on https and port 443
run server.js on production mode via PM2
Things I am currently having trouble with:
My Nginx configuration was originally configured to try to proxy the react app running with the express app through a reverse proxy between the two. That's changed so I am trying to now have the server configured to reverse proxy everything into my app.
I was following this article as my reference but the major difference is they want me to use the nginx conf file and not the sites_enabled file which I had made my initial nginx setup. From what i can see in the article it looks like the configuration files changed layout as well so that may be outdated practice.
Here is what I currently have for Nginx sites_enabled:
listen 443 default_server;
listen [::]:443 default_server;
server_name example.com www.example.com;
root /home/ubuntu/client/build;
location / {
try_files $uri /index.html;
}
location /complete {
proxy_pass https://www.example.com;
}
# managed by Certbot
ssl on;
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
# managed by Certbot
}
server {
if ($host = www.example.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = example.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 0.0.0.0:80;
server_name example.com www.example.com;
rewrite ^ https://$host$request_uri? permanent;
}
At the time of writing this I am not able to run things like this so I can only use express setting it to port 443 and placing the certification files there.

How do I apply SSL certs to my React app and Spring boot server?

I have deployed my project on a compute engine VM instance. React is running on some port and Spring Boot server is running on another port. I've downloaded certs for a subdomain on the VM. How do I apply them to the project so that it opens on HTTPS
We get PEM file from Let's Encrypt using certbot
certbot certonly -a standalone -d example.com
Create PKCS12 format using openssl
openssl pkcs12 -export -in fullchain.pem -inkey privkey.pem -out keystore.p12 -name tomcat -CAfile chain.pem -caname root
Add these properties to application.properties to add SSL certificate from Let's Encrypt
server.port: 443
security.require-ssl=true
server.ssl.key-store:/etc/letsencrypt/live/example.com/keystore.p12
server.ssl.key-store-password: store-password
server.ssl.keyStoreType: PKCS12
server.ssl.keyAlias: tomcat
You may install NGINX on your instance and use it as a reverse proxy to pass requests to each server depending on the subdomain, then you may update the configuration with SSL config.
If you plan on using certificates issued by Let's Encrypt, then you can use Certbot to amend the NGINX configuration with SSL config automatically.

React production using react-app-rewired nginx

I have tried to deploy my app on heroku and it work normally. But when I build my app using react-app-rewired script and deploy it to my server using nginx. When access my app, it still work fine but if I reload page with contextPath: http://35.240.229.243/products it throws 404 error. You can access my app in http://35.240.229.243 to test. I am using react-router with history. Help me thanks
First you need to find default nginx conf file and disable it, by default it will be under /etc/nginx/sites-enabled/default
sudo rm -rf /etc/nginx/sites-enabled/default
and create new file under /etc/nginx/sites-available/
sudo touch /etc/nginx/sites-enabled/default/redbox
and use vim or nano to put this text into new conf file redbox,
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
and enable it
sudo ln -s /etc/nginx/sites-available/redbox /etc/nginx/sites-enabled/redbox
next, make sure that there are no syntax errors in Nginx files,
sudo nginx -t
If no problems were found, restart Nginx.
sudo systemctl restart nginx

Issue using certbot with nginx

I'm actually working on a webapp, I use Reactjs for the frontend and Golang for the backend. Those 2 programs are hosted separately on 2 VMs on Google-Compute-Engine. I want to serve my app through https so I choose to use Nginx for serving the frontend in production. Firstly I made my config file for Nginx:
#version: nginx/1.14.0 (ubuntu)
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/banshee;
server_name XX.XXX.XX.XXX; #public IP of my frontend VM
index index.html;
location / {
try_files $uri /index.html =404;
}
}
For this part everything works as expected but after that I want to serve my App over https following this tutorial. I installed the packages software-properties-common,python-certbot-apache
and certbot but when I tried
sudo cerbot --nginx certonly
I get the following message:
gdes#frontend:/etc/nginx$ sudo certbot --nginx certonly
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Could not choose appropriate plugin: The requested nginx plugin does not appear to be installed
The requested nginx plugin does not appear to be installed
I made some searches on Google and here and I still can't figure out which plugin is missing or an other way to fix this.
Does someone have an idea tohelp me ?
Thanks a lot :)
I was trying to create Let's Encrypt certificate using certbot for my sub-domain and had the following issue.
Command:
ubuntu#localhost:~$ certbot --nginx -d my_subdomain.website.com -d my_subdomain2.website.com
Issue:
The requested Nginx plugin does not appear to be installed
Solution:
Ubuntu 20+
ubuntu#localhost:~$ sudo apt-get install python3-certbot-nginx
Earlier Versions
ubuntu#localhost:~$ sudo apt-get install python-certbot-nginx
You will need to replace
apt install python-certbot-nginx
by
apt install python3-certbot-nginx
You can install the Certbot nginx plugin with the following commands:
add-apt-repository ppa:certbot/certbot
apt update
apt install python-certbot-nginx
You have to re-install a python3 version of Lets Encrypt's certbot.
Run
sudo apt-get install python3-certbot-nginx
On Debian 10, certbot returns a "could not find a usable nginx binary" issue because, "/usr/sbin" is missing from the PATH. Add /usr/sbin to the PATH
export PATH=/usr/sbin:$PATH
Then certbot can make a certificate for nginx
certbot --nginx -d <server name> --post-hook "/usr/sbin/service nginx restart"
As explained on the debian wiki page for letsencrypt.

Resources