create-react-app を使用して作成したアプリをGoogle App Engineにデプロイしようとしています。
私のアプリはローカル(npm start
とnpm run build & serve -s build
の両方)で問題なく動作します。ただし、Google App Engineにデプロイされたアプリはindex.htmlのみを表示し、私の反応コードを呼び出しません。
ChromeデベロッパーコンソールにUncaught SyntaxError: Unexpected token <
が表示されています。
また、console.cloud.google.comで、デプロイされたアプリにビルドフォルダーが含まれていないことがわかりました。これは正しいです?
誰でもこの問題を解決できますか?
これが私の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"
]
}
また、これが私のapp.yamlです。
runtime: nodejs10
handlers:
- url: /.*
static_files: build/index.html
upload: build/index.html
- url: /
static_dir: build
何度もウェブを検索した結果、私の反応アプリのルーティングシステムが原因であることがわかりました。
この投稿 にあるように、app.yamlの作成には注意が必要です。最初に次の項目を記述すると、GAEはbuild/index.html
および/static/js
へのアクセスを含むすべてのクエリに対して/static/css
を返します。
- url: /
static_files: build/index.html
upload: build/index.html
create-react-app
は、npm run build
のビルドフォルダーと静的サブフォルダーを作成します。そのため、次のようにapp.yamlをより具体的に記述する必要があります。
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
このドキュメントを確認できますか https://medium.com/tech-tajawal/deploying-react-app-to-google-app-engine-a6ea0d5af132
これはあなたを助けます。同じ手順でアプリをデプロイしました。
yamlファイルのサンプル
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: build/index.html
upload: build/index.html
- url: /
static_dir: build
ありがとうございました!