How to add https to a custom domain for local development - nginx

I am using MacOS
I have edited the hosts file:
127.0.0.1 customdomain.com
And this is my nginx config:
server {
listen 80;
listen [::]:80;
server_name customdomain.com www.customdomain.com;
location / {
proxy_pass http://127.0.0.1:5173;
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;
}
}
But i just can't get ssl working.

Related

How can I properly configure nginx to work with Angular with using hot reload?

I run my server app with command: ng serve and get error in browser console:
Firefox cannot connect to the wss://dev.domain.com/ws server.
[webpack-dev-server] Trying to reconnect...
or on chrome:
WebSocket connection to 'wss://dev.domain.com/ws' failed
[webpack-dev-server] Disconnected!
[webpack-dev-server] Trying to reconnect...
My config nginx is:
location ^~ / {
proxy_pass http://localhost:4200;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
}
location ^~ /sockjs-node/ {
proxy_pass http://localhost:4200;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
}
location ^~ /ws/ {
proxy_pass http://localhost:4200;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
}
This should work, but it doesn't. my configuration is wrong?
That works for me for Angular 14 :
location /ng-cli-ws {
proxy_pass http://host-gateway:4200;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header Host $host;
}
If your app is using /ws, try to remove ending slash, else nginx responds with 301 to /ws/...
I second Vlad's answer, but I would like to elaborate on the solution.
I wanted my Angular application to be able to reload any changes at development time and be able to display them through HTTPS. So the following is what is working fine for me. It includes configuration managed by Certbot; and omits an additional default server block.
upstream frontend {
server 0.0.0.0:4200 fail_timeout=3s max_fails=3;
server 0.0.0.0:80 backup;
}
upstream wsfront {
ip_hash;
server 0.0.0.0:4200;
}
server {
server_name my.domain.net;
location ~ ^/ng-cli-w(s|s/)$ {
proxy_pass http://wsfront;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
location / {
proxy_pass http://frontend;
}
listen [::]:443 ssl;
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/my.domain.net/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/my.domain.net/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
server {
if ($host = my.domain.net) {
return 301 https://$host$request_uri;
}
listen 80 ;
listen [::]:80 ;
server_name my.domain.net;
return 404;
}

Regex for nginx server_name

I would like to use a regex on my nginx server_name that functions almost like a wildcard.
*-dev.mydomain.com -> dev server (localhost port 3001)
*-staging.mydomain.com -> staging server (localhost port 3002)
everything else -> prod server (localhost port 3000)
However I cannot for the life of me get this to work.
I seemingly get it working on https://regexr.com/51teh - but I'm not able to apply it correctly to my nginx config.
Here is my staging config now (not working, not catching requests to *-staging.mydomain.com):
server {
listen 443 ssl;
server_name "~.*-staging\.mydomain\.com";
location / {
proxy_pass http://localhost:3002;
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;
proxy_set_header x-forwarded-for $remote_addr;
}
}
Try adding another virtual server block with default_server to the listen directive. Something like the following:
server {
listen 443 ssl default_server;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}
server {
listen 443 ssl;
server_name "~.*-staging\.mydomain\.com";
location / {
proxy_pass http://localhost:3002;
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;
proxy_set_header x-forwarded-for $remote_addr;
}
}
This should work.

How to listen 2 ports in nginx?

I want to listen to ports with nginx and set the proxy.
here is the conf of the server
server{
listen 8080;
location / {
proxy_pass http://127.0.0.1:82;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-live;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
server{
listen 8081;
location / {
proxy_pass http://127.0.0.1:83;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-live;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
the 8080 is ok but the 8081 can not be connected
The sample might help you. I think this is a duplicate of Nginx multiple ports
server {
listen 80;
listen 8000;
server_name example.org;
root /var/www/;
}

Nginx config for subdomain and forum

I'm trying to configure nginx to do the following:
redirect example.com and www.example.com to my old website
www.example.com/forum or example.com/forum to forum webserver (ip)
any other subdomain to .example.com, reverse proxied to node.js
I know the following does not work, how should I configure?
server {
listen 80;
server_name www.example.com example.com;
location /forum {
proxy_pass http://<forum ip>/;
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;
}
return 301 $scheme://www.old-website.com;
}
server {
listen 80;
server_name ~^(.*)\.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;
}
}
The naked return 301 will prevent the location /forum block from being considered. Try wrapping it inside a default location block:
location /forum {
...
}
location / {
return 301 $scheme://www.old-website.com;
}

Accept only subdomain in nginx

I have a reverse proxy set up in nginx for a node.js server.
server {
listen 80;
server_name sub.domain.tld;
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;
}
}
It works all fine and dandy, however, I only want sub.domain.tld to work. Opening up domain.tld in a browser still routes to the node.js server.
try to add this
server {
listen 80;
server_name domain.tld;
return 404;
}

Resources