のらブログ

sadanoraが思ったことを書きます

はじめてのRails ローカル開発環境構築で初心者がつまづいたところ

この記事はフィヨルドブートキャンプ Advent Calendar 2021 Part 2 の8日目の記事です。

adventar.org

Part 1もあります。

フィヨルドブートキャンプ Part 1 Advent Calendar 2021 - Adventaradventar.org

はじめに

こんにちは、フィヨルドブートキャンプでプログラミングを学習しているsadanoraです。 フィヨルドブートキャンプには2020年8月から参加しています。1年4ヶ月かけて地道にプラクティスを進め、やっとこさRailsのプラクティスに突入しました。

Railsのプラクティスに突入して早速、環境構築でいくつかつまづいた点があったのでブログにまとめます。

Railsの環境構築でエラーが出て困っている方のお役に立てたら嬉しいです。

前提

試した環境はこちら

  • macOS Catalina 10.15.7
  • ruby 2.6.5(rbenv1.1.2)

つまづきその1

gem i railsしたのにrailsが入っていないと言われる

Railsをインストールしたはずなのに、railsが入っていないというエラーに遭遇しました。

$ gem i rails
$ rails -v
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.

解決方法

ターミナルの再起動で解決できました。

rubyrailsコマンドをwhichしてみると、

ターミナルの再起動前

$ which ruby
/Users/foo/.rbenv/shims/ruby
$ which rails
/usr/foo/rails

ターミナルの再起動後

$ which ruby
/Users/foo/.rbenv/shims/ruby
$ which rails
/Users/foo/.rbenv/shims/rails
$ rails -v
Rails 6.1.4.1

という感じだったので、railsコマンドのパスが通ってないのが原因だったように思えます。*1 ターミナルの再起動ではなく$ source ~/.zshrcでもよさそうです。

つまずきその2

node.jsはLTS版を使わないと困るという学び。

rails gで作ったページがエラーになる

$ rails new testapp
$ rails g controller helloworld index
$ rails s

上記のようにRailsアプリを作りハロワのページを作成、rails sしてブラウザで http://localhost:3000/helloworld/index にアクセスしたもののエラーでページが表示されませんでした。

ターミナルに表示されたログは以下です。

Started GET "/helloworld/index" for ::1 at 2021-12-05 12:34:24 +0900
Processing by HelloworldController#index as HTML
  Rendering layout layouts/application.html.erb
  Rendering helloworld/index.html.erb within layouts/application
  Rendered helloworld/index.html.erb within layouts/application (Duration: 0.8ms | Allocations: 39)
[Webpacker] Compiling...
[Webpacker] Compilation failed:
node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports 
#--中略--
 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.1.0

  Rendered layout layouts/application.html.erb (Duration: 3890.1ms | Allocations: 5397)
Completed 500 Internal Server Error in 3903ms (Allocations: 5723)

ActionView::Template::Error (Webpacker can't find application.js in /xxx/my_web_apps/testapp/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:
{
}
):
     7:     <%= csp_meta_tag %>
     8: 
     9:     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    10:     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    11:   </head>
    12: 
    13:   <body>
    
app/views/layouts/application.html.erb:10

webpackerがコンパイルに失敗しており、理由としてunsupportedと書いてあるのが気になります。

さらに、rails newした際のログを改めてみてみました。

rails  webpacker:install
Warning: you are using an unstable release of Node.js (v17.1.0). If you encounter issues with Node.js, consider switching to an Active LTS release. More info: https://docs.npmjs.com/try-the-latest-stable-version-of-node

「安定版ではないnode.jsを使っています。問題がある場合はアクティブLTS版への切り替えを検討してください」的なことが書いてありました。 はい、まさに問題に直面していました。

解決方法

rails newで作ったディレクトリを一旦削除し、node.jsの安定版のバージョンをインストールしてrails newからやり直したところ、エラーを解消することができました。

自分はnode.jsはnodebrewを使ってインストールしているので、以下はnodebrewでの実行例です。

$ nodebrew install stable # 安定版のインストール
$ nodebrew use stable # 安定版を指定
use v16.13.1
$ rails new testapp
$ rails g controller helloworld index
$ rails s

特に困った点など

turbolinksが悪いのではと勘違いした

railsが出してくれるエラーではソースのturbolinksの読み込み部分をハイライトしていたので、最初turbolinksが問題なのかと勘違いしてしまいました。

対処の途中でturbolinksを無効化してエラーを解消できたりもしたのですが、「じゃあturbolinks使いたいときはどうするのか」等々モヤっとした感じで何か違う気がしていました。

ログからnode.jsのバージョンの問題だと気付けてよかったです。

まとめ

  • ナイスな点

    ログを読んで対処できた

  • 改善点

    次は最初にログをちゃんと読む

*1:rbenvを使っていて、rbenvのインストール時にパスを通している前提なので、rbenvを使っていないとかだと話は変わるはず