I would like to enable Google Cloud IAP to control access to App Engine, and use it behind an external reverse proxy.
For example:
https://my-domain.com >> https://my-domain.appspot.com
I have the external (nginx) proxy configured as follows:
location /
{
set $target my-domain.appspot.com;
proxy_pass https://$target;
proxy_set_header Host $target;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
proxy_intercept_errors on;
}
Cloud IAP, however, redirects me to my-domain.appspot.com after logging in.
Is there any additional configuration I am missing?
Related
I am trying to make it so that a request at path https://example.com/projects/pixelstacker/demo will serve static files that are located at /services/pixelstacker.web.net/wwwroot/dist. I want it to be located there so that I can keep related files closer together in the deployment system and file trees. It just makes it easier to manage. I'm having troubles getting this done in plesk because plesk does not allow you to make custom directives at the root / level for nginx.
The nginx configuration for my .net core app looks like this:
location /projects/pixelstacker/ {
proxy_pass http://localhost:5005/;
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-Host $host;
proxy_set_header X-Real-IP $remote_addr; # remote IP addr again?
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # remote IP addr
proxy_set_header X-Forwarded-Proto $scheme;
proxy_redirect off;
}
And then my configuration for my react app can do a basic proxy that WILL work, but only if the files for my react project are deployed to a publicly accessible folder. I'm trying to get this to work but for a folder that is located outside of the httpdocs directory instead. The public folder would be located at /httpdocs/projects/pixelstacker.web.react
# React
# https://stackoverflow.com/questions/53207059/react-nginx-routing-to-subdirectory
location ^~ /projects/pixelstacker/demo {
alias /var/www/vhosts/example.com/httpdocs/projects/pixelstacker.web.react;
try_files $uri $uri/ /projects/pixelstacker.web.react/index.html;
}
Any tips or advice? Thanks!
I have a Spring app and a React act written so that the user can use facebook to login. I have also bought a domain with an SSL certificate and installed the certificate in my nginx reverse proxy.
Here is my nginx config (it runs in a docker container):
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name frontend;
location / {
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Frame-Options SAMEORIGIN;
proxy_pass http://host.docker.internal:3000/;
}
}
server {
listen 443 ssl;
server_name frontend_secure;
ssl_certificate /etc/ssl/private/8e3a263352b3f661.pem;
ssl_certificate_key /etc/ssl/private/key.key;
location / {
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Frame-Options SAMEORIGIN;
proxy_pass http://host.docker.internal:3000;
}
location /api {
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Frame-Options SAMEORIGIN;
proxy_pass http://host.docker.internal:8081;
}
}
}
I added my https domain to the App Domains, Site URL, Domains and Valid OAuth Redirect URIs in the Facebook console. In the backend spring config I have my https domain setup as the login success url:
http.authorizeRequests()
.antMatchers("/api/users/login**", "/callback/", "/webjars/**", "/error**", "/api/users/availableAuths").permitAll()
.antMatchers("/oauth_login", "/loginFailure", "/").permitAll()
.anyRequest().authenticated()
.and()
.oauth2Login()
.defaultSuccessUrl("https://domain.dev/", true)
.failureUrl("/loginFailure")
.loginPage("/api/users/availableAuths")
.and()
.logout()
.logoutUrl("/");
I can see the frontend properly (with secure https) and it redirects to facebook correctly to login. The problem is that when I login I get this message:
Facebook has detected Eat App isn't using a secure connection to transfer information.
Until Eat App updates its security settings, you won't be able to use Facebook to log into it.
I can see that in the link where facebook stops there is
https://www.facebook.com/v2.8/dialog/oauth? (...) redirect_uri=http%3A%2F%2Fdomain.dev%2Fapi%2Flogin%2Foauth2%2Fcode%2Ffacebook
So the redirect_uri in the facebook url is HTTP and not HTTPS. Why is that? Where does this redirect_uri param with http come from?
----- SECOND ATTEMPT ------
The problem and idea is still the same as below, but this is what I have for NGINX now:
set $QA "http://reactapp-qa:80";
set $DEV "http://reactapp-dev:80";
set $PROD "http://reactapp-prod:80";
location /dev {
rewrite ^/dev(.*)$ /$1 break;
proxy_pass $DEV;
}
location /qa {
rewrite ^/qa(.*)$ /$1 break;
proxy_pass $QA;
}
#reactapp
location / {
rewrite /(.*) /$1 break;
proxy_pass $PROD;
}
My / location works great
The other locations load the header and some page elements from the app but do not trigger react axios api calls like the / location does, so they fail.
I feel like I am much closer, just need to figure out what is happening with the axios calls.
----- ORIGINAL POST ------
PROBLEM SUMMARY
We have a React app in a container and nginx in another container in the host.
The configuration works now but we want to make it work a little differently - we want three seperate copies of the React app in their own containers to be reachable from different addresses - but are having problems understanding what we need to do to make it work.
BACKGROUND
The app is using React/Dotnetcore app in a stack in a host in Rancher 1.6.
I am not a React Developer but can talk to the one who wrote the app Monday! We also inherited Nginx and i've been learning to use it by trial by fire.
CONFIGURATION EXAMPLES
Here is our NGINX location block for our currently functioning configuration. This all works great as outlined in the Actual and Expected Results section below:
set $ReactAppDev_url "http://reactapp-development:80";
set $ReactAppQA_url "http://reactapp-qa:80";
set $ReactAppProd_url "http://reactapp-production:80";
location / {
rewrite /(.*) /$1 break;
proxy_set_header Authorization $http_authorization;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
proxy_set_header X-Forwarded-Proto https;
resolver {{DNS_RESOLVER}} valid=30s;
proxy_pass $ReactAppDev_url;
}
I'm sure what i've tried as a start is probably going about things the wrong way but replacing the / location blocks with /production was my first attempt. I don't really think I understand how it all fits together despite reading a handful of articles and nginx official docs about the rewrite module and locations:
set $ReactAppDev_url "http://reactapp-development:80";
set $ReactAppQA_url "http://reactapp-qa:80";
set $ReactAppProd_url "http://reactapp-production:80";
location /production {
rewrite /production/(.*) /$1 break;
proxy_set_header Authorization $http_authorization;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
proxy_set_header X-Forwarded-Proto https;
resolver {{DNS_RESOLVER}} valid=30s;
proxy_pass $ReactAppProd_url;
}
location /dev {...same as above but dev in rewrite and proxy_pass $ReactAppDev_url}
location /qa {...same as above but qa in rewrite and proxy_pass $ReactAppQA_url}
This resulted in the page not working:
[error] 29#29: *5 directory index of "/" is forbidden, client: , server: localhost, request: "GET / HTTP/1.1", host: ""
1/19/2019 8:01:52 PM - - [20/Jan/2019:03:01:52 +0000] "GET / HTTP/1.1" 403 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
ACTUAL AND EXPECTED RESULTS
Here is what a user does to interact with the site now - this all functions:
User hits https://www.servername.com/ and the React app shows a login page.
User enters login credentials and React app detects identity
If identity is good React app displays https://www.servername.com/request with request data
I am trying to make it so that the user can access one of three uris and be routed to different internal services depending on which uri is hit:
User hits https://www.servername.com/development> location block above functions
User hits https://www.servername.com/qa> location block above functions but proxy_pass directive uses ReactAppQA_url instead
User hits https://www.servername.com/production> location block above functions but proxy_pass directive uses ReactAppProduction_url instead
Each url is a copy of the app just at a different internal rancher service; user enters login credentials, app detects identity
If identity is good app opens www.servername.com/request
I'm not sure if this gets configured in Nginx or if the React app itself would need configuration to enable users to reach /development, /qa, /production.
Would anyone be so kind as to offer any suggestions about how we might be able to configure this?
I ended up dropping URI's as a method of determining which of three 'environments' a user would want to reach and just used ports instead.
That made the configuration much simpler and made it so that I could just have three server blocks - one listening on 443(production), one listening on port 8443(qa) and one listening on port 8444 (development), each directing users to a different container containing the same app.
Here is a stripped down version of the final version:
worker_processes 2;
events {
worker_connections 8096;
multi_accept on;
use epoll;
}
worker_rlimit_nofile 40000;
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
sendfile on;
tcp_nopush on;
keepalive_timeout 15;
server { #Handles port 443 traffic (Production)
#Setup port and server
listen 443 ssl;
server_name {{SERVER_NAME}};
#omitted SSL and proxy settings
set $ReactApp1_url "http://reactapp1:81";
location / {
rewrite /(.*) /$1 break;
proxy_set_header Authorization $http_authorization;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
proxy_set_header X-Forwarded-Proto https;
resolver {{DNS_RESOLVER}} valid=30s;
add_header X-Environment "production";
proxy_pass $ReactApp1_url;
}
}
server { #Handles port 8444 traffic (Development)
#Setup port and server
listen 8444 ssl;
server_name {{SERVER_NAME}};
#omitted SSL and proxy settings
set $ReactApp2_url "http://reactapp2:80";
location / {
rewrite /(.*) /$1 break;
proxy_set_header Authorization $http_authorization;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
proxy_set_header X-Forwarded-Proto https;
resolver {{DNS_RESOLVER}} valid=30s;
add_header X-Environment "dev";
proxy_pass $ReactApp2_url;
}
}
server { #Handles all port 8443 traffic (QA)
listen 8443 ssl;
server_name {{SERVER_NAME}};
#omitted SSL and proxy settings
set $ReactApp3_url "http://reactapp3:80";
location / {
rewrite /(.*) /$1 break;
proxy_set_header Authorization $http_authorization;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
proxy_set_header X-Forwarded-Proto https;
resolver {{DNS_RESOLVER}} valid=30s;
add_header X-Environment "qa";
proxy_pass $ReactApp3_url;
}
}
}
I have 3 AngularJS application each having their own ExpressJS backend. How do you deploy all 3 applications in this manner:
http://myapp.com/<app1>
http://myapp.com/<app2>
http://myapp.com/<app3>
Additional Information:
- I'm deploying the application in AWS EC2 Instance
- I tried merging the application in a single ExpressJS app. While this works, I still want to know if the case above is possible
Sure it's possible. You'll just need NGINX or Apche running as a reverse proxy for you.
Assuming your node apps are running on local ports 3000, 3001, and 3002, you'd setup a .conf file with those as upstream servers for the location tags like so:
. . .
location /app1 {
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;
}
. . .
location /app2 {
proxy_pass http://localhost: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;
}
}
Read up on more details here: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04
server {
listen 80;
server_name es.domain.com;
location /app1 {
rewrite ^/(.*) /$1 break;
proxy_ignore_client_abort on;
proxy_pass http://localhost:3001;
proxy_redirect http://localhost:3001 https://es.domain.com/appw;
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;
auth_basic "Elasticsearch Authentication";
auth_basic_user_file /etc/elasticsearch/user.pwd;
}
location /app2 {
rewrite ^/(.*) /$1 break;
proxy_ignore_client_abort on;
proxy_pass http://localhost:3002;
proxy_redirect http://localhost:3002 https://es.domain.com/app2;
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;
auth_basic "Elasticsearch Authentication";
auth_basic_user_file /etc/elasticsearch/user.pwd;
}
}
Please refer this link
http://www.minvolai.com/blog/2014/08/Setting-up-a-Secure-Single-Node-Elasticsearch-server-behind-Nginx/Setting-up-a-Secure-Single-Node-Elasticsearch-server-behind-Nginx/
You can setup AWS CloudFront and setup each application as Origins. It provides flexibility to route from single domain(Setup for CloudFront) to different Express Apps and also allows to cache Static content paths at Edge locations.
I have two different application one acts as a backend panel whereas one app is client facing site.
I have set the client site on the default 80 port and backend panel app is on say port number 8000.
I am facing issue when i try to bind wwww.abc.com:8000 to www.abc.com/admin. On opening of the link, text do gets displayed but css and js is not getting loaded. I found in console that its says CSS and javascript files are not found. Also, the address it specifies for css and javascript is of the root folder and not of the backend panel folder.
Here is the code I have written to setup nginx to bind the route is here
server {
listen 80;
server_name abc.com
include /etc/nginx/mime.types;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:1337;
}
location ^~ /admin {
root /root/workspace/lexcarts-admin-panel;
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:8000;
proxy_redirect on;
}
}
Client app is accessible from default www.abc.com .
Please guide me where i am going wrong.
TIA