web-dev-qa-db-fra.com

Déployer l'application create-react sur Google App Engine

J'essaie de déployer mon application créée à l'aide de create-react-app sur Google App Engine.

Mon application fonctionne bien sur le local (les deux npm start et npm run build & serve -s build). Cependant, l'application déployée sur Google App Engine affiche uniquement le fichier index.html et n'appelle pas mon code de réaction.

La Chrome Developer Console affiche Uncaught SyntaxError: Unexpected token <.

De plus, j'ai trouvé sur console.cloud.google.com que l'application déployée n'incluait pas le dossier de construction. Est-ce correct?

N'importe qui peut résoudre ce problème?

Voici mon package.json:

{
  "name": "XXXXX",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-ga": "^2.5.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

En outre, voici mon app.yaml.

runtime: nodejs10

handlers:
- url: /.*
  static_files: build/index.html
  upload: build/index.html
- url: /
  static_dir: build
node.jsreactjsgoogle-app-enginegoogle-cloud-platformcreate-react-app
8
Daisuke SHIBATO

À la suite de nombreuses recherches sur le Web, j'ai constaté que le système de routage de mon application React en était la cause.

Comme cet article le déclare, nous devons faire attention à la création de app.yaml. Si nous écrivons d'abord l'élément suivant, GAE renvoie build/index.html pour toutes les requêtes, y compris l'accès à /static/js et /static/css.

- url: /
  static_files: build/index.html
  upload: build/index.html

create-react-app crée un dossier de construction et des sous-dossiers statiques pour npm run build. Ainsi, j'ai dû écrire mon app.yaml plus spécifique comme ceci:

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
15
Daisuke SHIBATO

Pouvez-vous consulter ce document - https://medium.com/tech-tajawal/deploying-react-app-to-google-app-engine-a6ea0d5af132

Cela vous aidera. J'ai déployé mon application en suivant les mêmes étapes.

exemple de fichier yaml

    runtime: python27
    api_version: 1
    threadsafe: true
    handlers:
    - url: /
      static_files: build/index.html
      upload: build/index.html
    - url: /
      static_dir: build

Lien de référence - https://medium.com/google-cloud/how-to-deploy-a-static-react-site-to-google-cloud-platform-55ff0bd0f509

Je vous remercie!

7
Harsh Makadia