【Docker, BFF】Railsプロジェクト作成時にやることまとめ

[Railsプロジェクト作成時にやること全まとめ](https://qiita.com/d0ne1s/items/16b0815bb5bc0ed13eb8#%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E8%A8%AD%E5%AE%9A)
以前こんな記事を書きました。

この時とは状況が変わり、今ではローカルにrenvやRailsをインストールしておらず、開発環境は全てDockerで作っています。

またフロントエンドはReact等で構築し、RailsはBFFとして使用することが多くなっていきそうです。これからの自分に向けて、プロジェクト作成時にやることを再度まとめて行こうと思います。以下を全て盛り込んだ、完全自分仕様です。

- Postgres
- RSpec
- VSCode Remote Development
- Heroku CLI
- Vim
- Zsh(Prezto)

## Dockerで開発環境を構築
```zsh
$ touch Dockerfile docker-compose.yml Gemfile Gemfile.lock
```
```Dockerfile
FROM ruby:2.7

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 nodejs postgresql-client yarn vim zsh

RUN mkdir /app_name
ENV APP_ROOT /app_name
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

RUN bundle install
ADD . $APP_ROOT

RUN chsh -s /bin/zsh
```
```docker-compose.yml
version: "3"
services:
  db:
    image: postgres
    volumes:
      - psgl_data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: root
      POSTGRES_PASSWORD: password
    ports:
      - 5433:5432
  web:
    build:
      context: .
      dockerfile: Dockerfile
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    tty: true
    stdin_open: true
    depends_on:
      - db
    ports:
      - "3000:3000"
    volumes:
      - .:/app_name
volumes:
  psgl_data:
```
```rb:Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 6'
```
`Gemfile.lock`は空のままでOK

```
$ docker-compose run web rails new . --force --no-deps --database=postgresql --skip-turbolinks --skip-test
$ docker-compose build
```
`config/database.yml`を編集

```config/database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  host: db
  username: root
  password: password

development:
  <<: *default
  database: app_name_development

test:
  <<: *default
  database: app_name_test
```
ビルドが終わったら以下のコマンドを叩く

```zsh
$ docker-compose up
$ docker-compose exec web rails db:create
```

http://localhost:3000/ にアクセスして動作確認。

## VSCode Remote Developmentの環境を整える
まず、今起動しているコンテナを停止。

```zsh
$ docker-compose stop
```
そして以下を実行

- VSCodeの画面の一番左下の「><」アイコンをクリック
- `Reopen in Container`をクリック
- `From docker-compose.yml`をクリック
- `web`をクリック
- プロジェクトのルートディレクトリに`.devcontaner/devcontainer.json`と`.devcontaner/docker-compose.yml`が作成される

`.devcontaner/devcontainer.json`を編集して、Docker環境で有効化する拡張機能を追加。

```.devcontaner/devcontainer.json
{
  "name": "Existing Docker Compose (Extend)",
  "dockerComposeFile": [
    "../docker-compose.yml",
    "docker-compose.yml"
  ],
  "service": "web",
  "workspaceFolder": "/workspace",
  "settings": {
    "terminal.integrated.shell.linux": null
  },
  "extensions": [
    "rebornix.ruby",
    "wingrunr21.vscode-ruby",
    "kaiwood.endwise",
    "ms-azuretools.vscode-docker",
    "oderwat.indent-rainbow"
  ]
}
```

`./devcontainer/docker-compose.yml`を編集して、リモートでPreztoを使えるようにしたり、GitやVimの設定を引き継いだり。

```./devcontainer/docker-compose.yml
version: '3'
services:
  web: 
    volumes:
      - .:/workspace:cached
      - ~/.ssh:/root/.ssh
      - ~/.gitconfig:/root/.gitconfig
      - ~/.vimrc:/root/.vimrc
      - ~/.vim/colors/iceberg.vim:/root/.vim/colors/iceberg.vim
      - ~/.netrc:/root/.netrc
      - ~/.zshrc:/root/.zshrc
      - ~/.zlogin:/root/.zlogin
      - ~/.zprofile:/root/.zprofile
      - ~/.zenv:/root/.zenv
      - ~/.zpreztorc:/root/.zpreztorc
      - ~/.zprezto:/root/.zprezto
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0' ; while sleep 1000; do :; done"
```

最後に、画面左下をクリックして表示されるメニューから`Rebuild Container`を選択します。

## GitHubにリポジトリを作って紐付け
1. [GitHub](https://github.com/)にログイン
2. 画面左「Repositories」横の「New」をクリック
3. リポジトリ名等を入力(チェック等は基本初期設定でOK）し、「Create repository」をクリック

## .gitignoreを編集
1. [gitignore.io](https://www.gitignore.io/)にアクセス
2. トップ画面で「rails」と入力
3. 表示されるテキストを`.gitignore`に記入
4. 10行目付近のsqliteに関する記述を削除
4. 以下を追記

```
# original
config/database.yml
.devcontainer/
```

その後`databese.yml`を複製し、`databese_default.yml`というファイルを作成します。

`database.yml`を直接GitHubで管理してしまうと、ローカルのデータベースのパスワード等が晒されてしまうので、各々`databese_default.yml`を元に自分専用の`databese.yml`を使って開発を行います。

##ローカルとGitHubを接続
```terminal
$ git add -A
$ git commit -m "First commit"
$ git remote add origin https://github.com/nyshk97/project_name.git
$ git push -u origin master
```
`project_name`の部分は、GitHubで作成したプロジェクト名に合わせます。

## ローカルのDBとTablePlusを接続
データベースをGUIで管理するためにTablePlusと接続します。

1. 起動画面で右クリック > New > Connection > PostgreSQL を選択
2. 以下のように入力し、connectをクリック
<img width="498" alt=" 2019-12-26 10.27.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244893/f1008e5a-ec6a-2ab4-6e04-42975a5e2fdd.png">

※`database.yml`でユーザー名やパスワード等を設定している場合には、その内容を記述する必要があります。

## タイムゾーンを変更
タイムゾーンをデフォルトのUTC(世界標準時間)からJST(日本時間)に変更します。

```config/application.rb
class Application < Rails::Application
.
.
  config.time_zone = 'Tokyo' #Time.zone.nowとかの時に日本時間を使用する
  config.active_record.default_timezone = :local #DBの読み書きを日本時間でやる
end
```
`Time.now`とか、SQL文の`NOW()`とかを日本時間にするにはまた別の設定が必要なので、できるだけ使わないように気をつける。

[Railsタイムゾーンまとめ](https://qiita.com/aosho235/items/a31b895ce46ee5d3b444)

## 不要なファイルを生成しないように修正(view含む)
`rails g controller`実行時に、`controller`と`view`以外のファイルを生成しないように設定します。

```config/application.rb
module RailsQuickSetup
  class Application < Rails::Application
    config.load_defaults 6.0
    #追記↓
    config.generators do |g|
      g.assets false
      g.helper false
    end
  end
end
```

## Rubocopを導入
```rb:Gemfile
group :development do
  gem 'rubocop'
```
```zsh
$ bundle install
$ touch .rubocop.yml
```
```yml:.rubocop.yml
AllCops:
  TargetRubyVersion: 2.6.5
  Exclude:
    - 'config.ru'
    - 'bin/**'
    - 'lib/**'
    - 'db/**/*'
    - 'node_modules/**/*'

# 日本語でのコメントを許可
Style/AsciiComments:
  Enabled: false

# クラスのコメント必須を無視
Style/Documentation:
  Enabled: false

#文字列をfreezeするか
Style/FrozenStringLiteralComment:
  Enabled: false

# 名前空間を分ける時、ネストしない書き方を許可
Style/ClassAndModuleChildren:
  Enabled: false

Style/HashEachMethods:
  Enabled: true

Style/HashTransformKeys:
  Enabled: true

Style/HashTransformValues:
  Enabled: true

# 1行の文字数
Layout/LineLength:
  Max: 150
  Exclude:
    - "db/migrate/*.rb"
```
```
$ rubocop -a 
$ rubocop --auto-gen-config
```
[VSCodeでRubocopを使う](https://qiita.com/d0ne1s/items/a3566aca023d11f2bfc4)

## RSpecを導入
以下の記事を参考に、Capybara以外をインストールします。

[RSpecを導入する](https://qiita.com/d0ne1s/items/1ecd114b33e80058215f)

## dotenvを導入
環境変数を扱いやすくします。

```rb:Gemfile
gem 'dotenv-rails'
```
```terminal
$ bundle install
$ touch .env
```
今後環境変数を使う時には、`.env`ファイル内に書き込んでいきます。
[環境によって変わる設定値はdotenvを使うと便利](https://qiita.com/closer/items/f8d8ba00ae86d7051764)

##Herokuアプリを作成しデプロイ
本番環境のデータベースも開発環境と同じPostgresなので、データベース周りの設定は基本的に不要です。

```config/environments/production.rb
config.assets.compile = true
```
```terminal
$ heroku login
```
```terminal
$ heroku create rails-quick-setup
```
アプリ名にアンダーバーは使えません。

```terminal
$ git push heroku master
```
```terminal
$ heroku run rails db:migrate
```
[RailsアプリをHerokuにデプロイする手順](https://qiita.com/d0ne1s/items/59b5d9ed69e822c5b39c)

## HerokuのDBにTablePlusで接続
1. [Herokuのダッシュボード](https://dashboard.heroku.com/apps)にアクセス
2. 該当のアプリ名(rails-quick-setup)をクリック
3. Resources > Heroku Postgres をクリック
4. Settings > View Credentials をクリック
5. 表示される接続情報をTablePlusに入力し、connectをクリック
 
※TablePlusの画面で「new connection from url」をクリックして、URIに書かれている記述をコピペすると、入力の手間が省けます。
<img width="497" alt=" 2019-12-27 18.43.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244893/fd2d20ab-0d89-ad91-2ee6-266506ec51f8.png">

## READMEを編集
GitHub上で編集するのが好みです。
開発環境の構築方法、利用方法、サービスの構成や機能など、アプリの性質によって書くべきことが変わってくる部分かと思います。