はじめに

Dockerでローカル開発環境構築を行い、Railsチュートリアルを再走しております

• Railsチュートリアル最新版（2020.8.6現在）に対応のRails 6
• Dockerを使用し、開発環境の再現が可能
• なるべくローカル環境にインストールしない

今回はRailsチュートリアルの7章に相当する部分で、
Dockerコンテナ上で開発を行っている場合にデバッグを行う内容を紹介します

第一回
DockerでRailsチュートリアルのローカル開発環境構築（Rails 6 + PostgreSQL + Webpack) - Qiita

第二回
DockerでRailsチュートリアルのローカル開発環境構築 - RSpec導入 & CircleCIでHerokuデプロイ- - Qiita

第３回
DockerでRailsチュートリアルのローカル開発環境構築 - WebpackでBootstrapとFont Awesomeを導入 - - Qiita

個人開発アプリ
mdClip ＜オンラインmarkdownエディタ＞

Dockerのコンテナ上で操作する場合はターミナルのコマンドを適宜

$ docker-compose run app ...

もしくは

$ docker-compose exec app ...

で置き換えてください。

Dockerコンテナ上の開発環境でRailsのデバッグを行う

方法1 Railsのコンテナにアタッチ -> デタッチ

参考サイト
Docker と Rails 5.2 の開発環境でデバッグを行えるようにする - ココナラよもやまブログ

Railsのコンテナにアタッチする

$ docker attach $(docker-compose ps -q app)

これでデバッグコンソールが使用できます

コンテナからデタッチする

デバッグをquitで抜けると
コンテナが終了してしまうのでrails serverも落ちる
これではすごく使い勝手が悪いなと思ったら

コンテナからデタッチ（Control P -> Control Q）するだけなら、コンテナを終了しなくて済むとのこと

ただ、VS Codeのコンソールで操作していると
Control P , Control Qは他のショートカットに割り当てられない

これはコンテナでタッチキーを置き換えることで解決方法とのことです

参考記事
docker で Ctrl-p ２回押し問題 (detach-keys の問題) を解決するには - Qiita

~/.docker/config.jsonに設定を記述します

vi ~/.docker/config.json

{
  # ...省略
  "detachKeys": "ctrl-e"
}

私は control + eでデタッチできるように設定しました

方法2 VS Codeでデバッグ用のコンテナを動かす

VS codeのデバッグ機能から、デバッグ用のコンテナを立ててデバッグする方法もあるようです

Developing inside a Container using Visual Studio Code Remote Development

シームレスで便利そうだと思ったのですが
ここまででちょっと時間を使ってしまったのでまた別の機会に追記します

自分用メモ

Get started with development Containers in Visual Studio Code

VS Code - Remote Containers で Docker Compose で動いている Rails アプリに接続する - さめたコーヒー

Troubleshoot

いずれもBootstrapのバージョンが異なることに起因します
あまり時間を掛けて調べる意味もない気がするので

Bootstrapのバージョンは合わせた方がいいかもしれません

Formが左に寄る

#修正前
col-md-offset-3
#修正後
offset-md-3

$state-danger-textがないよ

$text-danger: #dc3545;

# ...中略...

.field_with_errors {
  @extend .has-error;
  .form-control {
    color: $text-danger;
  }
}

.has-errorがないよ

.has-error -> :invalid

$text-danger: #dc3545;

# ...中略...

.field_with_errors {
  @extend :invalid;
  .form-control {
    color: $text-danger;
  }
}