Giter Site home page Giter Site logo

nnn-training / faq Goto Github PK

View Code? Open in Web Editor NEW
0.0 0.0 4.0 16.07 MB

N予備校プログラミングコースのFAQ。新しい質問はこちらではなく、フォーラムの Q&A にお願いいたします。

License: MIT License

JavaScript 9.63% TypeScript 82.80% CSS 6.48% Dockerfile 0.99% Shell 0.10%

faq's People

Contributors

azumabashi avatar dorimiamn avatar kaisugi avatar kodwango avatar mikrogeophagus avatar moesuke avatar oosakiken1 avatar s-hayase avatar taigaozawa avatar trpfrog avatar

Watchers

 avatar  avatar  avatar

faq's Issues

Yarn を利用した立ち上げに失敗する。

yarn dev

を実行したところ以下のようなエラーを吐く。

yarn run v1.22.19
$ next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
warn  - Minimum recommended TypeScript version is v4.3.2, older versions can potentially be incompatible with Next.js. Detected: 4.0.8
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133863:18)
    at BulkUpdateDecorator.update (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133764:50)
    at OriginalSource.updateHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack-sources2/index.js:1:21039)
    at NormalModule._initBuildHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65771:17)
    at handleParseResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65837:10)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65929:4
    at processResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65646:11)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65710:5
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133863:18)
    at BulkUpdateDecorator.update (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133764:50)
    at OriginalSource.updateHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack-sources2/index.js:1:21039)
    at NormalModule._initBuildHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65771:17)
    at handleParseResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65837:10)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65929:4
    at processResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65646:11)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65710:5
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133863:18)
    at BulkUpdateDecorator.update (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133764:50)
    at OriginalSource.updateHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack-sources2/index.js:1:21039)
    at NormalModule._initBuildHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65771:17)
    at handleParseResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65837:10)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65929:4
    at processResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65646:11)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65710:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
shunsuke_midorikawa@smidorikawa faq % yarn install
yarn install v1.22.19
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.24s.
shunsuke_midorikawa@smidorikawa faq % yarn dev
yarn run v1.22.19
$ next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
warn  - Minimum recommended TypeScript version is v4.3.2, older versions can potentially be incompatible with Next.js. Detected: 4.0.8
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133863:18)
    at BulkUpdateDecorator.update (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133764:50)
    at OriginalSource.updateHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack-sources2/index.js:1:21039)
    at NormalModule._initBuildHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65771:17)
    at handleParseResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65837:10)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65929:4
    at processResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65646:11)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65710:5
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133863:18)
    at BulkUpdateDecorator.update (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133764:50)
    at OriginalSource.updateHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack-sources2/index.js:1:21039)
    at NormalModule._initBuildHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65771:17)
    at handleParseResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65837:10)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65929:4
    at processResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65646:11)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65710:5
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133863:18)
    at BulkUpdateDecorator.update (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:133764:50)
    at OriginalSource.updateHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack-sources2/index.js:1:21039)
    at NormalModule._initBuildHash (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65771:17)
    at handleParseResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65837:10)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65929:4
    at processResult (/Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65646:11)
    at /Users/shunsuke_midorikawa/workspace/faq/node_modules/next/dist/compiled/webpack/bundle5.js:65710:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Docker 関係の更新

  • docker-compose.yml => compose.yaml
  • Node.js のバージョンを 18.15.0 に上げる

ページ遷移時に、 tsx ファイル中にある画像が表示されない場合がある

ページ遷移時に、画像用のパスがローカル用になってしまい、表示されない場合がある。
再読み込みするとデプロイ環境用のパスに戻る。

マークダウンで記述したファイル内の画像は正常に表示される。

Next.js の SSG を使ってサイトを生成しているはずだからこのような変化は起きないはず?

Actions 当たりを確認してどのようにデプロイされているか確認したらわかりそう
gh-pages ブランチを参照したが、元のファイルはやはりデプロイ用環境パスが記述されていて、切り替わりそうな部分がない。

単にキャッシュの問題かも
スーパーリロードしても変わらず。一旦保留

警告が出る : Fast Refresh had to perform a full reload

全文

⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

Fast Refresh はページのフルリロードで行なっているという旨の警告
開発時にコードを書き換えても state の保持してくれなくなっているらしいので影響は小さい。

原因は警告文にあるリンク先の通りだと思われ、以下の 3 つらしい。
しかし該当箇所がわからず。

  • The file you're editing might have other exports in addition to a React component.
  • Your React component is an anonymous function.
  • The component name is in camelCase and not PascalCase, for example textField instead of TextField.

警告ですし影響も特にないので余裕があったら対応したいです。

faq のバージョンアップ

Node だったり next だったりのバージョンがぼちぼち古くなりつつあります。
どこかで気合を入れて新しくしたいです。

yarn dev に失敗する

関連 #40

コマンド

yarn dev

結果

yarn run v1.22.19
$ next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Error: `future.webpack5` in `next.config.js` has moved to the top level `webpack5` flag https://nextjs.org/docs/messages/future-webpack5-moved-to-webpack5
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

※ユーザ名が含まれてる行は削除して掲載

環境
node v16.20.0
mac Venture 13.6

プレビューを見たかったのですが以前教えていただいた方法を試みても見れなかったのでやはり根本的に修正する必要がありそう

Markdown を変換すると a タグが消える

バージョンアップで、 h タグの中に含まれていた a タグが、 HTML に変換時に消えるようになってしまった
h タグの中に a タグは含められるはずなので、 remark の仕様が変わった感じがします。
調査中

multipass networks コマンドが文字化けする対処法

multipass networks コマンドにて、ネットワークアダプター名が文字化けする場合がある。

ネットワークアダブター名が日本語の場合、文字化けするようなので、英語に変更する手順を追記したい。

Docker コンテナのビルドに失敗する

次のようなエラーメッセージが出て Docker コンテナのビルドに失敗する。

 > [2/7] RUN apt-get update:
#0 0.830 Ign:1 http://security.debian.org/debian-security stretch/updates InRelease
#0 0.845 Ign:2 http://deb.debian.org/debian stretch InRelease
#0 0.845 Ign:3 http://security.debian.org/debian-security stretch/updates Release
#0 0.856 Ign:4 http://deb.debian.org/debian stretch-updates InRelease
#0 0.869 Ign:5 http://deb.debian.org/debian stretch Release
#0 0.881 Ign:6 http://deb.debian.org/debian stretch-updates Release
#0 1.181 Ign:7 http://deb.debian.org/debian stretch/main all Packages
#0 1.381 Ign:8 http://security.debian.org/debian-security stretch/updates/main all Packages
#0 1.554 Ign:9 http://deb.debian.org/debian stretch/main amd64 Packages
#0 1.650 Ign:10 http://security.debian.org/debian-security stretch/updates/main amd64 Packages
#0 1.882 Ign:11 http://deb.debian.org/debian stretch-updates/main all Packages
#0 1.918 Ign:8 http://security.debian.org/debian-security stretch/updates/main all Packages
#0 2.182 Ign:12 http://deb.debian.org/debian stretch-updates/main amd64 Packages
#0 2.251 Ign:10 http://security.debian.org/debian-security stretch/updates/main amd64 Packages
#0 2.585 Ign:7 http://deb.debian.org/debian stretch/main all Packages
#0 2.682 Ign:8 http://security.debian.org/debian-security stretch/updates/main all Packages
#0 3.048 Ign:9 http://deb.debian.org/debian stretch/main amd64 Packages
#0 3.332 Ign:10 http://security.debian.org/debian-security stretch/updates/main amd64 Packages
#0 3.365 Ign:11 http://deb.debian.org/debian stretch-updates/main all Packages
#0 3.603 Ign:8 http://security.debian.org/debian-security stretch/updates/main all Packages
#0 3.713 Ign:12 http://deb.debian.org/debian stretch-updates/main amd64 Packages
#0 3.882 Ign:10 http://security.debian.org/debian-security stretch/updates/main amd64 Packages
#0 4.037 Ign:7 http://deb.debian.org/debian stretch/main all Packages
#0 4.384 Ign:9 http://deb.debian.org/debian stretch/main amd64 Packages
#0 4.391 Ign:8 http://security.debian.org/debian-security stretch/updates/main all Packages
#0 4.718 Ign:11 http://deb.debian.org/debian stretch-updates/main all Packages
#0 4.794 Ign:10 http://security.debian.org/debian-security stretch/updates/main amd64 Packages
#0 5.176 Ign:12 http://deb.debian.org/debian stretch-updates/main amd64 Packages
#0 5.295 Ign:8 http://security.debian.org/debian-security stretch/updates/main all Packages
#0 5.423 Ign:7 http://deb.debian.org/debian stretch/main all Packages
#0 5.577 Err:10 http://security.debian.org/debian-security stretch/updates/main amd64 Packages
#0 5.577   404  Not Found
#0 5.781 Ign:9 http://deb.debian.org/debian stretch/main amd64 Packages
#0 6.099 Ign:11 http://deb.debian.org/debian stretch-updates/main all Packages
#0 6.380 Ign:12 http://deb.debian.org/debian stretch-updates/main amd64 Packages
#0 6.743 Ign:7 http://deb.debian.org/debian stretch/main all Packages
#0 7.017 Ign:9 http://deb.debian.org/debian stretch/main amd64 Packages
#0 7.328 Ign:11 http://deb.debian.org/debian stretch-updates/main all Packages
#0 7.578 Ign:12 http://deb.debian.org/debian stretch-updates/main amd64 Packages
#0 7.882 Ign:7 http://deb.debian.org/debian stretch/main all Packages
#0 8.189 Err:9 http://deb.debian.org/debian stretch/main amd64 Packages
#0 8.189   404  Not Found
#0 8.539 Ign:11 http://deb.debian.org/debian stretch-updates/main all Packages
#0 8.931 Err:12 http://deb.debian.org/debian stretch-updates/main amd64 Packages
#0 8.931   404  Not Found
#0 8.938 Reading package lists...
#0 8.956 W: The repository 'http://security.debian.org/debian-security stretch/updates Release' does not have a Release file.
#0 8.956 W: The repository 'http://deb.debian.org/debian stretch Release' does not have a Release file.
#0 8.957 W: The repository 'http://deb.debian.org/debian stretch-updates Release' does not have a Release file.
#0 8.957 E: Failed to fetch http://security.debian.org/debian-security/dists/stretch/updates/main/binary-amd64/Packages  404  Not Found
#0 8.958 E: Failed to fetch http://deb.debian.org/debian/dists/stretch/main/binary-amd64/Packages  404  Not Found
#0 8.959 E: Failed to fetch http://deb.debian.org/debian/dists/stretch-updates/main/binary-amd64/Packages  404  Not Found
#0 8.959 E: Some index files failed to download. They have been ignored, or old ones used instead.
------
failed to solve: executor failed running [/bin/sh -c apt-get update]: exit code: 100

おそらく node:14.15.4 のの使用している debian のバージョンが古くインデックスの更新に追従できていない。
cf. https://qiita.com/teriyakisan/items/e5cf7d5228dc02500562

上記 Qiita 記事の通りに Dockerfile を改変すれば動くが、恒久的な解決ではない。Docker コンテナの改修が必要そう。

データベースの互換性によるトラブルの節を分かりやすくしたい

PostgreSQL のデータベースの互換性の問題で、「docker volume コマンドを用いて作成したボリューム」のことを「docker volume」 と呼んでおり、docker-compose.yml 内に書く volume: などと混同する可能性がある。
(実際うまく伝わらなかった例: https://www.nnn.ed.nico/questions/27145)

そこで「docker volume コマンドを用いて作成したボリューム」に変更したい。

また、対処方法が長くなっているため、

docker volume コマンドで作成したボリュームを使っている
はい いいえ
データベースを作り直したい 方法1-2 方法1-1
データベースをアップグレードしたい 方法2-1 方法2-2

のような表をつけてどこを読めば良いのかを分かりやすくしたい。

画像の投稿をわかりやすくしたい

概要

今は /public ディレクトリに直接追加することで画像を表示できるが、わかりにくい。

改善案

  • MARKDOWN/{中間ディレクトリ}/ 内に画像ファイルを保存すると、yarn build 時に /public/imgaes/{中間ディレクトリ}/ に画像をコピーする機能を追加
  • マークダウンには [](./画像名.png) と書けば良いようにする

参考

https://24365.dev/posts/20211015-nextjs-image-dir/

Node 18.15.0 は早すぎた模様

node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/app/node_modules/next/dist/compiled/webpack/bundle5.js:133863:18)
    at BulkUpdateDecorator.digest (/app/node_modules/next/dist/compiled/webpack/bundle5.js:133798:21)
    at getHash (/app/node_modules/next/dist/compiled/webpack/bundle5.js:97994:45)
    at getLongModuleName (/app/node_modules/next/dist/compiled/webpack/bundle5.js:98074:25)
    at /app/node_modules/next/dist/compiled/webpack/bundle5.js:98559:24
    at assignNames (/app/node_modules/next/dist/compiled/webpack/bundle5.js:98273:22)
    at /app/node_modules/next/dist/compiled/webpack/bundle5.js:98552:28
    at Hook.eval [as call] (eval at create (/app/node_modules/next/dist/compiled/webpack/bundle5.js:31920:10), <anonymous>:7:1) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.15.0
error Command failed with exit code 1.

Node.js が新すぎたことによるエラーが出ている。
取り急ぎ Node.js のバージョンを戻します。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.