deploy react on server nginx on port 443

Question

we run a react project on port 3000 with the yarn start command. Now we want to use ssl to read the project from port 3000 and show it in the browser. We don't want port 3000 in the url and in fact we want it to come up with port 443. We also tried proxy pass in nginx, but we did not get a response. Do you have a solution?

{
"name": "cp-nextjs",
"version": "3.20.112",
"private": true,
"scripts": {
    "dev": "next dev -p 70",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
},
"dependencies": {
    "@next/bundle-analyzer": "^12.0.8",
    "@vue/compiler-dom": "^3.2.37",
    "axios": "^0.22.0",
    "bootstrap": "^4.6.1",
    "express": "^4.17.1",
    "mapbox-gl": "^1.13.1",
    "mapir-react-component": "^2.0.1",
    "moment-jalaali": "^0.9.4",
    "next": "^11.1.2",
    "next-cookies": "^2.0.3",
    "nprogress": "^0.2.0",
    "ol": "^6.9.0",
    "ol-mapbox-style": "^6.8.3",
    "react": "17.0.2",
    "react-bootstrap-sweetalert": "^5.2.0",
    "react-collapsible": "^2.8.4",
    "react-cropper": "^2.1.8",
    "react-device-detect": "^1.17.0",
    "react-dom": "17.0.2",
    "react-ga": "^3.3.0",
    "react-inner-image-zoom": "^1.3.0",
    "react-input-range": "^1.3.0",
    "react-joyride": "^2.3.2",
    "react-map-gl": "^5.3.16",
    "react-owl-carousel": "^2.3.3",
    "react-select": "^5.1.0",
    "react-slick": "^0.28.1",
    "react-star-ratings": "^2.3.0",
    "react-toastify": "^7.0.4",
    "react-voice-recorder": "^2.1.0",
    "slick-carousel": "^1.8.1",
    "swr": "^1.1.0",
    "uuid": "^8.3.2"
},
"devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "html-loader": "^3.0.1"
}
}

this my package.json I can run project on port 3000 by command yarn start but I want start on port 443

mehdi musavi · Answer

you can config in apache

Apache, listening to port 80 on example.com, would reverse proxy to port 1234. Then requests for http://example.com/myapp would be internally proxied to http://example.com:1234/myapp (or however you setup your ProxyPass target).

you can use mod_rewrite's Proxy flag and setup some rules inside an .htaccess file. such as below:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^myapp(.*) http://example.com:1234/$1 [P,L]

deploy react on server nginx on port 443

1 Answers