Fatal编程技术网
  • reactjs/
  • Reactjs 将create react应用程序部署到heroku

Reactjs 将create react应用程序部署到heroku

reactjs nginx heroku deployment

Reactjs 将create react应用程序部署到heroku,reactjs,nginx,heroku,deployment,create-react-app,Reactjs,Nginx,Heroku,Deployment,Create React App,我在尝试将我的create react应用程序部署到Heroku时遇到问题。我以前做得很好，我以前构建的页面仍然可以工作。但是，我构建的新页面返回以下错误：500内部服务器错误nginx。我构建的其中一个页面是一个测试页面，它除了文本之外什么都没有，我仍然会遇到这个错误。在开发过程中一切正常 我使用了create react应用程序和此构建包： 我正在运行一个Rails5API后端作为一个单独的应用程序 下面是构建日志和heroku日志。还包括cors.rb文件 Rails.applicatio

我在尝试将我的create react应用程序部署到Heroku时遇到问题。我以前做得很好，我以前构建的页面仍然可以工作。但是，我构建的新页面返回以下错误：500内部服务器错误nginx。我构建的其中一个页面是一个测试页面，它除了文本之外什么都没有，我仍然会遇到这个错误。在开发过程中一切正常

我使用了create react应用程序和此构建包：

我正在运行一个Rails5API后端作为一个单独的应用程序

下面是构建日志和heroku日志。还包括cors.rb文件

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
谢谢大家!

下面是构建日志

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"
我在heroku中运行的rails 5 api专用应用程序中的Cors.rb文件

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

Rails.application.config.middleware.insert_在0之前，Rack:：Cors do
允许做
起源'https://app-.c9users.io:8082'
资源“*”，
标题：：任何，
方法：[：获取，：发布，：放置，：修补，：删除，：选项，：头]
结束
允许做
起源'https://APP-server.herokuapp.com'
资源“*”，
标题：：任何，
方法：[：获取，：发布，：放置，：修补，：删除，：选项，：头]
结束
结束
我找到了答案，请参阅我在create react app buildpack上打开的这个问题：

长话短说，您需要添加一个static.json文件，并且不能对其进行注释

您是否有API客户端？是的，仅支持rails 5 API，使用rack cors gem启用cors，取消对config/initializers/cors.rb文件的注释。我将用完整的cors.rb文件更新这个问题。您是否使用package.json中的生产URL和端口为create react应用程序设置了代理配置？此处引用：@Dez我没有。如果我在rails后端设置cors，我还需要这样做吗？代理配置用于让捆绑在create react应用程序中的网页将请求代理到客户端API，从而避免任何cors问题。我会在你的应用程序中尝试：
“代理”：http://APP-server.herokuapp.com:API_PORT“
替换您使用过的端口并指定heroku应用程序名称，但是我以前没有Rails方面的经验，只是在heroku中部署create react应用程序，并且由于代理配置问题而出现相同的500问题。是的。JSON规范不支持注释