Issue using certbot with nginx - reactjs

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.

Related

Unable to run a react app inside docker container using nginx

I'm trying to run a react app inside a docker container using DOCKER-multistage.
The server is written on deno and I tried to add nginx server to dispatch the requests from the frontend to the server.
Dockerfile:
FROM ubuntu:20.04
# install curl
RUN apt-get update && apt-get install -y curl unzip sudo nginx
# install node.js v16.x
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
RUN apt-get install -y nodejs
# install postgresql
ARG DEBIAN_FRONTEND=noninteractive
RUN apt-get update && apt-get install -y \
curl vim wget \
build-essential \
libpq-dev &&\
apt-get update && apt-get install -y tzdata nodejs yarn postgresql postgresql-contrib
# install deno v1.21.3
RUN curl -fsSL https://deno.land/install.sh | sh -s v1.21.3
ENV DENO_INSTALL="/root/.deno"
ENV PATH="${DENO_INSTALL}/bin:${PATH}"
# Install denon
RUN deno install -qAf --unstable https://raw.githubusercontent.com/nnmrts/denon/patch-4/denon.ts
# The working directory of the project
WORKDIR /app
# Copy the app package and package-lock.json file
COPY frontend/build/ /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
# Copy the backend directory
RUN mkdir backend
COPY backend/deps.ts ./backend/deps.ts
RUN cd ./backend && deno cache --unstable deps.ts
ADD backend ./backend
EXPOSE 3000
COPY ./script.sh script.sh
CMD ./script.sh
script.sh:
#!/bin/bash
# create the database in postgres
service postgresql start && su - postgres -c "psql -U postgres -d postgres -c \"alter user postgres with password 'postgres';\"" \
&& su - postgres -c "psql postgres -c \"create database db;\""
# start nginx
sudo service nginx start
# Populate database tables
cd backend && deno run --unstable --allow-env --allow-net database/seeds.ts && denon start &
# Wait for any process to exit
wait -n
# Exit with status of process that exited first
exit $?
nginx.conf:
server {
listen 3000;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html;
proxy_pass http://localhost:5000/;
}
}
I build the image :
docker build . -t server-app
And I create a new container:
docker run -p 3000:3000 server-app
Everything is working and the deno server is listening on the 5000 port but when I run the app on localhost:3000/ I got this error:
The connection was reset
The connection to the server was reset while the page was loading.
The site could be temporarily unavailable or too busy. Try again in a few moments.
If you are unable to load any pages, check your computer’s network connection.
If your computer or network is protected by a firewall or proxy, make sure that Firefox is permitted to access the Web.
What's wrong with the config I have done?
I fixed the issue by updating the nginx.conf:
server {
listen 3000;
server_name localhost;
root /usr/share/nginx/html;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api {
rewrite ^/api/?(.*) /$1 break;
proxy_pass http://localhost:5000;
}
}

How use Certbot with NEXTJS

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 😉 🥳🥳

How would you enable HTTPS on a default nextjs app, Linux

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

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

How to run Ionic serve permanently?

I am using Ionic framework for one application. The code is on a linux server. I am running the application using ionic serve command through putty.
But, the problem is if I close the putty the application is stopped. Is there any way to run the ionic serve permanently as a daemon process?
I'm suspecting you're trying to do this because you want to serve your Ionic app as a web app, correct?
In that case - you don't have to run ionic serve permanently. All you have to do is take all the code from the www folder and place it in the http folder (or any other which is valid for your system) of your web server.
So, basically, spin up apache (or nginx) and serve the code from the Ionic's www folder. Basically, ionic serve command does the same thing - it spins up a local web server and serves the content from the www folder. It does that for faster local testing.
You can take a look at this SO question for more info on how to deploy Ionic as a website.
I wanted to test on my server using Ionic and Capacitor but the www folder wasn't running the third party apps.
Although not tested, technically the setup should be able to work for Ionic with the other frameworks e.g Vue, React, etc.
Using nginx and supervisor I got it to work.
Nginx config
sudo apt-get install nginx
sudo apt-get install nano
Create a conf file
sudo nano /etc/nginx/sites-available/ionic
Add the following inside the file.
server {
listen 8100;
server_name your-domain.com your-ip-address;
charset utf-8;
client_max_body_size 10M;
#Django media and static files
location / {
proxy_pass http://127.0.0.1:8101;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $http_connection;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Note, I'm listening on port 8100 but you could use any other port e.g. 80. Also, proxy_pass is set to 8101 as ionic will be running on this port. See below under the Supervisor config
Supervisor config
sudo apt-get install supervisor
Then create a conf file
sudo nano /etc/supervisor/conf.d/ionic.conf
Add the following inside
[program:ionic]
command=ionic serve --port=8101
directory=/path/to/your/ionic/folder
autostart=true
autorestart=true
startretries=3
stderr_logfile=/var/log/supervisor/ionic/error.log
stdout_logfile=/var/log/supervisor/ionic/out.log
As described earlier in the Nginx config, I'm serving ionic on port 8101.
Note: not get an error, create the ionic folder in the logs
sudo mkdir /var/log/supervisor/ionic
Then enable and restart the services
sudo ln -s /etc/nginx/sites-available/ionic /etc/nginx/sites-enabled
sudo systemctl restart nginx
sudo systemctl restart supervisor
sudo supervisord
Before opening your website, check that ionic is running on correct port in the log output file
tail -80 /var/log/supervisor/ionic/out.log
sudo systemctl enable supervisor
sudo systemctl enable nginx
http://your-domain.com:8100 or http://your-ip-address:8100

Resources