search

mars / create-react-app-buildpack

⚛️ Heroku Buildpack for create-react-app: static hosting for React.js web apps
MIT License
3.28k stars 653 forks source link

proxy not working, getting status of 503 (Service Unavailable) on browser #147

Closed jonager closed 5 years ago

jonager commented 5 years ago

Hi, I've been following the buildpack guide on how to set up your proxy in the static.json file, but I keep getting a 503 error on my browser. My front-end and back-end are different apps both hosted on heroku. I tested some endpoints on my back-end and it's working. My static.json file:

{
    "root": "build/",
    "proxies": {
        "/api/": {
            "origin": "${API_URL}"
        }
    }
}

My package.json file:

{
    "name": "app name",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "autoprefixer": "7.1.6",
        "axios": "^0.18.0",
        "babel-core": "6.26.0",
        "babel-eslint": "7.2.3",
        "babel-jest": "20.0.3",
        "babel-loader": "7.1.2",
        "babel-preset-react-app": "^3.1.1",
        "babel-runtime": "6.26.0",
        "case-sensitive-paths-webpack-plugin": "2.1.1",
        "chalk": "1.1.3",
        "css-loader": "0.28.7",
        "dotenv": "4.0.0",
        "dotenv-expand": "4.2.0",
        "eslint": "4.10.0",
        "eslint-config-react-app": "^2.1.0",
        "eslint-loader": "1.9.0",
        "eslint-plugin-flowtype": "2.39.1",
        "eslint-plugin-import": "2.8.0",
        "eslint-plugin-jsx-a11y": "5.1.1",
        "eslint-plugin-react": "7.4.0",
        "extract-text-webpack-plugin": "3.0.2",
        "file-loader": "1.1.5",
        "fs-extra": "3.0.1",
        "html-webpack-plugin": "2.29.0",
        "jest": "20.0.4",
        "node-vibrant": "^3.0.0",
        "object-assign": "4.1.1",
        "postcss-flexbugs-fixes": "3.2.0",
        "postcss-loader": "2.0.8",
        "promise": "8.0.1",
        "raf": "3.4.0",
        "react": "^16.4.0",
        "react-dev-utils": "^5.0.1",
        "react-dom": "^16.4.0",
        "react-notify-toast": "^0.5.0",
        "react-redux": "^5.0.7",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2",
        "react-toasts": "^2.0.14",
        "react-waypoint": "^8.0.3",
        "redux": "^4.0.0",
        "redux-thunk": "^2.2.0",
        "resolve": "1.6.0",
        "style-loader": "0.19.0",
        "sw-precache-webpack-plugin": "0.11.4",
        "url-loader": "0.6.2",
        "webpack": "3.8.1",
        "webpack-dev-server": "2.9.4",
        "webpack-manifest-plugin": "1.3.2",
        "whatwg-fetch": "2.0.3"
    },
    "scripts": {
        "start": "node scripts/start.js",
        "build": "node scripts/build.js",
        "test": "node scripts/test.js --env=jsdom"
    },
    "jest": {
        "collectCoverageFrom": [
            "src/**/*.{js,jsx,mjs}"
        ],
        "setupFiles": [
            "<rootDir>/config/polyfills.js"
        ],
        "testMatch": [
            "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
            "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
        ],
        "testEnvironment": "node",
        "testURL": "http://localhost",
        "transform": {
            "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
            "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
            "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
        },
        "transformIgnorePatterns": [
            "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
        ],
        "moduleNameMapper": {
            "^react-native$": "react-native-web"
        },
        "moduleFileExtensions": [
            "web.js",
            "js",
            "json",
            "web.jsx",
            "jsx",
            "node",
            "mjs"
        ]
    },
    "babel": {
        "presets": [
            "react-app"
        ]
    },
    "eslintConfig": {
        "extends": "react-app"
    }
}

My call from the front-end:

getNewReleases = () => {
        axios
            .get('/api/spotify/new-releases')
            .then(response => {
                this.setState({
                    newReleases: response.data
                });
            })
            .catch(error => {
                console.log(error);
            });
    };

This is the output from git push heroku master: Counting objects: 3, done. Delta compression using up to 8 threads. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 279 bytes | 279.00 KiB/s, done. Total 3 (delta 2), reused 0 (delta 0) remote: Compressing source files... done. remote: Building source: remote: remote: -----> React.js (create-react-app) multi app detected remote: -----> Configure create-react-app build environment remote: Using NODE_ENV=development remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git remote: =====> Detected Framework: Multipack remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git remote: =====> Detected Framework: Node.js remote: remote: -----> Creating runtime environment remote: remote: NPM_CONFIG_LOGLEVEL=error remote: NPM_CONFIG_PRODUCTION=false remote: NODE_ENV=development remote: NODE_MODULES_CACHE=true remote: NODE_VERBOSE=false remote: remote: -----> Installing binaries remote: engines.node (package.json): unspecified remote: engines.npm (package.json): unspecified (use default) remote: remote: Resolving node version 10.x... remote: Downloading and installing node 10.15.0... remote: Using default npm version: 6.4.1 remote: remote: -----> Restoring cache remote: - node_modules remote: remote: -----> Building dependencies remote: Installing node modules (package.json + package-lock) remote: audited 13795 packages in 14.277s remote: found 1 high severity vulnerability remote: run npm audit fix to fix them, or npm audit for details remote: remote: -----> Caching build remote: - node_modules remote: remote: -----> Pruning devDependencies remote: Skipping because NODE_ENV is not 'production' remote: remote: -----> Build succeeded! remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git remote: =====> Detected Framework: React.js (create-react-app) remote: Using existing static.json remote: Enabling runtime environment variables remote: remote: > app-name@0.1.0 build /tmp/build_fba958f5358eb6b6373b0efa010752cf remote: > node scripts/build.js remote: remote: Creating an optimized production build... remote: Compiled successfully. remote: remote: File sizes after gzip: remote: remote: 132.31 KB build/static/js/main.ef13dfdc.js remote: 3.44 KB build/static/css/main.df20c72f.css remote: remote: The project was built assuming it is hosted at the server root. remote: You can control this with the homepage field in your package.json. remote: For example, add this to build it for GitHub Pages: remote: remote: "homepage" : "http://myname.github.io/myapp", remote: remote: The build folder is ready to be deployed. remote: You may serve it with a static server: remote: remote: npm install -g serve remote: serve -s build remote: remote: Find out more about deployment here: remote: remote: http://bit.ly/2vY88Kr remote: remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git remote: =====> Detected Framework: Static HTML remote: % Total % Received % Xferd Average Speed Time Time Time Current remote: Dload Upload Total Spent Left Speed remote: 100 838k 100 838k 0 0 15.1M 0 --:--:-- --:--:-- --:--:-- 15.1M remote: -----> Installed directory to /app/bin remote: Using release configuration from last framework (Static HTML). remote: -----> Discovering process types remote: Procfile declares types -> (none) remote: Default types for buildpack -> web remote: remote: -----> Compressing... remote: Done: 59.1M remote: -----> Launching... remote: Released v6 remote: https://app-name.herokuapp.com/ deployed to Heroku remote: remote: Verifying deploy... done. To https://git.heroku.com/app-name.git 63e3b9c..039a188 master -> master

mars commented 5 years ago

503 error usually means the app is crashing or otherwise not responding to requests.

Run heroku logs -t -n 1500 to see recent history and then “tail” (follow) the log in real-time.

Watch these logs during deploy and then runtime too, and probably you’ll see the app throwing errors that you can resolve by correcting code or setting up config vars.

jonager commented 5 years ago

@mars While trying to fix the problem I had redeployed the app and forgot to set API_URL config var, I did that and now I am getting a 404 error. Here's the log form running heroku logs --tail:

2019-01-06T22:35:44.813487+00:00 heroku[web.1]: State changed from crashed to starting
2019-01-06T22:35:44.374935+00:00 app[api]: Set API_URL config vars by user user@hotmail.com
2019-01-06T22:35:55.751500+00:00 heroku[web.1]: Starting process with command `bin/boot`
2019-01-06T22:35:58.125730+00:00 app[web.1]: Injecting runtime env into /app/build/static/js/main.ef13dfdc.js (from .profile.d/inject_react_app_env.sh)
2019-01-06T22:35:58.978064+00:00 app[web.1]: Starting log redirection...
2019-01-06T22:35:58.978491+00:00 app[web.1]: Starting nginx...
2019-01-06T22:38:43.458213+00:00 heroku[router]: at=info method=GET path="/manifest.json" host=albumfied.herokuapp.com request_id=ba008df3-c2ed-4103-b315-9cbe8a74124d fwd="98.242.149.225" dyno=web.1 connect=1ms service=4ms status=200 bytes=550 protocol=https
2019-01-06T22:38:43.503751+00:00 heroku[router]: at=info method=GET path="/service-worker.js" host=albumfied.herokuapp.com request_id=c6dcaffb-8850-49e1-bbbb-35196e0e281b fwd="98.242.149.225" dyno=web.1 connect=0ms service=3ms status=200 bytes=1638 protocol=https
2019-01-06T22:38:48.808916+00:00 app[web.1]: 10.47.236.25 - - [06/Jan/2019:22:38:48 +0000] "GET /api/spotify/new-releases HTTP/1.1" 404 159 "https://albumfied.herokuapp.com/home" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"
2019-01-06T22:38:50.350249+00:00 app[web.1]: 10.47.236.25 - - [06/Jan/2019:22:38:50 +0000] "GET /service-worker.js HTTP/1.1" 200 1363 "https://albumfied.herokuapp.com/service-worker.js" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"
2019-01-06T22:38:52.660296+00:00 heroku[router]: at=info method=GET path="/static/css/main.df20c72f.css.map" host=albumfied.herokuapp.com request_id=52944360-cd75-4d04-8236-eb5f9d091dff fwd="98.242.149.225" dyno=web.1 connect=0ms service=5ms status=200 bytes=29460 protocol=https
2019-01-06T22:40:16.157845+00:00 heroku[router]: at=info method=GET path="/api/spotify/new-releases" host=albumfied.herokuapp.com request_id=a6e7e388-4c78-4f42-81d7-96661d4fc386 fwd="98.242.149.225" dyno=web.1 connect=0ms service=30ms status=404 bytes=434 protocol=https
2019-01-06T22:40:16.161071+00:00 app[web.1]: 10.97.237.147 - - [06/Jan/2019:22:40:16 +0000] "GET /api/spotify/new-releases HTTP/1.1" 404 159 "https://albumfied.herokuapp.com/home" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"
2019-01-06T22:41:28.047409+00:00 heroku[router]: at=info method=GET path="/service-worker.js" host=albumfied.herokuapp.com request_id=c6f2e6e8-cf91-47f1-987a-7868d97b8c17 fwd="98.242.149.225" dyno=web.1 connect=1ms service=12ms status=200 bytes=1638 protocol=https
2019-01-06T22:41:28.056958+00:00 app[web.1]: 10.101.252.194 - - [06/Jan/2019:22:41:28 +0000] "GET /service-worker.js HTTP/1.1" 200 1363 "https://albumfied.herokuapp.com/service-worker.js" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"
2019-01-06T22:41:34.694208+00:00 heroku[router]: at=info method=GET path="/api/spotify/new-releases" host=albumfied.herokuapp.com request_id=5827d214-2e74-4e43-b9b6-fc94f1efcea3 fwd="98.242.149.225" dyno=web.1 connect=1ms service=30ms status=404 bytes=434 protocol=https
2019-01-06T22:41:34.701447+00:00 app[web.1]: 10.101.252.194 - - [06/Jan/2019:22:41:34 +0000] "GET /api/spotify/new-releases HTTP/1.1" 404 159 "https://albumfied.herokuapp.com/home" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"
2019-01-06T22:41:36.287625+00:00 app[web.1]: 10.101.252.194 - - [06/Jan/2019:22:41:36 +0000] "GET /service-worker.js HTTP/1.1" 200 1363 "https://albumfied.herokuapp.com/service-worker.js" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"
mars commented 5 years ago

The logged 404 error shows what URL/path is being requested:

app[web.1]: 10.97.237.147 - - [06/Jan/2019:22:40:16 +0000] "GET /api/spotify/new-releases HTTP/1.1" 404 159 "https://albumfied.herokuapp.com/home" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"

So, GET /api/spotify/new-releases is the 404.

Make sure you either setup your backend API’s routes to match what the frontend requests, or configure the frontend proxy to set the backend request URL to match what the backend API requires.