How to run create-react-app dev server behind nginx proxy? - create-react-app

Previously create-react-app ok with Nginx. Straightforward Nginx configuration was doing the job. The dev server connection goes through /sockjs-node configuration. API connection goes through /api. Everything was fine. Simulates production-like environment without hassle.
location / {
proxy_pass http://127.0.0.1:3000;
location /sockjs-node {
proxy_pass http://127.0.0.1:3000;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_read_timeout 7d;
}
location /api {
proxy_pass http://127.0.0.1:8080/api;
}
}
But now the latest version has a slight change. It tries to connect wss://my_local_domain:3000/ws. It skipped my proxy setup and tries directly connect to the dev server. And failed because it is cross-origin and has no SSL support.
The question is Is there a way to tell the dev server to use a path-relative URL?

Related

.Net Core Hosting with HTTPS on Nginx with LetsEncrypt Cert

I currently have my project running http without any issues. Now I am working on encrypting my traffic by using https. I have a certificate for my domain and I set up all the code and areas I thought were necessary to deploy it as https.
When I do this and run it my web page is not displayed, I just get the default nginx page. When I do this with http my web page is displayed.
I've used a few articles on here to setup mine the way I currently have it so now im assuming i'm missing just some small detail that is why my https isn't working.
Here are all the steps I used for setting up my certificate and deploying it as HTTPS:
1. .Net Core Project.
Appsettings.json I added these 2 sections.
“Kestrel”: {
“Endpoints”: {
“Http”: {
“Url”: “http://localhost:60110”
},
“Https”: {
“Url”: “https://localhost:60111”
}
}
},
“https_port”: 60111
2. Program.cs
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStartup<Startup>()
.UseUrls(#“http://*:60110”)
.UseUrls(#"https://*:60111")
.UseKestrel();
});
3. Startup.cs
I added app.UseHsts();
4. Nginx I have 2 vhost files. 1 is for my ‘listen 80;” which works.
My 2nd is this :
server {
listen 443 ssl;
ssl_certificate /path/to/fullchain.pem #managed by Certbot
ssl_certificate_key /path/to/privkey.pem #managed by Certbot
root /var/www/websiteFolder;
server_name MyDomain.tech
location / {
proxy_pass http://localhost:60111;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
I setup the symbolic link in nginx/sites-enabled from sites-available
I did the sudo nginx -t and my syntax passes.
I also did the nginx -s reload to reload all my conf and vhost files on nginx.
What am I missing or did I do wrong?
Thank you all.
UPDATE:
One thing I found out last night.
I found out one issue, I still haven't solved this yet but..
because I have:
.UseUrls(#"https://*:60111")
My service was unable to start on ubuntu. It said it could not find the certificate.
So I am going to remove this line and see what happens.
I read that I should only need to declare my certificate on the web server [nginx] and not have to do it twice. [.net & nginx]
if this doesnt work I also want to try on my nginx vhost conf file. to
location / {
proxy_pass https://localhost:60111;
OR
proxy_pass http://localhost:60110;
with a possible httpsredirect()

Hosting a JWT authentication app on my server

I followed following tutorial https://jonathanmh.com/express-passport-json-web-token-jwt-authentication-beginners/ for JWT authentication. The complete code is viewable at https://gist.github.com/JonathanMH/6bd82c0954fb8f21a837ce281da4265a .
On my local machine the app runs fine but I would like to be able to deploy it on a virtual private server running Ubuntu server with NGINX.
How should my configuration for NGINX look to get it working on the server? Currently it looks like I'm running into a CORS issue or something.
After a long search I was able to find a solution for this. I had to add the cors npm package to my app.js file .
Then I had to change the 'api' calls to use the public ip adress of the server (in the jwt-vanilla.js of the tutorial) and as I'm using a server that is based in an OpenStack environment I also had to allow the port 3000 in OpenStack. (more details on installing cors can be seen in following video ( https://egghead.io/lessons/angularjs-client-setup-for-jwt-authentication )
I used following nginx config:
server {
listen 80;
server_name yourdomain.com;
location /{
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:3000/;
}
}
So right now I'm running nginx and on the server in the location of the app.js (port 3000) I started 'node app.js', while in the public folder I started http-server ( npm install http-server -g) which runs on 8080.

NginX Server block on GitLab is ignored

I've installed GitLab on a virtual machine in Microsoft Azure in which I also have an Apache2 web server that should respond with some static websites.
Since GitLab has an embedded NGinX web server I thought that it would have been sufficient to just make these two changes:
Make apache listen to another port rather than 80 (I changed it to 8090)
Add a server block to GitLab's NGinX (firstly by adding this configuration to gitlab.rb nginx['custom_nginx_config'] = "include /etc/nginx/conf.d/*.conf;" and then by creating the following block in /etc/nginx/conf.d/serverblock.conf)
server {
root /var/www/;
server_name .notgitlabdomain.com;
access_log /etc/nginx/logs/notgitlabdomain_access.log;
error_log /etc/nginx/logs/notgitlabdomain_error.log;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass 127.0.0.1:8090;
add_header X-Upstream $upstream_addr;
add_header NLC_S "s";
}
}
The problem is that this is not working so far. I opened and checked whether the nginx.conf (in /var/opt/gitlab/nginx/conf/) file is actually reading the server block I added and it is. But when I follow a link in my notgitlabdomain.com domain it redirects me to notgitlabdomain.com/users/sign_in with a Sass error that couldn't import a some css files.
Open develop tools and check the request.
I guess this issue is related about the configuration of gitlab (domain url)

nginx 403 external image error

I have just setup a nginx server for the first time. And I cannot load external images on my website.
I am trying to load resources from "ia.media-imdb.com" and receiving a 403 forbidden error. I believe it's likely this error message is due to the source server preventing the type of hotlinking I'm attempting to do, which can easily be done through the web server configuration right.
But I still haven't figured out what to change in the configuration.
I have granted 755 access to almost all the files and folder
This is my site conf in nginx/sites_availible/conf
server {
listen 80;
server_name _;
location /{
proxy_pass http://178.62.31.49:4000;
proxy_http_version 1.1;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
allow all;
}
If anyone could point me in the right direction or help me solve this, that would be great.

Load tomcat application via DNS without typing 8080

I am having a Amazon EC2 Ubuntu instance. I have installed LAMP server and tomcat 7. I also have application running in tomcat.
Now, my URL for apache is - http://ec2-54-xx-xx-xx.us-west-2.compute.amazonaws.com/
My URL for tomcat application is: http://ec2-54-xx-xx-xx.us-west-2.compute.amazonaws.com:8080
Instead of writing the 8080 part, I would like to call this directly via the URL http://ec2-54-xx-xx-xx.us-west-2.compute.amazonaws.com/.
I went through lot of tutorials, all are invalid, out dated or missing details. I am apache2, so the files inside the apache2 directory are below.
How can I do this "properly"? Because I will purchase a domain name in this weekend and I will replace the long amazon URL with this one soon as well.
What you need is a reverse proxy. You should setup nginx or httpd server instance, which would proxy requests from port 80 (http) to your local 8080 port (tomcat).
Here's a sample configuration for nginx:
upstream tomcat {
server 127.0.0.1:8080; # your tomcat app address
}
server {
listen 80;
root /path/to/your/app/directory;
index index.html index.htm;
server_name your.app.domain;
location / {
try_files $uri $uri/index.html $uri.html #tomcat;
}
location #tomcat {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_redirect off;
proxy_pass http://tomcat;
}
}