[RUBY] Créer une application et la déployer pour la première fois avec heroku

Création d'une application `rails new railsgirls cd rails server`

Utilisez l'échafaudage pour former des idées, ajouter, supprimer, modifier, afficher. rails generate scaffold idea name:string description:text picture:string

Ensuite, mettez à jour la base de données. rails db:migrate

Conception Conception à l'aide de Bootstrap.

app/views/layouts/application.html.erb


<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Ajoutez ce qui suit avant cette ligne

app/views/layouts/application.html.erb


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

Modifiez également l'intérieur de <body> comme suit.

app/views/layouts/application.html.erb


<div class="container">
  <%= yield %>
</div>

Ajoutez ensuite la navigation et les pieds de page à votre mise en page. Ajoutez ce qui suit immédiatement après «».

app/views/layouts/application.html.erb


<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Idea app</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/ideas">Ideas</a></li>
      </ul>
    </div>
  </div>
</nav>

De plus, ajoutez ce qui suit juste avant </ body>.

app/views/layouts/application.html.erb


<footer>
  <div class="container">
    Rails Girls 2020
  </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Cela change également le style du tableau des idées.

app/assets/stylesheets/application.css


body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

Ajout de la fonction de téléchargement de photos

Ouvrez Gemfile et Immédiatement après «gem'sqlite3», ajoutez la ligne suivante, gem 'carrierwave'

Exécutez ensuite la commande suivante dans le terminal:

bundle

Ensuite, vous pouvez générer du code pour effectuer le téléchargement avec la commande suivante:

rails generate uploader Picture

prochain,

app/models/idea.rb


class Idea < ApplicationRecord

Immédiatement après, écrivez ce qui suit.

app/models/idea.tb


mount_uploader :picture, PictureUploader

plus loin,

app/views/ideas/_form.html.erb


<%= form.text_field :picture %>

Modifiez ceci comme suit:

app/views/ideas/_form.html.erb


<%= form.file_field :picture %>

Cela montre simplement le chemin du fichier. Alors

app/views/ideas/show.html.erb


<%= @idea.picture %>

Modifiez le code ci-dessus comme suit.

app/views/ideas/show.html.erb


<%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>

Réglage racine http://localhost:3000でideasページにリダイレクトできるようにします。

config/routes.rb


root to: redirect('/ideas')

Ajouter une page à l'application

rails generate controller pages info

Téléchargez l'application sur Heroku

Préparation pour Heroku

Tout d'abord, préparez un compte Heroku. Écran d'enregistrement de l'utilisateur: (https://signup.heroku.com/)

Installation de la CLI Heroku Téléchargez l'application pour les opérations en ligne de commande dans Heroku.

Pour Mac brew install heroku/brew/heroku

Une fois Heroku Toolbelt installé, entrez la commande suivante dans le terminal: heroku login

Ajoutez ensuite le code que vous avez créé au système de gestion des versions. Entrez la commande suivante dans le terminal:

echo public/uploads >> .gitignore


git add .
git commit -m "initial commit"

Mise à jour de la base de données
gem 'sqlite3', '~> 1.4'

Modifiez ce code comme suit:


group :development do
  gem 'sqlite3', '~> 1.4'
end
group :production do
  gem 'pg'
end

Exécutez ensuite la commande suivante sur le terminal pour le configurer.

bundle install --without production git add . git commit -m "Added pg gem and updated Gemfile.lock"

Déployer l'application Créez une application Heroku. Le nom de l'application doit être unique sur heroku. `heroku create first-app`

En cas de succès, ce qui suit sera affiché. Creating ⬢ first-app... done http://my-first-app.herokuapp.com/ | https://git.heroku.com/my-first-app.git

Si le nom de l'application est déjà utilisé, il ressemblera à ceci: Creating ⬢ my-first-app... ! ▸ Name first-app is already taken

Code push Envoyez le code à heroku. git push heroku main

Migration de base de données heroku run rails db:migrate

Vous pouvez voir l'application sur Internet en exécutant la commande suivante: herku open

Référence Rails Girls Guides https://railsgirls.jp/

Recommended Posts

Créer une application et la déployer pour la première fois avec heroku
Apprentissage pour la première fois des expressions et opérateurs Java # 3
Spring Boot pour la première fois
Spring AOP pour la première fois
Introduction à Java pour la première fois # 2
Apprendre pour la première fois java [Introduction]
L'histoire de la sortie de l'application Android sur le Play Store pour la première fois.
Expérimentons le flux d'octroi de code d'autorisation avec Spring Security OAuth-Partie 2: Créer une application pour le moment
Murs touchés par le premier Rspec
Connexion SSH au serveur d'applications avec heroku
Développement d'Android Studio pour la première fois (pour les débutants)
J'ai essayé de toucher Docker pour la première fois
[Android studio / Java] Ce que vous ne comprenez pas lorsque vous le touchez pour la première fois
Essayez d'exécuter une application créée avec Quarkus sur Heroku
Importez une instance et utilisez-la sur un autre écran
Mémo d'apprentissage lors de l'apprentissage de Java pour la première fois (mémo d'apprentissage personnel)
Comment étudier le kotlin pour la première fois ~ Partie 2 ~
Comment étudier le kotlin pour la première fois ~ Partie 1 ~
Créez une application Android pour ceux qui ne veulent pas écouter de musique sur leurs haut-parleurs
Accédez à l'API Web avec Get sur Android et traitez Json (Java pour le moment)
[Rails] J'ai essayé d'utiliser la méthode button_to pour la première fois
Création du premier LINEbot avec AWS Cloud9 (déploiement Rails + Heroku)
Procédure de publication d'applications Android adaptée aux débutants, en difficulté pour la première version first
[Android] Modifiez le nom de l'application et l'icône de l'application pour chaque saveur
Modéliser Digimon avec DDD pour la première fois Partie 1
Causes techniques et contre-mesures pour les points auxquels j'étais accro avec la première application Android et Kotlin
[Memo] Exécutez Node.js v4.4.5 sur CentOS 4.9 / RHEL4 (i386) pour le moment (gcc-4.8 et glibc2.11 sur LinuxKernel 2.6.9)
Installez le plugin memcached sur MySQL et accédez à partir de Java
J'ai ouvert la barre de menu (menu d'options) sur Android et l'ai vue.
(Ruby on Rails6) Créer une base de données et l'afficher dans une vue
"Attendez que le processus se termine" et arrêtez le processus car il reste
Créez une image Docker pour redoc-cli et enregistrez-la sur Docker Hub
Lancement de l'application No Todo au lieu de Todo. .. (Et notes faîtières)
Android Studio montre deux méthodes qui n'ont qu'un seul bouton onClick, Java lève une exception et ruine l'application
Ce que je pense maintenant, c'est qu'une personne inexpérimentée étudie la programmation pour la première fois depuis un mois.
[Ruby on Rails] Lors de la première connexion ・ Comment diviser l'écran en deux à l'aide de jQuery
Préparez l'environnement pour CUDA, Nvida-Driver et cuDNN sur un PC Ubuntu 18.04 équipé de Geforce RTX2080 SUPER.