Zenn
🍺

Ruby on Railsの環境構築を（TypeScript込みで）してみた話

2022/02/02に公開
Rails
Ruby
TypeScript
rails6
tech

きっかけ

...

手順

Docker

ruby は 3.1 のイメージが最新に見えたので、3.0.3 を選択しました。
rails は rubyの3で使えそうだった6.1.4.1 を選択しました。
深い考えはありません。

rails 以外に開発に必要そうなものをいくつかインストールしておきました。

volumeのrubyuserは当初rubyuserというユーザを作って作業をしようとしていた名残です。ここに展開する予定です。

yarnはapt-getで導入するとバージョンがよろしくないようなので、npmで導入しました

Dockerfile
FROM ruby:3.0.3
LABEL Name=ruby Version=0.0.2
RUN apt-get update -qq && apt-get install -y \
    nodejs \
    npm \
    # yarn \
    && npm install -g yarn \
    echo end
RUN gem install rails -v "6.1.4.1" -N
RUN gem install rspec \
    && gem install rubocop \
    && gem install solargraph \
    && gem install ruby-debug-ide debase

EXPOSE 3000 1234
docker-compose.yml
version: '3'
services:
  web:
    image: ruby
    build: .
    ports:
      - "3000:3000"
    volumes:
      - /d/github/xxx:/home/rubyuser/git-workspace/xxx

コンテナ内作業

コンテナ内の展開先で以下のコマンドを叩いていきます

webpackという文字がインストール中に見えたので、TypeScriptの導入も一緒にできるかな？と調べてみた結果
--webpack=typescriptのオプションを追加しておくとTypeScriptが利用可能になりました。
skipで始まるオプションは今回作ろうとしている範囲では使わない可能性が高いであろうものだけに絞りました。判断に迷ったものはそのままなので実際にはもっと絞れそうです。
テストは railsの前にちょっと調べていた rspec を使ってみるつもりですがrailsとの相性等の情報をちゃんと調べていないので現時点ではどうなるか分かりません。

rails _6.1.4.1_ new . --force --skip-action-mailer --skip-action-mailbox --skip-test --skip-system-test --skip-active-record --webpack=typescript

同ディレクトリで以下のコマンドを実行してブラウザで http://localhost:3000/ にアクセスするととりあえず動作していることが確認できました。

rails s -p 3000 -b '0.0.0.0'

おまけ

TypeScriptの呼び出し

ここまで提示した手順で導入している場合、
app/javascript/packs/hello_typescript.ts
が生成されます。

これをview（erbファイル）で呼び出すには

<%= javascript_pack_tag 'hello_typescript' %>

とすればよいようです。手順以外の追加の設定はしておらず、拡張子も付けないのでjsと同じ使用感で良いようです。

Productionモードで実行した際にpublic配下のファイルにアクセスできない件について

rails s -e production (以下略)

とproduction環境で実行した際にjsファイル等がブラウザから取得できなくなってしまいました。

Rails6系の場合

config/environments/production.rb
  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

がその設定らしいです。「RAILS_SERVE_STATIC_FILES」が環境変数に含まれている場合のみアクセス可能になります。あらやだ初見殺し。

テスト環境の場合

config/environments/test.rb
  config.public_file_server.enabled = true
  config.public_file_server.headers = {
    'Cache-Control' => "public, max-age=#{1.hour.to_i}"
  }

という設定になっているので、API専用サーバーではない場合は環境変数にRAILS_SERVE_STATIC_FILESを追加するよりも、
ENV['RAILS_SERVE_STATIC_FILES'].present?の行を test.rbの方に合わせてtrueとするか、いっそ一旦どちらも消した上でapplication.rbの方に設定しても良い気がしました。
私はapplication.rbに移動することにしました。

まとめ

rubyのDockerimageを利用して環境構築する際はyarnには要注意。

RailsはRuby以外にもNodejsとSCSSが標準装備なのが良いですね。
色々調べながらやってた割にはやることはシンプルでした。

お疲れさまでした。

Discussion