<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>node16系から18系にバージョンアップした手順を備忘録的に記事にまとめました。<br>
nodeのバージョンアップによるパッケージの依存関係修復については触れません。<br>
前提条件としてnodeのバージョン管理にvoltaを使用しています。</p>
<p>node <a href="https://nodejs.org/en/blog/release/v16.14.2/" target="_blank" rel="nofollow noopener noreferrer">16.14.2</a> からnode <a href="https://github.com/nodejs/node/blob/main/doc/changelogs/CHANGELOG_V18.md#18.12.0" target="_blank" rel="nofollow noopener noreferrer">18.12.0</a>へアップデートします。</p>
<h1 id="%E6%89%8B%E9%A0%86">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 手順</h1>
<h2 id="volta%E3%81%AEnode%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%92%E4%B8%8A%E3%81%92%E3%82%8B">
<a class="header-anchor-link" href="#volta%E3%81%AEnode%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%92%E4%B8%8A%E3%81%92%E3%82%8B" aria-hidden="true"></a> voltaのnodeのバージョンを上げる</h2>
<p>node18の最新のLTSをインストール</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ volta <span class="token function">install</span> node@18
</code></pre></div><p>voltaにインストールされているバージョンを確認</p>
<div class="code-block-container"><pre><code>$ volta list all
</code></pre></div><div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ volta list all
⚡️ User toolchain:

    Node runtimes:
        v6.17.1
        v8.17.0
        v10.24.1
        v12.22.7
        v12.22.11
        v12.22.12
        v14.19.1
        v16.14.2
        v16.15.0
        v16.18.0
        v16.18.1
        v18.12.0 <span class="token punctuation">(</span>current @ <span class="token punctuation">{</span>プロジェクトのパス<span class="token punctuation">}</span><span class="token punctuation">)</span>
        v19.0.0
</code></pre></div><p>nodeのバージョン指定</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ volta pin node@v18.12.0
</code></pre></div><p>nodeのバージョン確認</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ <span class="token function">node</span> <span class="token parameter variable">-v</span>
v18.12.0
</code></pre></div><h2 id="node_modules%E3%82%92%E5%86%8D%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#node_modules%E3%82%92%E5%86%8D%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> node_modulesを再インストール</h2>
<p>node_modules削除</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ <span class="token function">rm</span> <span class="token parameter variable">-i</span> <span class="token parameter variable">-rf</span> node_modules    
</code></pre></div><p>yarn.lock削除</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ <span class="token function">rm</span> <span class="token parameter variable">-f</span> yarn.lock
</code></pre></div><p>cache削除</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ <span class="token function">yarn</span> cache clean  
</code></pre></div><p>node_modules再インストール</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ <span class="token function">yarn</span> <span class="token function">install</span>
</code></pre></div><p>これでnodeV18系のnode_modulesが再インストールされました。</p>
<h2 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 動作確認</h2>
<p>動作確認としてアプリを起動させると。。。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ <span class="token function">yarn</span> dev
</code></pre></div><p>以下のエラーが発生しました。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"> ERROR  Error: error:0308010C:digital envelope routines::unsupported 
</code></pre></div><h2 id="openssl%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7%E3%82%A8%E3%83%A9%E3%83%BC">
<a class="header-anchor-link" href="#openssl%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7%E3%82%A8%E3%83%A9%E3%83%BC" aria-hidden="true"></a> OpenSSLの互換性エラー</h2>
<p>Node16ではOpenSSL1.1を使用していましたが、Node17からはOpenSSL3.0に変更されたことで互換性が取れずにエラーになっているようです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__521787ffaeb66" src="https://embed.zenn.studio/card#zenn-embedded__521787ffaeb66" data-content="https%3A%2F%2Fzenn.dev%2Fyogarasu%2Farticles%2F425732ff408d06" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/yogarasu/articles/425732ff408d06" style="display:none" target="_blank">https://zenn.dev/yogarasu/articles/425732ff408d06</a></p>
<p>このエラーを回避するためにnodeのオプションで<a href="https://nodejs.org/api/cli.html#--openssl-legacy-provider" target="_blank" rel="nofollow noopener noreferrer">openssl-legacy-provider</a>を指定し、古いプロバイダーを使用することで回避できます。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token builtin class-name">export</span> <span class="token assign-left variable">NODE_OPTIONS</span><span class="token operator">=</span>--openssl-legacy-provider
</code></pre></div><p>ビルド時にオプションを指定するためにpackage.jsonのscriptsに追記しました。</p>
<div class="code-block-container"><pre class="language-json"><code class="language-json">  <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"dev"</span><span class="token operator">:</span> <span class="token string">"node --openssl-legacy-provider node_modules/.bin/next dev"</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h2 id="econnrefused%E3%82%A8%E3%83%A9%E3%83%BC">
<a class="header-anchor-link" href="#econnrefused%E3%82%A8%E3%83%A9%E3%83%BC" aria-hidden="true"></a> ECONNREFUSEDエラー</h2>
<p>これでもう一度ビルドしてみるとビルド自体は成功しますが、サーバー側のAPIでECONNREFUSEDエラーが発生しています。クライアント側では叩けているのでサーバー側だけで発生していそうです。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">get: http://<span class="token punctuation">{</span>エンドポイント<span class="token punctuation">}</span> - ECONNREFUSED
</code></pre></div><p>node16まではIpv4に接続することがデフォルトになっていたようですが、node18からはIpv6に優先して接続するようになったことが原因のようです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fa3cd99cbb25" src="https://embed.zenn.studio/card#zenn-embedded__fa3cd99cbb25" data-content="https%3A%2F%2Fwww.reddit.com%2Fr%2Fipv6%2Fcomments%2Fqbr8jc%2Fnodejs_finally_prefers_ipv6_addresses_over_ipv4%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.reddit.com/r/ipv6/comments/qbr8jc/nodejs_finally_prefers_ipv6_addresses_over_ipv4/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.reddit.com/r/ipv6/comments/qbr8jc/nodejs_finally_prefers_ipv6_addresses_over_ipv4/</a></p>
<p>その関係でIPv6のみ接続が拒否されているためサーバー側でホストが失敗してECONNREFUSEDエラーになっています。<br>
クライアント側だけ成功した原因はわかっていないのですが、クライアント側でIPv6で繋がらない場合はIPv4で接続する設定が効いているのでしょうか？わかる人いれば教えて欲しいです。</p>
<p>こちらのエラーもnodeのオプションで<a href="https://nodejs.org/api/cli.html#--dns-result-orderorder" target="_blank" rel="nofollow noopener noreferrer">dns-result-orderorder</a>を<strong>ipv4first</strong>に指定し、IPv4を優先させれば良いです。</p>
<p>本来であればIPv6で繋がらなければIPv4に接続する設定ができれば良いと思うのですが、ここでは暫定的にIPv4を優先する設定を行いました。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token builtin class-name">export</span> <span class="token assign-left variable">NODE_OPTIONS</span><span class="token operator">=</span>--dns-result-order<span class="token operator">=</span>ipv4first
</code></pre></div><p>こちらもscriptに記載しました。</p>
<div class="code-block-container"><pre class="language-json"><code class="language-json">  <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"dev"</span><span class="token operator">:</span> <span class="token string">"node --openssl-legacy-provider --dns-result-order=ipv4first node_modules/.bin/next dev"</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h2 id="%E6%9C%80%E7%B5%82%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#%E6%9C%80%E7%B5%82%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 最終確認</h2>
<p>最後にもう一度ビルドして動作確認をします。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ <span class="token function">yarn</span> dev
</code></pre></div><p>パッケージの依存関係が出たら依存関係を調べて修復する必要がありますが、node自体のアップデートはできたので一旦完了です。</p>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<p>nodeのアップデート自体はそこまで大きな問題なくできるんですが、問題はパッケージの依存関係ですね。<br>
あとやっぱりvoltaでnodeのバージョン管理する運用がされてると便利ですね。</p>
<h1 id="%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B" aria-hidden="true"></a> 参考記事</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ccbd8ac92d01" src="https://embed.zenn.studio/card#zenn-embedded__ccbd8ac92d01" data-content="https%3A%2F%2Fzenn.dev%2F844%2Farticles%2F0e1bdf3bb75ca3" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/844/articles/0e1bdf3bb75ca3" style="display:none" target="_blank">https://zenn.dev/844/articles/0e1bdf3bb75ca3</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__48f5a2fce9d5b" src="https://embed.zenn.studio/card#zenn-embedded__48f5a2fce9d5b" data-content="https%3A%2F%2Fnullnull.dev%2Fblog%2Fhow-to-use-volta-in-mac%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nullnull.dev/blog/how-to-use-volta-in-mac/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nullnull.dev/blog/how-to-use-volta-in-mac/</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fe1434f4b8bde" src="https://embed.zenn.studio/card#zenn-embedded__fe1434f4b8bde" data-content="https%3A%2F%2Fzenn.dev%2Fyogarasu%2Farticles%2F425732ff408d06" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/yogarasu/articles/425732ff408d06" style="display:none" target="_blank">https://zenn.dev/yogarasu/articles/425732ff408d06</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__aaabae3894c6f" src="https://embed.zenn.studio/card#zenn-embedded__aaabae3894c6f" data-content="https%3A%2F%2Fqiita.com%2Fraiga0310%2Fitems%2Fba198156cfb5a5f8462b" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/raiga0310/items/ba198156cfb5a5f8462b" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/raiga0310/items/ba198156cfb5a5f8462b</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__042916a12d4c3" src="https://embed.zenn.studio/card#zenn-embedded__042916a12d4c3" data-content="https%3A%2F%2Fwww.reddit.com%2Fr%2Fipv6%2Fcomments%2Fqbr8jc%2Fnodejs_finally_prefers_ipv6_addresses_over_ipv4%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.reddit.com/r/ipv6/comments/qbr8jc/nodejs_finally_prefers_ipv6_addresses_over_ipv4/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.reddit.com/r/ipv6/comments/qbr8jc/nodejs_finally_prefers_ipv6_addresses_over_ipv4/</a></p>


nodeを16から18にアップデートした話

voltaのnodeのバージョンを上げる

Discussion