将 create-react-app 部署到 heroku
Deploy create-react-app to heroku
我在尝试将我的 create-react-app 部署到 Heroku 时遇到问题。我之前让它运行良好，我之前构建的页面仍然有效。但是，我建出来的新页面return出现如下错误：500 Internal Server Error nginx。我构建的其中一个页面是一个只有文本的测试页面，但我仍然遇到此错误。在开发中一切正常。
我使用了 create-react-app 和这个构建包：https://github.com/mars/create-react-app-buildpack.git
我是 运行 一个 rails 5 api 唯一的后端作为一个单独的应用程序。
下面是构建日志和 heroku 日志。还包括 cors.rb 文件。
谢谢！
这里是编译日志
Counting objects: 6, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (6/6), 635 bytes | 0 bytes/s, done.
Total 6 (delta 4), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> React.js (create-react-app) multi app detected
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_VERBOSE=false
remote: NODE_ENV=development
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 6.x via semver.io...
remote: Downloading and installing node 6.10.2...
remote: Using default npm version: 3.10.10
remote:
remote: -----> Restoring cache
remote: Loading 2 from cacheDirectories (default):
remote: - node_modules
remote: - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json)
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 2 cacheDirectories (default):
remote: - node_modules
remote: - bower_components (nothing to cache)
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-client@0.1.0 build /tmp/build_82771801fbb231c120504f2a4f013b93
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Compiled successfully.
remote:
remote: File sizes after gzip:
remote:
remote: 79.01 KB build/static/js/main.2603c310.js
remote: 289 B build/static/css/main.9a0fe4f1.css
remote:
remote: The project was built assuming it is hosted at the server root.
remote: To override this, specify the homepage 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: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
remote: =====> Detected Framework: Static HTML
remote: % Total % Received % Xferd Average Speed Time Time Time Curren
remote: Dload Upload Total Spent Left Speed
remote: 100 838k 100 838k 0 0 19.8M 0 --:--:-- --:--:-- --:--:-- 19.9M
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: 33.6M
remote: -----> Launching...
remote: Released v9
remote: https://APP-client.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/APP-client.git
be4d1c7..c03ddb2 master -> master
Heroku 日志
2017-04-24T13:24:09.365044+00:00 heroku[router]: at=info method=GET path="/ppty-list" host=app-client.herokuapp.com request_id=b5c46aa8-93ff-4ce5-9ef8-ed8245a43b66 fwd="100.38.166.199" dyno=web.1 connect=1ms service=6ms status=500 bytes=758 protocol=https
2017-04-24T13:24:09.371231+00:00 app[web.1]: 2017/04/24 13:24:09 [error] 29#0: *13 mrb_run failed: return 500 HTTP status code to client: error: /app/bin/config/lib/ngx_mruby/headers.rb:7: invalid json (ArgumentError), client: 10.170.176.153, server: , request: "GET /ppty-list HTTP/1.1", host: "app-client.herokuapp.com"
2017-04-24T13:24:09.374529+00:00 app[web.1]: 10.170.176.153 - - [24/Apr/2017:13:24:09 +0000] "GET /ppty-list HTTP/1.1" 500 588 "-" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
2017-04-24T13:24:10.240848+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=app-client.herokuapp.com request_id=3f25570a-ba07-48d1-ac46-eab5c3eae537 fwd="100.38.166.199" dyno=web.1 connect=1ms service=2ms status=500 bytes=758 protocol=https
2017-04-24T13:24:10.247480+00:00 app[web.1]: 2017/04/24 13:24:10 [error] 32#0: *14 mrb_run failed: return 500 HTTP status code to client: error: /app/bin/config/lib/ngx_mruby/headers.rb:7: invalid json (ArgumentError), client: 10.170.176.153, server: , request: "GET /favicon.ico HTTP/1.1", host: "app-client.herokuapp.com", referrer: "https://app-client.herokuapp.com/ppty-list"
2017-04-24T13:24:10.255154+00:00 app[web.1]: 10.170.176.153 - - [24/Apr/2017:13:24:10 +0000] "GET /favicon.ico HTTP/1.1" 500 588 "https://app-client.herokuapp.com/ppty-list" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
Cors.rb 文件在 rails 5 api 唯一的应用程序中我也在 heroku 中 运行。
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'https://app-<username>.c9users.io:8082'
resource '*',
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
allow do
origins 'https://APP-server.herokuapp.com'
resource '*',
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
end
我弄明白了，请参阅我在 create-react-app-buildpack 上打开的这个问题：https://github.com/mars/create-react-app-buildpack/issues/44
长话短说，你需要添加一个static.json文件并且你不能评论它
我在尝试将我的 create-react-app 部署到 Heroku 时遇到问题。我之前让它运行良好，我之前构建的页面仍然有效。但是，我建出来的新页面return出现如下错误：500 Internal Server Error nginx。我构建的其中一个页面是一个只有文本的测试页面，但我仍然遇到此错误。在开发中一切正常。
我使用了 create-react-app 和这个构建包：https://github.com/mars/create-react-app-buildpack.git
我是 运行 一个 rails 5 api 唯一的后端作为一个单独的应用程序。
下面是构建日志和 heroku 日志。还包括 cors.rb 文件。
谢谢！
这里是编译日志
Counting objects: 6, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (6/6), 635 bytes | 0 bytes/s, done.
Total 6 (delta 4), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> React.js (create-react-app) multi app detected
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_VERBOSE=false
remote: NODE_ENV=development
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 6.x via semver.io...
remote: Downloading and installing node 6.10.2...
remote: Using default npm version: 3.10.10
remote:
remote: -----> Restoring cache
remote: Loading 2 from cacheDirectories (default):
remote: - node_modules
remote: - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json)
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 2 cacheDirectories (default):
remote: - node_modules
remote: - bower_components (nothing to cache)
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-client@0.1.0 build /tmp/build_82771801fbb231c120504f2a4f013b93
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Compiled successfully.
remote:
remote: File sizes after gzip:
remote:
remote: 79.01 KB build/static/js/main.2603c310.js
remote: 289 B build/static/css/main.9a0fe4f1.css
remote:
remote: The project was built assuming it is hosted at the server root.
remote: To override this, specify the homepage 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: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
remote: =====> Detected Framework: Static HTML
remote: % Total % Received % Xferd Average Speed Time Time Time Curren
remote: Dload Upload Total Spent Left Speed
remote: 100 838k 100 838k 0 0 19.8M 0 --:--:-- --:--:-- --:--:-- 19.9M
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: 33.6M
remote: -----> Launching...
remote: Released v9
remote: https://APP-client.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/APP-client.git
be4d1c7..c03ddb2 master -> master
Heroku 日志
2017-04-24T13:24:09.365044+00:00 heroku[router]: at=info method=GET path="/ppty-list" host=app-client.herokuapp.com request_id=b5c46aa8-93ff-4ce5-9ef8-ed8245a43b66 fwd="100.38.166.199" dyno=web.1 connect=1ms service=6ms status=500 bytes=758 protocol=https
2017-04-24T13:24:09.371231+00:00 app[web.1]: 2017/04/24 13:24:09 [error] 29#0: *13 mrb_run failed: return 500 HTTP status code to client: error: /app/bin/config/lib/ngx_mruby/headers.rb:7: invalid json (ArgumentError), client: 10.170.176.153, server: , request: "GET /ppty-list HTTP/1.1", host: "app-client.herokuapp.com"
2017-04-24T13:24:09.374529+00:00 app[web.1]: 10.170.176.153 - - [24/Apr/2017:13:24:09 +0000] "GET /ppty-list HTTP/1.1" 500 588 "-" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
2017-04-24T13:24:10.240848+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=app-client.herokuapp.com request_id=3f25570a-ba07-48d1-ac46-eab5c3eae537 fwd="100.38.166.199" dyno=web.1 connect=1ms service=2ms status=500 bytes=758 protocol=https
2017-04-24T13:24:10.247480+00:00 app[web.1]: 2017/04/24 13:24:10 [error] 32#0: *14 mrb_run failed: return 500 HTTP status code to client: error: /app/bin/config/lib/ngx_mruby/headers.rb:7: invalid json (ArgumentError), client: 10.170.176.153, server: , request: "GET /favicon.ico HTTP/1.1", host: "app-client.herokuapp.com", referrer: "https://app-client.herokuapp.com/ppty-list"
2017-04-24T13:24:10.255154+00:00 app[web.1]: 10.170.176.153 - - [24/Apr/2017:13:24:10 +0000] "GET /favicon.ico HTTP/1.1" 500 588 "https://app-client.herokuapp.com/ppty-list" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"
Cors.rb 文件在 rails 5 api 唯一的应用程序中我也在 heroku 中 运行。
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'https://app-<username>.c9users.io:8082'
resource '*',
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
allow do
origins 'https://APP-server.herokuapp.com'
resource '*',
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
end
我弄明白了，请参阅我在 create-react-app-buildpack 上打开的这个问题：https://github.com/mars/create-react-app-buildpack/issues/44
长话短说，你需要添加一个static.json文件并且你不能评论它