Edited at

Rails Tutorialの知識から【ポートフォリオ】を作って勉強する話 #1 準備編


こんな人におすすめ


  • プログラミング初心者でポートフォリオの作り方が分からない

  • Rails Tutorialをやってみたが理解することが難しい

  • ポートフォリオを作成しながら勉強したい

次回:#2 RSpec導入編


こんなことが分かる


  • ポートフォリオの準備の手順

  • AWSを使用する際のIAM/MFAについて

  • SassからSasscへの変更手順

  • BitbucketではなくGitHubを使う方法

  • Herokuを使う際の注意点

一緒に勉強しましょう:bow:

...それでは長旅始まります。


え、ポートフォリオ何つくる...

とはいえどんなものを作成すれば良いの。まずは初心者がポートフォリオに実装すべきことを調べる。

こちらの動画を参考にさせていただきました↓

僕のエンジニアとしてのポートフォリオを紹介します。


記事一覧表示機能

記事詳細表示機能

記事投稿機能

管理ユーザ登録機能

管理ユーザログイン機能

画像ファイルのアップロード機能

DBテーブルのリレーション機能

DBトランザクションの制御機能

ページネーション機能

単体テスト機能

統合テスト機能


これらの機能があればよろしいらしい!

というわけで、動画の視聴時間を日記的に記録+ログ化するアプリをつくることに。


サイトマップとワイヤーフレーム

Moqupsを使用し、簡単なサイトマップとワイヤーフレームをつくります。


サイトマップ

サイトマップ .png


ワイヤーフレーム

ワイヤーフレーム.png

雑すぎる???


AWS Cloud9でwebアプリ作成

これから開発するにあたり、AWSのCloud9を使用します。

AWSを使用する際は、セキュリティ面よりルートアカウントを使わずIAMユーザを作成しMFAを設定


  • IAM:ユーザID+アクセスキー

  • MFA:多要素検証、スマホとかで二重に認証、セキュリティを強固にする

AWSの理解はこちらを参考にさせていただきました↓

AWSをこれから始める学生への圧倒的なインプット


Rails Tutorialを参考にホーム画面をつくる

TutorialのRails 5.1(第4版)は色々古い。

やらなきゃいけないことが多い。


  1. SassをSasscに変更

  2. GitHubを利用する(こちらは新旧という表現になじみませんが)

  3. Herokuをどうにかする


1. SassをSasscに変更

最新版のrailsをインストール。


bash

$ gem install rails -v 5.2.3


すると驚き。


bash

Ruby Sass has reached end-of-life and should no longer be used.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
https://sass-lang.com/blog/posts/7828841


Sassが近々サポート終了...使いたいならsassc使ってねってことらしい。

gemからsassを削除しsasscに置き換え、GemfileとGemfile.lockからsassファイルを削除する。


Gemfile.lock

以下の部分を削除

sass-rails (5.0.7)
railties (>= 4.0.0, < 6)
sass (~> 3.1)
sprockets (>= 2.8, < 4.0)
sprockets-rails (>= 2.0, < 4.0)
tilt (>= 1.1, < 3)

参考にさせていただきました↓

【rails5】Ruby Sass is deprecated and will be unmaintained as of 26 March 2019. というメッセージ

Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.


2. GitHubを利用する

Tutorialでは非公開リポジトリを無料で利用するためBitbucketを使っていた。

しかし2019年1月7日からGitHubが非公開リポジトリを無制限に作れるようになったので、そちらを利用。

GitHubの公式ページからサインアップ。リポジトリをつくる。

git_create_repository.png

つくったらcloud9上の~/environment/lantern-app/にもどる。


bash

$ git init

$ git add -A
$ git commit -m "Initialize repository"
$ git remote add origin http://Github.com/(GitHubのあなたのID)/(リポジトリ名).git
# (今回の場合 git remote add origin http://Github.com/(GitHubの私のID)/lantern-app.git)
$ git push -u origin master

これでセットアップ完了。

参考にさせていただきました↓

【Rails入門】 Githubを導入する方法


3. Herokuをどうにかする

Tutorialに沿ってherokuをインストールしていく。

Tutorialには書かれていないけど、本番環境のデータベースとしてPostgreSQLを使う場合、2つ設定をいじる必要がある。


1つ目


config/database.yml

# 中略

production:
<<: *default
adapter: postgresql
encoding: unicode
pool: 5

インデントは半角スペース2つで行う。これが.ymlのルール。


2つ目


config/environments/production.rb

# 中略

config.assets.compile = true

falseをtrueに。これでコンパイルがオンに。


あとはHerokuをインストールして作成するだけ、なのにできない。

heroku上のURL先での表示↓

heroku_error.jpeg

$ heroku logs --tailを確認してねと表示されたので確認。


bash

$ heroku logs --tail


しかしめぼしい情報がない。

そういう場合はコンソールを確認したらいいよとのアドバイスがあったのでそうする。


bash

$ heroku run rails console


ん、なんだかsqlite3が怪しい。しかしGemfileを確認しても正しそうに見える。

(怪しい箇所のスクショ忘れました...)


Gemfile

source 'https://rubygems.org'

git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.3'

gem 'rails', '~> 5.2.3'
gem 'puma', '~> 3.11'
# gem 'sass-rails', '~> 5.0'
gem 'sassc-rails'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
# gem 'redis', '~> 4.0'
# gem 'bcrypt', '~> 3.1.7'
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
gem 'sqlite3'
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
gem 'chromedriver-helper'
end

group :production do
gem 'pg'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]


一回sqlite3を除いて$ bundle install --without productionする。


bash

$ bundle install --without production

$ git push heroku master

しかし、結果は同じだった。一度cloud9を閉じ再び起動したが同じ。

...で、少しの間休憩をとって三度cloud9起動。


bash

$ git push heroku


...いけた!!なんで??

まあ良い。再びGemfileからsqlite3を導入。一応initする。


bash

$ git init

$ git add -A
$ git commit -m "install sqlite3"
$ git push
$ git push heroku

問題なかった。

参考にさせていただきました↓

【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】

[Ruby on Rails Tutorial]Herokuにデプロイ後Application error[H10 (App crashed)]が発生した時の対処法


次回

とりあえずは整った。次回はホーム画面をつくっていきます。

(RSpecも導入したいのでまた次回)

次回:#2 RSpec導入編