I have a website built in React. In my Mac, I could use yarn and PORT=8000 HTTPS=true ./node_modules/.bin/react-scripts start to launch the website in http://localhost:8000.
Now, I want to add Nginx to my Mac to simulate the environment of the production, especially for redirections. I just installed Nginx in my mac by brew, and here is /usr/local/etc/nginx/nginx.conf:
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8080;
server_name localhost;
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Accept-Encoding "";
proxy_set_header Proxy "";
proxy_pass http://localhost:8000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 443 ssl;
server_name localhost;
ssl_certificate /etc/ssl/localhost/localhost.crt;
ssl_certificate_key /etc/ssl/localhost/localhost.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location ~ /google {
proxy_pass https://www.google.com;
}
location ~ /faceboook {
rewrite ^ 'https://www.facebook.com' redirect;
}
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Accept-Encoding "";
proxy_set_header Proxy "";
proxy_pass https://localhost:8000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
include servers/*;
}
The result is that, https://localhost:443 in the browser redirects to https://localhost/#/ and runs my website.
However,
- I always want the domain to be
https://localhost:8000rather thanhttps://localhost:443orhttps://localhost/. - Additionally, I want
https://localhost:8000/googleto redirect tohttps://www.google.comandhttps://localhost:8000/facebookto redirect tohttps://www.facebook.combecause of Nginx.
Does anyone know how to achieve this?