Closed27

AWS Cloud9を触りながらRuby on Railsでなんか作る

yukyuyukyu

開発環境

Cloud9の環境

EC2 instance type:t2.micro
Platform:Ubuntu Server 18.04 LTS

構築した環境

Ruby version: 2.6.3 (x86_64-linux)
Rails version: 6.1.0

環境構築

https://qiita.com/pao-dokusyonowa/items/65d476b5128cac97f009
こちらを参考にさせていただきました

yarnのインストール

npm install -g yarn

railsのインストール

gem install rails -v 6.1.0

Railsのプロジェクト作成

その後、ターミナルに以下のコマンドを入力し、プロジェクトを作成し、ディレクトリを移動します

rails new rails-app
cd rails-app

アプリケーションの作成が終わったら正常に起動するかサーバーを起動して確認する。以下のコマンドを入力する。

rails s

起動できたら、Preview>Preview Running Application をクリック

yukyuyukyu

作成するアプリケーション

技術とは関係ないため、コメントで作成したいアプリケーション案を書いてく

yukyuyukyu

概要

飲食店レビューアプリBumeshi!!のweb版
Flutterの一部がWebに対応しておらず、iphoneに人が利用するすべがない
https://note.com/yukyu/m/m5b87dbecdee1

基本構成

ゲストモードでは閲覧のみ
ログインすることで飲食店レビュー機能が使える

飲食店レビューの内容

  • ジャンル
  • 金額
  • うまさ
  • 支払い方法
  • 駐車場
  • 位置情報
yukyuyukyu

コマンドメモ

使う回数が多そうなコマンドを随時メモしていきます

コントローラー作成

rails generate controller <コントローラ名> <アクションメソッド名(任意)>

コンソール

rails console

exitと入力して、終了する
DBのテストデータ作成に使った

yukyuyukyu

Controller

作成

コントローラ名は先頭大文字で複数形にするらしい

rails generate controller <コントローラ名> <アクションメソッド名(任意)>

基本的な構文

app/controllers/hoges_controller.rb
class HogesController < ApplicationController
    def index #関数名を定義
        #処理を書く
    end
end
yukyuyukyu

Model

データーべースを使うなら必須

作成

モデル名は先頭大文字で単数形

rails generate model <モデル名> firstname:string lastname:string 

<カラム名:データ型>でカラムを設定する

マイグレーションファイル

上記のコマンドを実行することで作成されるファイル、データベースの基本設計図みたいなもの?
直接編集することで、作成されるデータベースの設計を変えることができる

マイグレーション

作成したマイグレーションファイルをもとにデータベースを作成する

rake db:migrate
yukyuyukyu

主要ファイルについてまとめる

webページを作成する際に設定するファイルに関してザックリと

yukyuyukyu

ルーティング設定 | config/routes.rb

hoge.com/hogeにアクセスが来たらコントローラのどの処理を実行するかをここで設定する
config/routes.rbがルーティングを定義するファイル

config/routes.rb
#例
Rails.application.routes.draw do
  get'mypage', to:'users#me'#mypageにアクセスでuserコントローラのmeが呼ばれる
  
  post 'login', to: 'sessions#create'
  delete 'logout', to:'sessions#destroy'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root 'home#index' #rootを設定
  resources :users, only: %i[new create]
end
yukyuyukyu

コントローラ | app/contorller/hoges_controller.rb

モデルを使用する際はコントローラーにモデルの処理などを記述する

yukyuyukyu

ビュー | app/views/hoges/*.html.erb

表示する画面を記述する
rubyを使用するときには<% rubyのプログラム %> <%= rubyのプログラム %>とする

yukyuyukyu

共通のレイアウトを定義する|app/views/layouts/application.html.erb

application.html.erbは共有のレイアウトを定義することができる。<%= yield %>にviewファイルが読みこまれる

yukyuyukyu

フォームで多対多のモデルを利用したチェックボックスを作る

お店登録フォームにて、そのお店のカテゴリーを登録する

カテゴリーのモデルを作成

rails g model category name:string

##中間テーブルを作成
eateryが飲食店のテーブルです

rails g model eatery_category_relation eatery:references category:references
yukyuyukyu

以下のように変更

class Payment < ApplicationRecord
    has_many :eatery_category_relations 
    has_many :eateries, through: :eatery_category_relations
end
yukyuyukyu

コントローラに変更を加える

def eatery_params
        params.require(:eatery).permit(:name, :addres, nil, nil, :parking, payment_ids: [], category_ids: [])
    end
yukyuyukyu

herokuでデータベースを削除する

heroku pg:reset -a アプリ名
yukyuyukyu

警告があらわれるので指示どうりにアプリ名を入力する
その後,マイグレーションをしないとデータベースがないのでうまく動かない場合あり

yukyuyukyu

ユーザーIDとしてUUIDにする

以下のページを参考に設定
https://tech.mof-mof.co.jp/blog/rails-use-uuid/

本番環境で使用する

このまま実行すると

 function gen_random_uuid() does not exist

とエラーがでるので、修正していきます

cloud9側(またはローカル)にpsqlをインストールする

参考にしたページ
https://devcenter.heroku.com/articles/heroku-postgresql#local-setup
以下のコマンドをcloud9に入力してpsqlをインストールする

sudo apt-get install postgresql

その後、herokuでpgcryptoを有効にする

heroku pg:psql
=> CREATE EXTENSION pgcrypto;

これをしてからherokuでマイグレーションを行う

yukyuyukyu

# Herokuのデータベースを操作する

heroku login
heroku pg:psql --app アプリ名
yukyuyukyu

AWS Cloud9からローカルへ移行

Cloud9からプロジェクトをダウンロードする。
ローカルでRailsプロジェクトを作成。
Cloud9のデータをRailsのプロジェクトへ入れる

以下のコマンドを打って、必要なものをインストールする
node_modulesが残っていると正常にインストールできなかったので消しておいたほうがよい??

bundle install
npm install 

WSL2で開発する
https://zenn.dev/masa20210102/articles/f9a4260cc00ebb

yukyuyukyu

site名/auth/google_oauth2でエラー

Googleの規約変更によりOAuth認証が無効化されていた。
Google Developer Consoleに行き、利用規約に同意すると復活した

このスクラップは2021/10/27にクローズされました