# 環境構築の手順 2023年版

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

## 2023年版の環境

# 環境
- Ruby 2.7.8
- Rails 6.0.6.1
- node v18.17.1(2023年8月時点の最新安定版)

- 環境構築する際は各バージョンを上記に読み替えて実行してください。

## `rails new`する際の手順一覧

1. アプリケーション作成
(参考リンク：[【Rails】Git管理せずにRails newしたい \- 時々とおまわり](https://karlley.hatenablog.jp/entry/2023/05/20/095016))

$ rails new アプリケーション名 --skip-git

2. アプリ内へ移動しプラットフォーム追加（誰の環境でも問題なくBundlerを実行できるようにするため）

$ cd アプリケーション名
$ bundle lock --add-platform ruby
$ bundle lock --add-platform x86_64-linux (Linux以外でnewされた場合はこれも追加)

3. Gemfileを以下のように書き換え、追加する
(`net-http`に関してはリンク参照：https://zenn.dev/be_the_light/articles/8d8951f6596528)

gem 'webpacker', '~> 4.0'
↓
gem 'webpacker', '~> 5.0'
#　↑これに変更する

gem 'net-http'　
#　↑これを追加する

4. Gemfileに沿ってgemをインストール

$ bundle install

5. webpackerインストール実行。途中の質問はすべて`Y`にする。

$ bundle exec rails webpacker:install

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

$ yarn add '@babel/plugin-proposal-private-methods'

7. さらに足りないパッケージを追加

$ yarn add '@babel/plugin-proposal-private-property-in-object'

<details>
<summary>8. webpackの環境変数の設定（現在必要なし）</summary>

8. /bin/webpackの５行目に以下の記載を追加

    ENV["NODE_OPTIONS"] = "--openssl-legacy-provider"

</details>
<br>

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

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

## `$ yarn install`でエラーが発生する場合
`@rails/webpacker`を5.3.0にアップグレードすると解消できるはずです。

[yarn installできない · Issue \#3 · sadanora/book\_admin](https://github.com/sadanora/book_admin/issues/3)
[yarn installできるようにした by sadanora · Pull Request \#2 · sadanora/book\_admin](https://github.com/sadanora/book_admin/pull/2)

## 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互換エラー対応](https://zenn.dev/yogarasu/articles/425732ff408d06)

OpenSSLの互換性の問題らしい。
一応`$ export NODE_OPTIONS=--openssl-legacy-provider`で環境変数を設定したところwebpackのビルドはできるようになった。
[\-\-openssl\-legacy\-provider | Node.js v18.17.1](https://nodejs.org/docs/latest-v18.x/api/cli.html#--openssl-legacy-provider)

`/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 パッケージを再インストールしてみる。