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

Railsプロジェクト作成時にやること全まとめ
以前こんな記事を書きました。

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

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

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

Dockerで開発環境を構築

$ touch Dockerfile docker-compose.yml Gemfile Gemfile.lock

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:

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

ビルドが終わったら以下のコマンドを叩く

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

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

VSCode Remote Developmentの環境を整える

まず、今起動しているコンテナを停止。

$ 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にログイン
2. 画面左「Repositories」横の「New」をクリック
3. リポジトリ名等を入力(チェック等は基本初期設定でOK）し、「Create repository」をクリック

.gitignoreを編集

1. gitignore.ioにアクセス
2. トップ画面で「rails」と入力
3. 表示されるテキストを.gitignoreに記入
4. 10行目付近のsqliteに関する記述を削除
5. 以下を追記

# original
config/database.yml
.devcontainer/

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

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

##ローカルとGitHubを接続

$ 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をクリック

※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タイムゾーンまとめ

不要なファイルを生成しないように修正(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を導入

Gemfile

group :development do
  gem 'rubocop'

$ bundle install
$ touch .rubocop.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を使う

RSpecを導入

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

RSpecを導入する

dotenvを導入

環境変数を扱いやすくします。

Gemfile

gem 'dotenv-rails'

$ bundle install
$ touch .env

今後環境変数を使う時には、.envファイル内に書き込んでいきます。
環境によって変わる設定値はdotenvを使うと便利

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

config/environments/production.rb

config.assets.compile = true

$ heroku login

$ heroku create rails-quick-setup

アプリ名にアンダーバーは使えません。

$ git push heroku master

$ heroku run rails db:migrate

RailsアプリをHerokuにデプロイする手順

HerokuのDBにTablePlusで接続

1. Herokuのダッシュボードにアクセス
2. 該当のアプリ名(rails-quick-setup)をクリック
3. Resources > Heroku Postgres をクリック
4. Settings > View Credentials をクリック
5. 表示される接続情報をTablePlusに入力し、connectをクリック

※TablePlusの画面で「new connection from url」をクリックして、URIに書かれている記述をコピペすると、入力の手間が省けます。

READMEを編集

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