I am triying to deploy an application created using CRA with Typescript into the Google Cloud App Engine service, however, for some reason, the appspot link keeps loading forever until a 502 Bad Gateway appears (the error appears sometimes, normally it just keeps loading..)
I've already checked several tutorials and questions without success.
- Deploy create-react-app on Google App Engine
- https://medium.com/tech-tajawal/deploying-react-app-to-google-app-engine-a6ea0d5af132
The app.yaml is the following:
env: flex
runtime: nodejs
handlers:
- url: /static/js/(.*)
static_files: build/static/js/\1
upload: build/static/js/(.*)
- url: /static/css/(.*)
static_files: build/static/css/\1
upload: build/static/css/(.*)
- url: /static/media/(.*)
static_files: build/static/media/\1
upload: build/static/media/(.*)
- url: /(.*\.(json|ico))$
static_files: build/\1
upload: build/.*\.(json|ico)$
- url: /
static_files: build/index.html
upload: build/index.html
- url: /.*
static_files: build/index.html
upload: build/index.html
env_variables:
REACT_APP_DEV_API_URL: "......"
REACT_APP_MAP_API_KEY: "........"
# [END app_yaml]Logs of the app engine (It seems it's calling the 'npm run start' command each time I open a page)
Of course, my application works fine in dev mode and also it doesn't seem to be any problem in the deployment logs. If someone has experienced this problem before, please let me know how to solve it. Thanks in advance.
package.json:
{
"name": "testing-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/google-map-react": "^1.1.5",
"@types/jest": "^24.0.0",
"@types/lodash": "^4.14.149",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-helmet": "^5.0.15",
"@types/react-router-dom": "^5.1.3",
"@types/styled-components": "^5.0.0",
"@types/swiper": "^5.2.1",
"axios": "^0.19.2",
"google-map-react": "^1.1.6",
"lodash.differenceby": "^4.8.0",
"lodash.throttle": "^4.1.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-circular-progressbar": "^2.0.3",
"react-dom": "^16.12.0",
"react-id-swiper": "^3.0.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"semantic-ui-react": "^0.88.2",
"styled-components": "^5.0.1",
"swiper": "^5.3.6",
"typescript": "~3.7.2"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.14.0",
"@typescript-eslint/parser": "^2.14.0",
"cross-env": "^6.0.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.9.0",
"eslint-config-react-app": "^5.1.0",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^2.3.0",
"gh-pages": "^2.2.0",
"jest": "^24.9.0",
"lint-staged": "^9.5.0",
"pre-commit": "^1.2.2",
"prettier": "^1.19.1"
},
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"serialize-javascript": "^2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:clean": "rimraf ./build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint:staged": "lint-staged",
"lint:eslint": "eslint --ignore-path .gitignore",
"lint:eslint:fix": "eslint --ignore-path .gitignore --fix",
"prettify": "prettier --write"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The project structure is the typical CRA with containers-components (Ignore the nginx.conf and dockerfile which I was using for testing another way with Gcloud run at the time of the photo)
Edit: Added project structure and package.json
