環境構築の手順 2023年版

  • 2022年のパRails輪読会の 環境構築の手順を参考に進めれば問題ないはずです。
  • ただ、2023年のパRails輪読会では扱うRubyなどのバージョンが2022年とは微妙に異なるため、バージョンについてや、環境構築の手順に記載がないエラーの対応についてこのメモで補足できたらと思います。

2023年版の環境

# 環境
- Ruby 2.7.8
- Rails 6.0.6.1
- node v18.17.1(2023年8月時点の最新安定版)
  • 環境構築する際は各バージョンを上記に読み替えて実行してください。

rails newする際の手順一覧

  1. アプリケーション作成
    (参考リンク：【Rails】Git管理せずにRails newしたい - 時々とおまわり)
$ rails new アプリケーション名 --skip-git
  1. アプリ内へ移動しプラットフォーム追加（誰の環境でも問題なくBundlerを実行できるようにするため）
$ cd アプリケーション名
$ bundle lock --add-platform ruby
$ bundle lock --add-platform x86_64-linux (Linux以外でnewされた場合はこれも追加)
  1. Gemfileを以下のように書き換え、追加する
    (net-httpに関してはリンク参照：https://zenn.dev/be_the_light/articles/8d8951f6596528)
gem 'webpacker', '~> 4.0'
↓
gem 'webpacker', '~> 5.0'
#　↑これに変更する

gem 'net-http'　
#　↑これを追加する
  1. Gemfileに沿ってgemをインストール
$ bundle install
  1. webpackerインストール実行。途中の質問はすべてYにする。
$ bundle exec rails webpacker:install

6.　足りないパッケージを追加

$ yarn add '@babel/plugin-proposal-private-methods'
  1. さらに足りないパッケージを追加
$ yarn add '@babel/plugin-proposal-private-property-in-object'
8. webpackの環境変数の設定（現在必要なし） 
​​​​8. /bin/webpackの５行目に以下の記載を追加
​​​​```
​​​​ENV["NODE_OPTIONS"] = "--openssl-legacy-provider"
​​​​```

以上で問題なく$ bin/rails sできるはずです！

途中のエラー等に関しては以下参照↓
https://bootcamp.fjord.jp/reports/79356

$ yarn installでエラーが発生する場合

@rails/webpackerを5.3.0にアップグレードすると解消できるはずです。

yarn installできない · Issue #3 · sadanora/book_admin
yarn installできるようにした by sadanora · Pull Request #2 · sadanora/book_admin

ActionView::Template::Error が発生した場合

このようなエラー

Started GET "/tasks/new" for ::1 at 2023-08-24 16:02:59 +0900
   (1.5ms)  SELECT sqlite_version(*)
   (0.4ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
Processing by TasksController#new as HTML
  Rendering tasks/new.html.erb within layouts/application
  Rendered tasks/_form.html.erb (Duration: 14.7ms | Allocations: 3606)
  Rendered tasks/new.html.erb within layouts/application (Duration: 17.7ms | Allocations: 4070)
[Webpacker] Compiling...
[Webpacker] Compilation failed:
node:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/user/samples/01/04/todo/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/user/samples/01/04/todo/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/user/samples/01/04/todo/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/user/samples/01/04/todo/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/user/samples/01/04/todo/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/user/samples/01/04/todo/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/user/samples/01/04/todo/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/user/samples/01/04/todo/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/user/samples/01/04/todo/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/Users/user/samples/01/04/todo/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/user/samples/01/04/todo/node_modules/babel-loader/lib/index.js:44:71 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.17.1

Completed 500 Internal Server Error in 3507ms (ActiveRecord: 1.6ms | Allocations: 16665)


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

webpackのコンパイルに失敗しているのでError: error:0308010C:digital envelope routines::unsupportedについて調べてみたところ、以下の記事を発見

Node.js 17以上にした際のOpenSSL互換エラー対応

OpenSSLの互換性の問題らしい。
一応$ export NODE_OPTIONS=--openssl-legacy-providerで環境変数を設定したところwebpackのビルドはできるようになった。
--openssl-legacy-provider | Node.js v18.17.1

/bin/webpackで環境変数を設定しておけばいいかも？

#!/usr/bin/env ruby

ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"]  ||= "development"
ENV["NODE_OPTIONS"] = "--openssl-legacy-provider" # 追記

require "pathname"

# 省略

Webpacker::Manifest::MissingEntryError が発生した場合

webpack の生成物が残っている可能性があるので以下を試してみてください。

  • bin/webpack でコンパイルしてみる。
  • bin/rails webpacker:clean webpacker:clobber で webpacker の生成物を消してみる。
  • node_modulesをまるごと消して NPM パッケージを再インストールしてみる。
Select a repo