So führen Sie React und Rails auf demselben Server aus

Hintergrund

Als ich anfing, Rails zu lernen, baute ich mit VIEW die Vorderseite mit ERB auf. Ich habe gehört, dass SPA heutzutage beliebt ist.

Vorläufig habe ich beschlossen, es auf einem anderen Server auszuführen und irgendwie die CORS-Einschränkungen usw. aufzuheben, und es wurde möglich, Rails auszutauschen und sicher zu reagieren.

Wie setzen Sie diesen einen Heroku-Dyno ein? .. .. Als ich mir Sorgen machte, gab es auf Herokus offiziellem Blog einen leicht verständlichen Artikel, den ich endlich erstellen konnte.

Ich dachte, es wäre hilfreich, wenn es ähnliche Leute gäbe, also habe ich es gepostet.

Voraussetzungen

Referenzartikel: Ein solider, moderner Webstapel - Rails 5 API + ActiveAdmin + React App auf Heroku erstellen

Erstellen einer Rails-App

Erstellen Sie eine Rails-App mit dem Befehl Rails New.

Vergessen Sie nicht, mit dem Befehl --api in den API-Modus zu wechseln

rails new rails_app --api

Stellen Sie sicher, dass die erstellte App gestartet wird.

python


cd rails_app
rails s

Erstellen einer React-App

Erstellen Sie eine React-App mit dem Namen client im Stammverzeichnis Ihrer Rails-App.

python


npm create-react-app client

Mal sehen, ob React genau wie Rails funktioniert.

python


cd client
npm start 

Bei dieser Geschwindigkeit haben React und Rails während der Entwicklung unterschiedliche Ports. Fügen Sie die Einstellungen zu package.json hinzu.

package.json


{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001", #Hier hinzufügen
  ...
}

Durch diese Einstellung erkennen die Rails, dass die React-App auf Port 3001 ausgeführt wird.

Reagieren --Rails Local Edition

Erstellen Sie eine Aufgabe zum Starten der lokalen Umgebung.

Schreiben Sie einen Befehl zum Starten von React and Rails in Procfile und rufen Sie ihn in einer Rails-Task auf.

Procfile ist eine Datei, die auf Heroku verwendet wird und durch den Prozesstyp: Befehl beschrieben werden kann.

<process type>: <command>

Schreiben Sie dieses Mal den Startbefehl der Rails-Anwendung und der React-Anwendung mit dem Dateinamen Procfile.dev in das Stammverzeichnis.

Procfile.dev


web: cd client && PORT=3000 npm start
api: PORT=3001 && bundle exec rails s

Ich möchte den aufrufenden Befehl einfach halten, damit ich ihn zu einer Aufgabe mache.

start.rake


namespace :start do
    desc 'Start development server'
    task :dev do
      exec 'heroku local -f Procfile.dev'
    end
end

Starten Sie den Startbefehl procfile mit task.

rake start:dev

Ich denke, sowohl React als auch Rails wurden gestartet.

Wenn es aus dem Protokoll auf dem Terminal schwer zu verstehen ist, ist es einfacher zu verstehen, ob die Rails-Seite etwas Json zurückgibt, damit es von der React-Seite abgerufen werden kann.

Reagieren - Rails Heroku

Bereitstellung auf Heroku, dem Hauptthema.

Erstellen Sie zunächst eine package.json-Datei im Stammverzeichnis.

Schreiben Sie einen Befehl zum Erstellen einer statischen React-Datei im öffentlichen Rails-Verzeichnis.

package.json


{
    "name": "list-of-ingredients",
    "license": "MIT",
    "engines": {
      "node": "10.15.3",
      "yarn": "1.15.2"
    },
    "scripts": {
      "build": "yarn --cwd client install && yarn --cwd client build",
      "deploy": "cp -a client/build/. public/",
      "heroku-postbuild": "yarn build && yarn deploy"
    }
}

Erstellen Sie ein Procfile für die Produktion und schreiben Sie den Startbefehl für Rails.

Schreiben Sie gegebenenfalls den Migrationsbefehl nach der Freigabe.

Procfile


web: bundle exec rails s
release: bin/rake db:migrate

Verwenden Sie die CLI, um einen Prüfstand auf Heroku zu erstellen und das Build Pack zu konfigurieren.

App erstellen


heroku apps:create

Build Pack-Einstellungen


heroku buildpacks:add heroku/nodejs --index 1
heroku buildpacks:add heroku/ruby --index 2

Jetzt, wo du bereit für Heroku bist, drück mit git.

git add .
git commit -m "React - Rails"
git push heroku master

Öffnen Sie die App.

heroku open

Nachwort

Sind alle sicher umgezogen?

Ich würde mich freuen, wenn Sie mir sagen könnten, ob es einen besseren Weg gibt.

Wenn es nicht funktioniert, lesen Sie bitte den folgenden Referenzartikel!

Referenzartikel: Ein solider, moderner Webstapel - Rails 5 API + ActiveAdmin + React App auf Heroku erstellen

Recommended Posts

So führen Sie React und Rails auf demselben Server aus
So beenden Sie den Rails-Server
(Ruby on Rails6) So erstellen Sie ein Modell und eine Tabelle
Verwendung von Ruby on Rails
So stellen Sie Bootstrap auf Rails bereit
So führen Sie JavaFX unter Docker aus
[Mit Backtricks] So stellen Sie React to the simple Rails vor
[Rails] So erhalten Sie die URL der Übergangsquelle und leiten sie um
[Rails / Heroku / MySQL] So setzen Sie die Datenbank der Rails-App auf Heroku zurück
So installieren und konfigurieren Sie das Überwachungstool "Graphite" unter Ubuntu
Installieren Sie Ubuntu20.04 auf RaspberryPi 4 und erstellen Sie Kubernetes, um den Container auszuführen
Dinge, an die Sie sich erinnern sollten, und Konzepte im Ruby on Rails-Tutorial
Installieren Sie Webpacker und Yarn, um Rails auszuführen
[Schienen] Verwendung der Kartenmethode
Wie man die Zehner und Einsen findet
[Ruby on Rails] Verwendung von redirect_to
[Android] So aktivieren / deaktivieren Sie das Benachrichtigungsfeld mit StatusBarManager
[Java] So rufen Sie die von HTML auf der Serverseite übergebenen Parameter ab
So lösen Sie die lokale Umgebungskonstruktion von Ruby on Rails (MAC)!
[Schienen] So erstellen Sie eine Tabelle, fügen eine Spalte hinzu und ändern den Spaltentyp
So debuggen Sie die Verarbeitung im Ruby on Rails-Modell nur mit der Konsole
[Rails] So bestimmen Sie das Ziel anhand von "Rails-Routen"
[Ruby on Rails] So melden Sie sich nur mit Ihrem Namen und Passwort mit dem Gem-Gerät an
SSH-Login beim App-Server mit Heroku
[Rails MySQL] So setzen Sie die Datenbank auf Heroku zurück
So erstellen Sie eine API mit GraphQL und Rails
Kompilieren Sie Java und führen Sie es in der Befehlszeile aus
So finden Sie die Gesamtpunktzahl und die Durchschnittspunktzahl
[Rails] So geben Sie Erfolgs- und Fehlermeldungen aus
[Java] Memo zum Schreiben der Quelle
So führen Sie NullpoMino 7.5.0 unter Ubuntu 20.04.1 64-Bit-Version aus
So überprüfen Sie Rails-Befehle im Terminal
[Ruby on Rails] So machen Sie das Linkziel zu einem Teil der angegebenen ID
[Ruby on Rails] Ändern Sie das Aktualisierungsdatum und das Erstellungsdatum in Ihre bevorzugte Notation
So ermitteln Sie den Abstand und den Winkel zwischen zwei Punkten in einer Ebene
[Ruby on Rails] So japanisieren Sie die Fehlermeldung des Formularobjekts (ActiveModel)
Freigeben auf der Hostseite (Windows) und der Gastseite (CentOS 7) mit VirtualBox
Wie schreibe ich Rails
So stellen Sie die Anzeigezeit in Rails auf japanische Zeit ein
So führen Sie die SpringBoot-App als Dienst aus
Was tun, wenn der Rails-Server nicht gestartet werden kann?
[Ruby on Rails] Wie schreibe ich eine Enumeration auf Japanisch?
Wie man javafx mit Raspeye ausführt veröffentlicht am 12.07.2020