OREMATOPEE

プログラミング、気になったこと、メモ書き...etc

Rails6はWebpackerのインストールが必要

はじめに

Railsでのアプリ作成において、Welcome Railsの画面からDeviseを追加してビューをいじっていると、エラーが発生して画面が確認できなくなっていた。
エラーの解消法を記載するが、結論から書くとRails6で標準搭載となった Webpackerに伴うエラーでした。
内容はかなり初歩的ですが、アプリケーション作成において事前作業が必要な内容で、つまづきやすいので注意しましょう(自戒)

環境

名前 バージョン
Ruby 2.7.2
Rails 6.0.3
Docker for Mac 2.5.0.1
yarn 1.22.4

発生したエラー①

_2020-11-25_4.17.06.png

エラー文

Webpacker configuration file not found /app/config/webpacker.yml. Please run rails webpacker:install Error: No such file or directory @ rb_sysopen - /app/config/webpacker.yml

原因

Rails6で標準搭載となった Webpackerですが、Rails側は仕組みを採用しているだけでインストールはしていません。
インストールすればコンフィグファイルが作成され解決します。

解決法

下記を実行してください。

$ rails webpacker:install

これによってWebpackerがインストールされます。(文字通り!)
ただし、yarnを使うので、事前にyarnをインストールしておいてください。

発生したエラー②

_2020-11-25_4.19.33.png

エラー文

Webpacker::Manifest::MissingEntryError in hogehoge

Showing /Users/yuhiisk/Work/sites/smout/app/views/layouts/application.html.slim where line #10 raised: Webpacker can't find application.js in /Users/yuhiisk/Work/sites/smout/public/packs/manifest.json. Possible causes: 1. You want to set webpacker.yml value of compile to true for your environment unless you are using the webpack -w or the webpack-dev-server. 2. webpack has not yet re-run to reflect updates. 3. You have misconfigured Webpacker's config/webpacker.yml file. 4. Your webpack configuration is not creating a manifest. Your manifest contains: { }

原因

Webpackerインストールしたから開発しよーポチーとかしてると続いて上記が発生。
Webpackerのコンパイルを行わないとRailsが認識できないみたいです。
Rails6ではインストールとコンパイル、セットで必要ですね。

解決法

下記を実行してください。

$ rails webpacker:compile

おわりに

Webpackerが標準搭載されたという認識だけしかなかったので、つまづきました。
初学者の方への一助になれば幸いです。

Railsで発生したAutoprefixer doesn’t support Node v4.8.2. Update it.エラーについて【Docker Rails5 Bootstrap】

はじめに

DockerでRails開発を行っていたら急に下記のエラーが発生して、アプリが開けなくなった。 6f7d96c8994be656c8439daf32b138aa.png

まず、エラー文を見てみると「Autoprefixer doesn’t support Node v4.8.2. Update it.」と書かれており、翻訳するとAutoprefixerがNode v4.8.2に対応していません。アップデートしてください。」とのこと。

Node.jsのバージョンを下記コマンドを実行して確認してみると、エラー文のとおりv4.8.2らしい。

docker-compose run app nodejs -v
v4.8.2

原因

調べているとBootstrapが原因であることがわかった。
Bootstrapのソースコードでは、ベンダープレフィックスを意図的に記載せず全てAutoprefixerというモジュールに任せており、このモジュールがNode.jsのバージョンv.4.8.2を受け付けないとのこと。

原因がわかればあとは対処するだけ! コンテナにあるNode.jsのバージョンを変更すれば解決するはず...

対処法

Railsコンテナを構成しているOSがdebian Linuxであり、そのdebianのパッケージ管理コマンド「apt」のapt-getコマンドで使用されるリポジトリ(ソフトウェアの取得元)を追加すればおk。
Dockerfileに記載しているNode.jsのapt-getの前に、バージョン10系のNode.jsリポジトリを追加する。

+ RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -

RUN apt-get update -qq && \
    apt-get install - y build-essential \
            libpq-dev \
            nodejs

これでバージョン10系のNode.jsがインストールされるようになった。
コンテナが動いていれば止めて、キャッシュを使わずに再ビルドを行ってから起動すればおk。

docker-compose stop
docker-compose build --no-cache
docker-compose up -d

最後に

上記対応で正常にアプリ画面が表示された。 スクリーンショット 2020-11-05 7.52.30.png

めでたしめでたし。

個人的に便利なアプリや開発ツールをまとめてみた(開発ツール編)

今回は、「開発ツール編」として筆者がRailsで開発環境を構築するときに導入する開発ツールをまとめてみました。
いつかまたセットアップする機会がきたときに役に立てばいいと思っております!

neovimを使ってRails開発が行えるところまでをゴールとします。

前回のアプリ編もどうぞ

導入するもの

名前 用途
Homebrew パッケージマネージャ
Alfred 万能ランチャーアプリ
白源 フォント
iTerm2 高機能ターミナル
zsh シェル
prezto zsh用コンフィグフレームワーク
neovim エディタ
iceberg テーマ
Git バージョン管理
rbenv Rubyのバージョン管理
Docker 仮想プラットフォーム

Homebrew

MacOSXシステム上でソフトウェアの導入を単純化してくれるパッケージマネージャ。
これで導入したソフトウェア群を、brewfileを用いて他環境へ簡単に移行することが可能です。
必要なものを一カ所に集めてくれるので、管理の手間が省けて便利ですね。
これから記載するものはほとんどこのツールを用いて導入していくので、最初にインストールしておくのが吉。

インストール手順
公式サイトの通り、ターミナル上で下記コマンドを実行するだけです。
Command + SpaceでSpotlight検索を起動して、「Terminal」と入力するとターミナルが起動します。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

途中、パスワードを求められますのでMacにログインしているユーザのパスワードを入力してください。

$ Password:

また、Homebrewは「Command line tools for Xcode」というソフトウェアに依存しており、途中でこのソフトウェアのインストールを求められますので、インストールしてください。
※画像は参考ですが、同じようにソフトウェアアップデートが立ち上がりインストールを求められます。 https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_43096_b5586c82-304a-c2a6-27de-8961ea684e0d.png

以下のように出力されたら完了。
一応doctorコマンドで正常にインストールできたか確認します。

==> Next steps:
- Run `brew help` to get started
- Further documentation:
    https://docs.brew.sh

$ brew doctor
Your system is ready to brew.

Alfred

Alfredはアプリ編に記載したかったのですが、Homebrewを使ってどのような環境であっても必ず持って行きたいアプリなのでこちらに記載しました。
Mac標準のSpotlightと同じようにアプリランチャーとしても働きますし、システムの機能をショートカットから呼出してファイルを一括で編集したり、スニペット登録機能があったり色々な機能があります。
課金すると上記のスニペット登録機能・ファイル操作機能が使えますが、そもそもSpotlightより便利で高機能なので導入しておいて損はないと思います。
筆者は全然使いこなせていないですが、かなり生産性が上がるみたいで少し余裕ができたら学んでいきたいと思っております。

theme@2x.jpg

インストール手順
Homebrewを使ってインストールします。
Homebrewは基本的にCUIをインストールするものなのですが、homebrew-caskという拡張機能を使用することによりGUIをインストールすることが可能となります。

この拡張機能をまず有効にしましょう。 下記のコマンドを実行すると、Homebrewにcaskが追加されます。

$ brew cask

本来はcaskのあとにインストールしたいアプリの名前を入れる必要があり、「Error: Invalid usage: No subcommand given.」と出力されますが、コマンドの実行方法がおかしいってだけでcaskは追加されるので気にしないでください。

その後、Alfredをcaskを介してインストールします。
もちろん上記のcaskのインストールを飛ばしてこちらを実行してもらっても構わないです。

$ brew cask install Alfred
alfred was successfully installed!

Spotlightと同じCommand + Spaceで起動したい場合は、インストール出来たらMacのシステム環境設定→キーボード→ショートカットを開きSpotlightのショートカットを無効化してください。
その後、Alfredを起動してショートカットを変更して導入は完了です。
スクリーンショット 2020-10-22 23.26.53.png

白源

エディタ上で見やすいフォントを色々試したのですが、個人的に一番見やすくてCUI上でアイコンをフォントとして出力するNerd Fontsに対応しているのでおすすめ。
プログラミング用のフォントとして有名なRictyをカスタマイズしているので完成度が高く、今でも定期的に更新され視認性がどんどん上がっていっており、非常に活発なフォントなのであります。
詳しくは作者様の記事をご覧ください。

インストール手順
cask同様にフォント用のHomebrewの拡張機能をインストールして、そちらを介して白源フォントをインストールします。

$ brew tap homebrew/cask-fonts
$ brew cask install font-hackgen-nerd

以降の項目でこちらのフォントは使用しますので、ここでは導入のみにとどめます。
もしお気に入りのフォントがあるなら、cask-fontsをインストール後に下記コマンドでHomebrewで扱われているか調べて、そちらを利用しても構いません。

$ brew search フォント名

iTerm2

Mac標準のターミナルを高機能にしたもの。
後述するエディタ用テーマ「iceberg」が、ターミナルではフルカラー出力に対応しておらず色味が思い通りに表示されなかったので導入した。
以下の記事を見てtmuxを入れなくてもコピーモードで色々できるんだなと思ったのも大きい。

インストール手順
下記を実行してインストール。

$ brew cask install iTerm2

導入はこれでいいですが、例えばダウンロードとかのディレクトリにアクセスしたときにiTermにアクセス許可を与えるかどうかの通知が表示されます。
この通知がいろんなディレクトリにアクセスしたときに表示されるので気になる人は、システム環境設定→セキュリティとプライバシーのフルディスクアクセスにiTerm.appを追加してください。
スクリーンショット 2020-10-23 2.29.59.png

後述するicebergの項で配色に関しては設定しますので、ここではステータスバーとフォントの設定を行います。
まずPreferences→Profileにある+マークで新しいプロファイルを作成しましょう。名前は適当でいいです。筆者は「iceberg」としました。
スクリーンショット 2020-10-24 8.55.22.png

次にTextタブを開き下にあるFontを、先ほど入れた「白源」にします。 スクリーンショット 2020-10-24 9.01.25.png

また、ステータスバーの表示位置がデフォルトでは上なので、Preferences→AppearanceのStatus bar locationで下などに変更できる。 スクリーンショット 2020-10-24 9.34.48.png

Sessionタブに移り、一番下のStatus bar enabledにチェックをつけます。 スクリーンショット 2020-10-24 9.09.07.png

あとはConfigure Status Barボタンを押して表示させたいアイテムをActive Componentsにドラッグして、Advancedで色とフォントの設定を行います。
筆者の場合は、背景色とアイテムの区切り線の色はicebergの背景色と同じ#161821にして、フォントも白源としました。
iMacの場合、バッテリー表示は不要ですがMacbookとかと設定を同期したい場合はつけてもいいかもしれません。) スクリーンショット 2020-10-24 9.12.18.png スクリーンショット 2020-10-24 9.34.13.png

設定できたらOKを押して閉じます。
作ったプロファイルは、左下のOther Actionsを押してデフォルトに設定してください。
その後再起動すると反映されます。 スクリーンショット 2020-10-24 9.38.02.png

また、このプロファイルはOther Actionsで、JSONとしてエクスポートできますので、他のPCでインポートすれば設定を同期できるので覚えておくと便利です。

zsh

Catalinaを使っていたら導入する必要はありませんが、Homebrewで最新バージョンをインストールしてそちらを利用します。

インストール手順
Catalinaの場合、ログインシェルがzshなのでそのコマンドの位置と、バージョンを見ておきます。

$ which zsh
/bin/zsh
$ /bin/zsh --version
zsh 5.7.1

次に、Homebrewを介してzshをインストールしてそれをログインシェルとするために、/etc/shellsをvimで編集します。
パスワードを求められるのでログインユーザーのパスワードを入力してください。

$ brew install zsh
$ sudo vim /etc/shells
Password:

開いたらファイルの一番下に「/usr/local/bin/zsh」を追記して、下記コマンドでシェルを変更します。

$ chsh -s /usr/local/bin/zsh

実行できたらターミナルを再起動。
起動したらもう一度、zshの位置とバージョンを確認して、変更が確認できたら完了です。

$ which zsh
/usr/local/bin/zsh
$ zsh --version
zsh 5.8

prezto

zshrcファイルをあれこれいじるのが面倒な場合、preztoを入れればある程度便利に設定を行ってくれます。
またプロンプトも少しおしゃれにできます。

インストール手順
ターミナルを起動して下記を実行していきます。

# 先に変数を定義してpreztoの配置場所及び、設定ファイルの保存場所を決めておく
$ ZDOTDIR="~/.config/zsh"

# prezto本体をクローンする
$ git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"

# 設定ファイルを生成する
$ setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done

# シェルをデフォルトにする
$ chsh -s /usr/local/bin/zsh

# ZDOTDIRの箇所に生成された.zshenvをルートディレクトリに移動し、編集します。
$ mv ~/.config/zsh/.zshenv ~/.zshenv
$ vim .zshenv
# 省略
# 設定ファイル保存先
export ZDOTDIR="$HOME/.config/zsh"

次にpreztoに便利なモジュールを追加します。

$ vim ~/.config/zsh/.zpreztorc

32行目あたりの箇所を編集します。

zstyle ':prezto:load' pmodule ¥
  'environment' \
  'terminal' \
  'editor' \
  'history' \
  'directory' \
  'spectrum' \
  'utility' \
  'completion' \
  'syntax-highlighting' \ # これを追加
  'autosuggestions' \ # これも追加
  'prompt'

シェルを再起動すれば完了。

neovim

vimを拡張した派生エディタ。
JetbrainsなどのIDEVSCODEとこれが現時点で最良の選択なのかなーっと思ってます。
正直、あれこれカスタマイズしてメンテナンスしていかないといけないので、それらが一番楽なのはIDEです。
ただVimの操作ってすごい楽なんですよね。で、IDEVSCODEもそれらのメリットを享受できるけど、完璧じゃないんです。
ここはもう好みの問題だとは思いますが。

インストール手順
下記コマンドを実行。

$ brew install nvim

インストール自体は完了しており、続けて設定ファイルを作成する。

$ mkdir ~/.config/nvim
$ touch ~/.config/nvim/dein.toml
$ touch ~/.config/nvim/dein_lazy.toml
$ touch ~/.config/nvim/init.vim
$ vi ~/.config/nvim/init.vim

作成したら設定を色々編集していくのだが、dein.vimを導入し、最低限のものをまとめたのが以下になる。
dein.vimプラグインマネージャで、vim拡張機能をもたらすモジュールを一括管理してくれる。
以下のように書き換えて、再度neovimを起動したら自動的にインストールしてくれる。
エラーなどは気にしなくてよい。

" dein.vim settings
let s:dein_dir = expand('~/.cache/dein')
let s:dein_repo_dir = s:dein_dir . '/repos/github.com/Shougo/dein.vim' 
" dein installation check
if &runtimepath !~# '/dein.vim'
  if !isdirectory(s:dein_repo_dir)
    execute '!git clone https://github.com/Shougo/dein.vim' s:dein_repo_dir
  endif
  execute 'set runtimepath^=' . s:dein_repo_dir
endif

" begin settings
if dein#load_state(s:dein_dir)
  call dein#begin(s:dein_dir) 
  " .toml file
  let s:rc_dir = expand('~/.config/nvim')
  if !isdirectory(s:rc_dir)
    call mkdir(s:rc_dir, 'p')
  endif
  let s:toml = s:rc_dir . '/dein.toml'
  let s:lazytoml = s:rc_dir . '/dein_lazy.toml'

  " read toml and cache
  call dein#load_toml(s:toml, {'lazy': 0})
  call dein#load_toml(s:lazytoml, {'lazy': 1})

  " end settings
  call dein#end()
  call dein#save_state()
endif

" plugin installation check
if dein#check_install()
  call dein#install()
endif

" plugin remove check
let s:removed_plugins = dein#check_clean()
if len(s:removed_plugins) > 0
  call map(s:removed_plugins, "delete(v:val, 'rf')")
  call dein#recache_runtimepath()
endif

filetype plugin indent on
syntax enable

" リーダーキーの変更
let mapleader = "\<Space>"

colorscheme iceberg
set termguicolors
set encoding=utf-8
set nrformats=
set tabstop=2
set softtabstop=2
set shiftwidth=2
set expandtab
set autoindent
set smartindent
set nobackup
set noswapfile
set clipboard&
set clipboard^=unnamed
set number
set norelativenumber
set title
set nocursorline
set list
set listchars=tab:\|\ ,trail:-,eol:↲,extends:»,precedes:«,nbsp:%
set showmatch
set matchtime=1
set hlsearch
set whichwrap=b,s,<,>,[,]
set tags=./tags;
set completeopt=menuone,noinsert
set viminfo+=n~/.config/nvim/.viminfo

" j,kキーで表示行移動
nnoremap <silent> k gk
nnoremap <silent> gk k
nnoremap <silent> j gj
nnoremap <silent> gj j

" 折り返し移動
set whichwrap=b,s,<,>,[,]

" 補完のEnterでは挿入しない
inoremap <expr><CR> pumvisible() ? "<C-e>" : "<CR>"

iceberg

色々テーマはあるが、寒色で目に優しい配色が気に入っている。
公式サイトを見て気に入ったら使ってみてほしい。

インストール手順
iTerm2とneovimそれぞれに導入していく。
まずはneovim。

dein.tomlを開いて、icebergを追加。
ほかにdein.vim自体と、vimのステータスバーを格好良くするairlineを追加。

vi ~/.config/nvim/dein.toml
[[plugins]]
repo = 'Shougo/dein.vim'

[[plugins]]
repo = 'cocopon/iceberg.vim'

[[plugins]]
repo = 'vim-airline/vim-airline'

その後、neovimを起動したら自動的にインストールされる。

次にiTerm2の設定をしていく。
vimでiTermのカラー設定用ファイルを作成して、以下の記述通りに保存する。

$ vi iceberg.itermcolors

長いので省略

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Ansi 0 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.12941177189350128</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.094117648899555206</real>
        <key>Red Component</key>
        <real>0.086274512112140656</real>
    </dict>
    <key>Ansi 1 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.47058823704719543</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.47058823704719543</real>
        <key>Red Component</key>
        <real>0.88627451658248901</real>
    </dict>
    <key>Ansi 10 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.55686277151107788</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.7921568751335144</real>
        <key>Red Component</key>
        <real>0.75294119119644165</real>
    </dict>
    <key>Ansi 11 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.5372549295425415</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.69411766529083252</real>
        <key>Red Component</key>
        <real>0.91372549533843994</real>
    </dict>
    <key>Ansi 12 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.81960785388946533</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.67450982332229614</real>
        <key>Red Component</key>
        <real>0.56862747669219971</real>
    </dict>
    <key>Ansi 13 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.82745099067687988</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.62745100259780884</real>
        <key>Red Component</key>
        <real>0.67843139171600342</real>
    </dict>
    <key>Ansi 14 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.80784314870834351</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.76862746477127075</real>
        <key>Red Component</key>
        <real>0.58431375026702881</real>
    </dict>
    <key>Ansi 15 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.87058824300765991</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.83137255907058716</real>
        <key>Red Component</key>
        <real>0.82352942228317261</real>
    </dict>
    <key>Ansi 2 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.50980395078659058</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.7450980544090271</real>
        <key>Red Component</key>
        <real>0.70588237047195435</real>
    </dict>
    <key>Ansi 3 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.47058823704719543</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.64313727617263794</real>
        <key>Red Component</key>
        <real>0.88627451658248901</real>
    </dict>
    <key>Ansi 4 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.7764706015586853</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.62745100259780884</real>
        <key>Red Component</key>
        <real>0.51764708757400513</real>
    </dict>
    <key>Ansi 5 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.78039216995239258</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.57647061347961426</real>
        <key>Red Component</key>
        <real>0.62745100259780884</real>
    </dict>
    <key>Ansi 6 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.7607843279838562</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.72156864404678345</real>
        <key>Red Component</key>
        <real>0.5372549295425415</real>
    </dict>
    <key>Ansi 7 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.81960785388946533</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.78431373834609985</real>
        <key>Red Component</key>
        <real>0.7764706015586853</real>
    </dict>
    <key>Ansi 8 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.5372549295425415</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.43921568989753723</real>
        <key>Red Component</key>
        <real>0.41960784792900085</real>
    </dict>
    <key>Ansi 9 Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.5372549295425415</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.5372549295425415</real>
        <key>Red Component</key>
        <real>0.91372549533843994</real>
    </dict>
    <key>Background Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.12941177189350128</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.094117648899555206</real>
        <key>Red Component</key>
        <real>0.086274512112140656</real>
    </dict>
    <key>Badge Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>0.5</real>
        <key>Blue Component</key>
        <real>0.0</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.1491314172744751</real>
        <key>Red Component</key>
        <real>1</real>
    </dict>
    <key>Bold Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.87843137979507446</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.70980393886566162</real>
        <key>Red Component</key>
        <real>0.54901963472366333</real>
    </dict>
    <key>Cursor Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.81960785388946533</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.78431373834609985</real>
        <key>Red Component</key>
        <real>0.7764706015586853</real>
    </dict>
    <key>Cursor Guide Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>0.25</real>
        <key>Blue Component</key>
        <real>1</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.9268307089805603</real>
        <key>Red Component</key>
        <real>0.70213186740875244</real>
    </dict>
    <key>Cursor Text Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>1</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>1</real>
        <key>Red Component</key>
        <real>0.99607843160629272</real>
    </dict>
    <key>Foreground Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.81960785388946533</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.78431373834609985</real>
        <key>Red Component</key>
        <real>0.7764706015586853</real>
    </dict>
    <key>Link Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.73423302173614502</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.35916060209274292</real>
        <key>Red Component</key>
        <real>0.0</real>
    </dict>
    <key>Selected Text Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.81960785388946533</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.78431373834609985</real>
        <key>Red Component</key>
        <real>0.7764706015586853</real>
    </dict>
    <key>Selection Color</key>
    <dict>
        <key>Alpha Component</key>
        <real>1</real>
        <key>Blue Component</key>
        <real>0.25882354378700256</real>
        <key>Color Space</key>
        <string>sRGB</string>
        <key>Green Component</key>
        <real>0.17254902422428131</real>
        <key>Red Component</key>
        <real>0.15294118225574493</real>
    </dict>
</dict>
</plist>

このファイルをiTermのPreferences→Profile→Color Presetsでインポートを行うと適用される。 スクリーンショット 2020-10-25 20.59.20.png

Git

ソースコードなどの変更履歴を追跡できるバージョン管理システム

インストール手順
Homebrew経由でインストールします。
まず元から入っているgitのバージョンを調べて、Homebrewでインストールします。

$ git --version
git version 2.24.3(Apple git-128)

$ brew install git

このままでは元からMacに入っているgitが使われてしまうので、パスを通します。

$ vim ~/.config/zsh/.zshrc
export PATH="/usr/local/bin/git:$PATH"

一度ターミナルを再起動して、gitのバージョンが変わっていれば成功です。

$ git --version
git version 2.29.1

rbenv

Rubyのバージョンを切り替えたり、管理することが簡単にできます。
とりあえず入れておいて損はない。

インストール手順
Homebrewでインストール。

$ brew install rbenv
$ rbenv -v
1.1.2

次にパスを通します。
またRBENV_ROOT変数にrbenvのshimsとversionsがあるディレクトリの位置を指定します。
最後のrbenv initは必須です。

$ vim ~/.config/zsh/.zshrc
export RBENV_ROOT="~/.local/share/rbenv"
export PATH="$RBENV_ROOT/bin:$PATH"
eval "$(rbenv init -)"

次にこのrbenvを通してRubyをインストールします。

# 下記コマンドでインストール可能なRubyのバージョンが一覧で見られます
$ rbenv install -l

# バージョンを決めたらインストールします
$ rbenv install 2.7.2

# インストールしたバージョンを実行可能にします
$ rbenv global 2.7.2

# 下記コマンドを実行して、指定したバージョンにアスタリスクがついていたらおk
$ rbenv versions
  system
* 2.7.2

Docker

仮想環境で開発を行うプラットフォームを提供するツール。

インストール手順
以下からDocker for Macをダウンロードしてインストールする。
公式サイト

まとめ

最終的にこのようになります。 スクリーンショット 2020-10-27 0.06.59.png

Dockerを使って実際に仮想環境を作成する方法は、以下の記事を参考にしてください。

Vimの他のプラグインや、細かい設定は省いていますがここは個人の好みが含まれるため、色々設定してみるといいかもしれません。
筆者もまだ試している状態なので、揃ってきたら記事にしたいと思います。

最後までお読みいただきありがとうございました!

個人的に便利なアプリや開発ツールをまとめてみた(アプリ編)

Macbook Proクラムシェルモードで運用していたが、あまりにも本体が熱くなりすぎて寿命が心配になってきたのでiMacを購入しました。
なるべくクリーンな状態で必要なアプリ・ツールのみをインストールしたかったので、それらをまとめる個人的なメモ + どこが気に入ってるのか なども併せてご紹介します。

まっさらな状態から、neovimを使ってRails開発が行えるところまでをゴールとします。
いつかまたセットアップする機会がきたときに役に立てばいいかな!

今回は、「アプリ編」として筆者が仕事で使っているアプリや、よく利用していて便利だなと思っているアプリをまとめました。
よく見かけるものばっかりだと思いますので、あくまで参考程度にご覧ください。

導入するもの

名前 用途
Logi Options Logicool用マウスの機能拡張
Karabiner-Elements キーボードのキーバインド変更
The Unarchiver ファイル解凍
BetterSnapTool ウィンドウリサイズ
Aspect Ratio Calculator 比率計算
ATOK 日本語入力
Dropbox オンラインストレージ
Photoshop 写真編集
Microsoft 365 ドキュメント編集
Notion 情報集約ツール
Todoist タスク管理
Trello タスク管理

Logi Options

Logicoolの Mx Master 3 というマウスを使用しており、それに色々な便利機能を追加してくれます。 スクリーンショット 2020-10-22 1.57.40.png

Mx Master自体はスクロールホイールの機構が特殊で、一定の速度以上でホイールを回すと滑らかに回転し、長いページも一瞬でスクロールできてめちゃくちゃ便利。
また横にスクロールするためのサムホイールなるものもあるので、Excelなんかでは重宝します。
Logi Optionsではアプリ毎にボタンの動作を変更したり、異なるOS同士でマウスカーソルを共有したり、ファイルの転送をおこなえるようになるので、導入必須ですね。

ダウンロード先 https://www.logicool.co.jp/ja-jp/product/options

Karabiner-Elements

キーマップの変更や、マウスなどの操作をキーボードで行えるようにしたり、エディタのショートカットを設定できたりと、俺に任せろといわんばかりに色々できる。
設定が面倒な人でも既存の設定をインポートすることが可能なので、あれこれいじらなくてもすぐに便利さを感じれると思う。 スクリーンショット 2020-10-22 2.30.17.png

上の画像のように、vimでCtrl+[を押下したときに自動的に半角英数入力にすることができたり、Ctrlキーを押すだけで英数・かなを切り替えられる。
ちなみにhhkbのUS配列を使ってる人は、このCtrlキーでのアクションはめちゃくちゃ便利。

ダウンロード先 https://karabiner-elements.pqrs.org/

The Unarchiver

Macの解凍ツールといえばこれ。これ以外知らない
Windows用ファイルも問題なく解凍してくれます。
それ以上でもそれ以下でもないような定番アプリ。

ダウンロード先 https://apps.apple.com/jp/app/the-unarchiver/id425424353?mt=12

BetterSnapTool

Windowsのように画面隅にアプリ画面を移動することにより、決められた大きさにリサイズしてくれるもの。
もう少し詳しく書くと、Safariのウィンドウバーをモニター画面上部にドラッグすれば自動的に最大化を行ってくれます。
なぜMacのデフォルト機能として存在しないのか不思議です。

ちなみにMagnetという似たようなアプリもあって、そちらのほうがAppStoreでは人気みたいです。(設定時の言語がこちらと異なり、日本語だからかな?)
筆者はマルチモニター環境でして、キーショートカットでウィンドウを他のモニターで表示するように移動させたかったので、こちらのアプリにしました。
Magnetでは設定が見当たらなかったので、マルチモニタ環境の人はこちらがおすすめです。

ダウンロード先 https://apps.apple.com/jp/app/bettersnaptool/id417375580?mt=12

Aspect Ratio Calculator

たぶんほとんどの人には必要ないかもしれない・・・。
アスペクト比を自動計算してくれます。

似たようなアプリはたくさんあるのですが、Macの右上に常時表示できて、クリックするとどのウィンドウよりもトップで表示され、なおかつ見やすい。
探してみると意外とこんな表示にこだわったアプリはなかったので、採用しました。

ダウンロード先 https://apps.apple.com/jp/app/aspect-ratio-calculator/id955155151?mt=12

ATOK

日本語入力に最適なIME
月額300円ほどのサブスクリプションに登録しています。
Google日本語入力を使っていた時期もありまして、そちらと比べて変換ミスが起きにくいのと、かな入力時でも半角スペースを入力できるオプションが便利で使っています。(Googleのほうでも、もしかしたらできるかもしれません。) スクリーンショット 2020-10-22 3.29.33.png

ダウンロード先 https://mypassport.atok.com/install/install_mac.html

Dropbox

オンラインストレージサービスの先駆け。
その後色々な競合サービスが打ち出されてきましたが、筆者の周りではみんなこれでファイル共有しているので、仕方なく導入しています。
ファイルが保存できるだけではなく、Excelファイルを同時編集している人がいないか確認できたり、色んなサイトに登録したパスワードなどを安全に保管出来るなど、便利な機能があります。

ダウンロード先 https://www.dropbox.com/install

Photoshop

仕事で写真編集をする機会が多いので使っています。
特にPhotoshopじゃないと出来ないことをしているわけではないですが、「コンテンツに応じた塗りつぶし」機能は他のアプリより優れていたので使っています。
これは写真から消したいオブジェクトを合成で綺麗に消してくれるものなのですが、最近はどのように消えるかプレビュー画面で確認しながら、写真のどの部分をサンプリングするのか自分で編集できるようにもなって、どんどん便利になっていってる機能でもあります。

撮影時に通行人が写ってしまうっていうときに、大変便利なわけですね。
ただ消したいオブジェクトによって隠れていた箇所を機械的に導きだすわけなので、複雑な模様などはうまく処理できません。 retatti_top-715x409.png

ダウンロード先 https://www.adobe.com/jp/products/photoshop.html

Microsoft 365

説明するまでもないOfficeのサブスクリプションサービスですね。
筆者は仕事でもばりばりというか、ただテストのエビデンス画像を貼るだけなのにExcelを使わされているのですが、Web系エンジニアの方も使われているのでしょうか?
VBAマクロが入ったドキュメントを使うことが多いので課金してますが、正直無料のもので十分な気がしています(泣

ダウンロード先 https://www.microsoft.com/ja-jp/microsoft-365/try

Notion

最近知りまして、これから使っていきたいと思っている情報集約アプリ。
説明がむずかしいのですが、Excel・Word・PowerPointなどなどをまとめたようなツールです。
Evernoteに似ていますが、デフォルトでMarkdownに対応しており、起動も早く、データテーブルを用いて集計を行ったり、豊富な機能がそろっております。
ただ学習コストが異常に高いので、ミニマルに初めてみて徐々に色々な機能を使ってみてください。じゃないと挫折する可能性が高い。(筆者も一度挫折しています。) スクリーンショット 2020-10-22 16.01.53.png

使い始めは、以下の記事を読むとわかりやすいです。 わかる、Notion 徹底入門

ダウンロード先 https://www.notion.so/desktop

Todoist

タスク管理アプリ。
iPhoneアプリ、デスクトップアプリもあり、特に課金しなくても同期してくれる点が魅力的。
TODOの表示形式もリスト、カンバン両方に対応していますし、なによりタスクの追加までがシンプルで簡単なので億劫にならない。
Googleカレンダーと同期して、相互にタスクが連携されるように設定しています。

スクリーンショット 2020-10-22 16.06.24.png

ダウンロード先 https://todoist.com/ja

Trello

こちらもタスク管理アプリ。
仕事で使用していますが、カンバン方式で視覚的にわかりやすく、タスクの状態が変化していくような管理方法に向いていると思います。
個人で使用するときは、追加までのアクションが少ない上記のTodoistになりましたが、タスクのサムネイル画像をつけられたり便利な面があるので、使い分けてもよさそうです。
Trello-Butler-Done-Drag-1 (1).gif

ダウンロード先 https://trello.com/ja

まとめ

本当によく見かけるものだったと思いますが、そういったサービスはそれだけ便利であるということですね笑
ブラウザ上で利用しているものは省きましたが、とりあえずこれだけあれば問題ないものをまとめてみました。
この中ではNotionの可能性がやばいと思っているので、早く使い慣れたいなと思っております。

筆者はまだMac環境になって日が浅く、これまでずっとWindows環境だったんですね。
なのでMacの便利な機能やアプリを探したり、それこそ初期設定が思っていたより大変でした!
同じような方の参考になればうれしい! もしおすすめなどあれば教えてください!

次回は、開発ツールをまとめたいと思います。

なるべく最新Verで構築するRails6開発環境(Docker + Rails + Nginx + Puma + MySQL)

はじめに

こんにちは、Web系エンジニア転職にむけて学習中の Npakk と申します。

Railsを学習するにあたって開発環境を構築したので、その手順を少し解説を交えながらご紹介します。
Dockerでの構築経験はあまりなく、経験も乏しいのであくまで参考程度にご覧ください。
もし間違いやご指摘などあれば、ぜひぜひお願いいたします!

Dockerを使用して、ローカル環境でRailsのWelcomeページを確認できるまでが、この記事のゴールです。

参考記事

対象読者

  • Railsを学びたいけど、環境をどう作ればいいかわからない初学者の方
  • なるべく新しいRails環境を作りたい方

前提

  • Macユーザーを対象としています
  • Docker for Macがインストールされているものとします
  • Nginx と Puma を連携させています
  • 最新バージョンは、記事執筆時点で最新という意味です
  • 全てのソフトウェアが最新バージョンなわけではありません
  • 最新版だから動作が安定していたり、速度が速いというわけではありません

バージョン

  • ホストOS(macOS Catalina 10.15.5)
  • Docker(19.03.8)
  • docker-compose(1.25.5)
  • Ruby(2.7.1)
  • Ruby on Rails(6.0.3.2)
  • Nginx(1.19.0)
  • MySQL(8.0)

1. ディレクトリの作成

ディレクトリ構成としては以下のようになります。
あくまで、手動で作成する項目のみ記載しています。

/webapp
├── Dockerfile
├── Gemfile
├── Gemfile.lock
├── containers
│   └── nginx
│       ├── Dockerfile
│       └── nginx.conf
├── docker-compose.yml
├── entrypoint.sh
└── environments
    └── db.env

1-1. アプリケーションルート

どこでもいいですが、わかりやすいところがおすすめです。

$ mkdir webapp

1-2. Nginxコンテナ用ディレクト

Nginxは、Rails・DBとは別のディレクトリを作ります。
設定ファイルや DockerFile を別途配置します。

$ mkdir -p webapp/containers/nginx

1-3. 環境変数ディレクト

DBで使うユーザーのパスワードなどを記載したファイルを配置します。

$ mkdir webapp/environments

2. コンテナ生成用のファイルを作成

以降はアプリケーションルート内での操作となります。

$ cd webapp

2-1. Rails用Dockerfile

Ruby と Node.js、yarnのバージョン指定は後述する docker-compose.yml から引数として指定します。

Rails6からは標準で Webpacker というgemを使用しており、yarn というパッケージ管理ソフトに依存しています。
yarn がないとうまく動かないため、これをコンテナにインストールする必要があります。

また entrypoint.sh についてですが、Dockerをコマンドで停止せずに強制終了してしまうと、Railsサーバーが開かれたままになるため、次からコンテナを起動するときにエラーが発生します。
その問題を回避するために server.pid を削除しています。

$ vim Dockerfile
ARG RUBY_VERSION
FROM ruby:$RUBY_VERSION

ARG NODE_MAJOR
ARG YARN_VERSION

# ログインシェルとしてbashを使用する
SHELL ["/bin/bash", "-c"]

# nodejs取得
RUN curl -sL https://deb.nodesource.com/setup_$NODE_MAJOR.x | bash -

# yarn取得
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - &&\
  echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list

# リポジトリを更新し依存モジュールをインストール
RUN apt-get update -qq &&\
  apt-get install -y\
  build-essential\
  nodejs\
  yarn=$YARN_VERSION-1

# ルート直下にwebappという名前で作業ディレクトリを作成(コンテナ内のアプリケーションディレクトリ)
RUN mkdir /webapp
WORKDIR /webapp

# ホストのGemfileとGemfile.lockをコンテナにコピー
ADD Gemfile /webapp/Gemfile
ADD Gemfile.lock /webapp/Gemfile.lock

# bundle installの実行
RUN bundle install

# ホストのアプリケーションディレクトリ内をすべてコンテナにコピー
ADD . /webapp

# puma.sockを配置するディレクトリを作成
RUN mkdir -p tmp/sockets

# コンテナ開始時に必ず実行されるシェルスクリプトをコンテナにコピー
ADD entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

2-2. Gemfile

Railsの最新バージョンをこのファイルで指定します。

$ vim Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

gem 'rails', '6.0.3.2'

2-3. Gemfile.lock

このファイルは作るだけで、中身は空で大丈夫です。

$ touch Gemfile.lock

2-4. Nginx用Dockerfile

$ vim containers/nginx/Dockerfile
FROM nginx:1.19.0

# インクルード用のディレクトリ内を削除
RUN rm -f /etc/nginx/conf.d/*

# Nginxの設定ファイルをコンテナにコピー
ADD nginx.conf /etc/nginx/conf.d/webapp.conf

# ビルド完了後にNginxを起動
CMD /usr/sbin/nginx -g 'daemon off;' -c /etc/nginx/nginx.conf

2-5. Nginx用設定ファイル

$ vim containers/nginx/nginx.conf
# プロキシ先の指定
# Nginxが受け取ったリクエストをバックエンドのpumaに送信
upstream webapp {
  # ソケット通信したいのでpuma.sockを指定
  server unix:///webapp/tmp/sockets/puma.sock;
}

server {
  listen 80;
  # ドメインもしくはIPを指定
  server_name example.com [or 192.168.xx.xx [or localhost]];

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;

  # ドキュメントルートの指定
  root /webapp/public;

  client_max_body_size 100m;
  error_page 404             /404.html;
  error_page 505 502 503 504 /500.html;
  try_files  $uri/index.html $uri @webapp;
  keepalive_timeout 5;

  # リバースプロキシ関連の設定
  location @webapp {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://webapp;
  }
}

2-6. DB接続用設定ファイル

ユーザー名・パスワードなどは適宜変更してください。

$ vim environments/db.env
MYSQL_ROOT_PASSWORD=db_root_password
MYSQL_USER=user_name
MYSQL_PASSWORD=user_password

2-7. entrypoint.sh

#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /myapp/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

2-8. docker-compose.yml

argsにRubyなどのバージョンを指定します。
ここで指定することによりDockerfileに値が渡されます。

$ vim docker-compose.yml
version: '3.7'

services:
  app:
    build:
      context: .
      args:
        RUBY_VERSION: '2.7.1'
        NODE_MAJOR: '14'
        YARN_VERSION: '1.22.4'
    env_file:
      - ./environments/db.env
    command: bundle exec puma -C config/puma.rb
    volumes:
      - .:/webapp
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
      - log-data:/webapp/log
    depends_on:
      - db
  db:
    image: mysql:8.0
    env_file:
      - ./environments/db.env
    volumes:
      - db-data:/var/lib/mysql
  web:
    build:
      context: containers/nginx
    volumes:
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
    ports:
      - 80:80
    depends_on:
      - app
volumes:
  public-data:
  tmp-data:
  log-data:
  db-data:

3. Railsアプリケーションの生成と編集

3-1. Railsアプリケーションの生成

ここまでファイルとディレクトリを準備できたら、Railsアプリケーションを作成します。

以下のコマンドを実行すると、コンテナ内でRailsアプリケーションが生成されます。
DBにはMySQLを指定し、gemをこの時点でインストールしないようにbundle installの実行を抑制しています。

$ docker-compose run --rm app rails new . --force --database=mysql --skip-bundle

コンテナ内で生成されたアプリケーションをホスト側から編集するには、いちいちコンテナを実行しないといけないため不便です。

そこで、コンテナ内に生成されたディレクトリと、ホスト側のアプリケーションルートを繋ぎます。
こうすることによって、ホスト側のアプリケーションルートにファイルが生成されます。
これらのファイルを編集すれば、コンテナ内のディレクトリにも反映されるようになります。
(既にこの対応は以下の箇所で行っているので、安心してください。)

#省略
    volumes:
      - .:/webapp
#省略

実行時に発生するエラー・警告について

Railsアプリケーション生成コマンド実行時、いくつかエラーと警告が発生します。
「失敗した!」と思われる前に、以下に記載するものについては無視してください。
(記載した以外のエラーや警告がもし発生した場合、一度最後まで手順を実行することをおすすめします。)

apt-key
deb.nodesource.comから落としてきたシェルスクリプトに記載されたapt-keyコマンドで発生した警告です。
詳細を調べてもいまいちよくわからなかったのですが、これを無視してもRailsの環境は構築できます。
(誰か詳しい方がいたら教えてください…)

Step 6/18 : RUN curl -sL https://deb.nodesource.com/setup_$NODE_MAJOR.x | bash -
・
・
・
+ curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -
Warning: apt-key output should not be parsed (stdout is not a terminal)

debconf
これもいまいちよくわかりません。(書いといてなんだって話なんですが。)
apt-utilsをインストールしても消えなかったです。
無視しても大丈夫です。

Step 8/18 : RUN apt-get update -qq &&  apt-get install -y  build-essential  nodejs  yarn=$YARN_VERSION-1
・
・
・
debconf: delaying package configuration, since apt-utils is not installed

mysql2
Railsアプリケーション生成コマンドを実行して、最後に出力されたのがこのエラーです。
Gemfileにリストされたmysql2のgemがないよってことで、bundle installを迫ってきています。

このコマンドを実行した時点では、GemfileにはRailsしか記載されておらず、推測ですが、下記の流れで処理されているのではないかと思います。

  1. Gemfileに記載されたRalilsがインストールされる
  2. Rails newにより、Gemfileの記載が更新されmysql2などが追加される
  3. 最後に、Gemfileに書かれたRails以外のgemがインストールされていないためエラーが発生

このエラーを無視してもWelcomeページは確認できるので、一度最後まで手順を実施してみてください。

Could not find gem 'mysql2 (>= 0.4.4)' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.

3-2. 権限変更

生成したRailsアプリケーションのファイル群の所有権が root となっているので、現在のログインユーザーに変更します。

$ sudo chown -R $USER:$USER .

3-3. puma.rbの編集

$ vim config/puma.rb

元の記載は削除して、以下の内容を貼り付けてください。

threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 }.to_i
threads threads_count, threads_count
port        ENV.fetch("PORT") { 3000 }
environment ENV.fetch("RAILS_ENV") { "development" }
plugin :tmp_restart

app_root = File.expand_path("../..", __FILE__)
bind "unix://#{app_root}/tmp/sockets/puma.sock"

stdout_redirect "#{app_root}/log/puma.stdout.log", "#{app_root}/log/puma.stderr.log", true

3-4. database.ymlの編集

$ vim config/database.yml

元の記載は削除して、以下の内容を貼り付けてください。

default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV.fetch('MYSQL_USER') { 'root' } %>
  password: <%= ENV.fetch('MYSQL_PASSWORD') { 'password' } %>
  host: db

development:
  <<: *default
  database: webapp_development

test:
  <<: *default
  database: webapp_test

上記のMYSQL_USER と MYSQL_PASSWORD は DB接続用の情報ファイル で定義した環境変数名を設定します。

4. イメージのビルドとコンテナの起動

いよいよコンテナを起動します!

4-1. イメージのビルド

Dockerfile 及び、DockerHub より引っ張ってきたイメージを全てビルドします。

$ docker-compose build

ビルドが完了したら以下のコマンドで確認します。

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
webapp_web          latest              0ae7b3fc51fd        38 seconds ago      132MB
webapp_app          latest              d661a9898271        47 seconds ago      1.27GB
<none>              <none>              83d4ec18ac0c        6 minutes ago       1.06GB
ruby                2.7.1               9b840f43471e        9 days ago          842MB
nginx               1.19.0              2622e6cca7eb        3 weeks ago         132MB
mysql               8.0                 be0dbf01a0f3        3 weeks ago         541MB

4-2. コンテナの起動

ビルドしたら、下記のコマンドでコンテナを立ち上げます。

$ docker-compose up -d

コンテナが起動しているか確認します。

$ docker-compose ps

全てのコンテナの State が Up となっていることを確認してください。

    Name                  Command               State          Ports
---------------------------------------------------------------------------
webapp_app_1   entrypoint.sh bundle exec  ...   Up
webapp_db_1    docker-entrypoint.sh mysqld      Up      3306/tcp, 33060/tcp
webapp_web_1   /docker-entrypoint.sh /bin ...   Up      0.0.0.0:80->80/tcp

ビルドに失敗した場合

イメージのビルドに失敗したり、コンテナの起動に失敗するとローカルにゴミファイルがたまってしまいます。
一度全てきれいにしたい場合は、コンテナとイメージを全て削除するコマンドを使います。
まずは、コンテナの起動を止めてから実行してください。

コンテナを停止する

$ docker-compose stop

すべてのコンテナを削除する

$ docker rm $(docker ps -q -a)

すべてのイメージを削除する

$ docker rmi $(docker images -q)

5. DB設定

5-1. 権限の付与

DBの操作を一般ユーザーで行うため、実行権限を付与します。

GRANT文を記述したSQLファイルを作成します。
user_name は DB接続用の情報ファイル に設定した MYSQL_USER の値に置き換えてください。

$ vim db/grant_user.sql
GRANT ALL PRIVILEGES ON *.* TO 'user_name'@'%';
FLUSH PRIVILEGES;

dbコンテナに向けてクエリを送ります。
パスワードを求められるので、rootのパスワードを入力してください。

$ docker-compose exec db mysql -u root -p -e"$(cat db/grant_user.sql)"

権限が付与されたか確認します。
パスワードを求められるので、一般ユーザーのパスワードを入力してください。

$ docker-compose exec db mysql -u user_name -p -e"show grants;"

実行結果が横に長くてみづらいかもしれません。
MySQL5系では全ての権限が付与されている場合、「ALL PRIVILEGES」と表示されていたみたいですが、8系ではちゃんと全ての権限名が表示されるため、このような横に長い結果になっているようです。

+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Grants for user_name@%                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, RELOAD, SHUTDOWN, PROCESS, FILE, REFERENCES, INDEX, ALTER, SHOW DATABASES, SUPER, CREATE TEMPORARY TABLES, LOCK TABLES, EXECUTE, REPLICATION SLAVE, REPLICATION CLIENT, CREATE VIEW, SHOW VIEW, CREATE ROUTINE, ALTER ROUTINE, CREATE USER, EVENT, TRIGGER, CREATE TABLESPACE, CREATE ROLE, DROP ROLE ON *.* TO `user_name`@`%`                                                                                                                        |
| GRANT APPLICATION_PASSWORD_ADMIN,AUDIT_ADMIN,BACKUP_ADMIN,BINLOG_ADMIN,BINLOG_ENCRYPTION_ADMIN,CLONE_ADMIN,CONNECTION_ADMIN,ENCRYPTION_KEY_ADMIN,GROUP_REPLICATION_ADMIN,INNODB_REDO_LOG_ARCHIVE,PERSIST_RO_VARIABLES_ADMIN,REPLICATION_APPLIER,REPLICATION_SLAVE_ADMIN,RESOURCE_GROUP_ADMIN,RESOURCE_GROUP_USER,ROLE_ADMIN,SERVICE_CONNECTION_ADMIN,SESSION_VARIABLES_ADMIN,SET_USER_ID,SHOW_ROUTINE,SYSTEM_USER,SYSTEM_VARIABLES_ADMIN,TABLE_ENCRYPTION_ADMIN,XA_RECOVER_ADMIN ON *.* TO `user_name`@`%` |
+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+

5-2. DBの作成

railsコマンドでDBを作成します。

$ docker-compose exec app rails db:create

6. 確認

お疲れさまでした!
下記のlocalhostをクリックして、Welcomeページが表示されるでしょうか。
RailsRuby のバージョンが指定したものであるか、確認してください。

http://localhost Ruby_on_Rails.jpg

あとがき

うまくWelcomeページが表示されましたでしょうか?

参考記事を見ながら構築していったのですが、Rails6用に書かれていなかったため、かなり苦労しました…。(Rails学ぶことが目的だったので、Rails5でよかったですね…)

Rails6に対応したあとはバージョンの記載を一元管理したり、色々なサイトで書かれていることを網羅して今回の構築ファイルたちができあがりました。
とりあえずはこの環境でRails勉強していきます!

もし間違い・ご指摘などあればぜひお願いします。
今度はRails関連の記事でお会いしましょう!(多分)