Quand j'ai commencé à apprendre Rails, je construisais la face avant avec VIEW en utilisant ERB, J'ai entendu dire que le SPA est populaire ces jours-ci.
Pour le moment, j'ai décidé de l'exécuter sur un autre serveur et j'ai en quelque sorte effacé les restrictions CORS, etc., et il est devenu possible d'échanger Rails et React en toute sécurité.
Comment déployez-vous ce dyno heroku? .. .. Quand j'étais inquiet, il y avait un article facile à comprendre sur le blog officiel d'Heroku, et j'ai finalement pu le construire.
J'ai pensé que ce serait utile s'il y avait des personnes similaires, alors je l'ai posté.
Créez une application rails avec la commande rails new.
N'oubliez pas de passer en mode api avec la commande --api
rails new rails_app --api
Vérifions si l'application créée démarre.
python
cd rails_app
rails s
Créez une application React avec le nom client dans le répertoire racine de votre application Rails.
python
npm create-react-app client
Tout comme Rails, voyons si React fonctionne.
python
cd client
npm start
À ce rythme, React et Rails auront des ports différents pendant le développement. Ajoutez les paramètres à package.json.
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001", #Ajouter ici
...
}
Ce paramètre permet aux Rails de reconnaître que l'application React s'exécute sur le port 3001.
Créez une tâche pour lancer l'environnement local.
Écrivez une commande pour lancer React et Rails dans Procfile et appelez-la dans une tâche Rails.
Procfile est un fichier utilisé sur heroku et peut être décrit par type de processus: commande.
<process type>: <command>
Cette fois, écrivez la commande de démarrage de l'application Rails et de l'application React avec le nom de fichier Procfile.dev dans le répertoire racine.
Procfile.dev
web: cd client && PORT=3000 npm start
api: PORT=3001 && bundle exec rails s
Je veux garder la commande d'appel simple, donc je vais en faire une tâche.
start.rake
namespace :start do
desc 'Start development server'
task :dev do
exec 'heroku local -f Procfile.dev'
end
end
Lancez la commande de démarrage procfile avec la tâche.
rake start:dev
Je pense que React et Rails ont été lancés.
S'il est difficile à comprendre à partir du journal sur le terminal, il sera plus facile de comprendre si le côté Rails renvoie du Json afin qu'il puisse être récupéré du côté React.
Déploiement sur Heroku, le thème principal.
Commencez par créer un fichier package.json dans le répertoire racine.
Écrivez une commande pour créer un fichier statique React dans le répertoire public de Rails.
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"
}
}
Créez un fichier Proc pour la production et écrivez la commande de démarrage pour les rails.
Si nécessaire, écrivez la commande migrate après la publication.
Procfile
web: bundle exec rails s
release: bin/rake db:migrate
Créer une application
heroku apps:create
Paramètres du pack de création
heroku buildpacks:add heroku/nodejs --index 1
heroku buildpacks:add heroku/ruby --index 2
Maintenant que vous êtes prêt sur heroku, poussez avec git.
git add .
git commit -m "React - Rails"
git push heroku master
Ouvrez l'appli.
heroku open
Tout le monde s'est-il déplacé en toute sécurité?
J'apprécierais que vous me disiez s'il existe une meilleure solution.
Si cela ne fonctionne pas, veuillez lire l'article de référence suivant!