CODEWITHSUNDEEP
reactjsgoogle-app-enginegoogle-cloud-platformcreate-react-app
juanjo12x
juanjo12x

Reputation: 321

Deploy create-react-app-typescript on Google App Engine

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.

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

Upvotes: 1

Views: 1749

Answers (1)

juanjo12x
juanjo12x

Reputation: 321

Solved (May 18, 2020) I changed my approach and go for a custom runtime and it worked out. Here is the configuration I used if anyone encounter this problem in the future.

Change the runtime to custom in the App.yaml

<!-- language: lang-html -->
env: flex
runtime: custom

And include a Dockerfile with a nginx.conf for the runtime management

Dockerfile:

FROM node:8-alpine as react-build
WORKDIR /app
COPY . ./
RUN npm install
RUN npm run build

# server environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/configfile.template
ENV PORT 8080
ENV HOST 0.0.0.0
RUN sh -c "envsubst '\$PORT'  < /etc/nginx/conf.d/configfile.template > /etc/nginx/conf.d/default.conf"
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

    server {
     listen       $PORT;
     server_name  localhost;

     location / {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
         try_files $uri /index.html;
     }

     gzip on;
     gzip_vary on;
     gzip_min_length 10240;
     gzip_proxied expired no-cache no-store private auth;
     gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
     gzip_disable "MSIE [1-6]\.";

}

This configuration appears in one of the tutorials here: https://cloud.google.com/community/tutorials/deploy-react-nginx-cloud-run

Thank you to @Nibrass H for suggesting some possible solutions.

Upvotes: 1

Related Questions