Next.jsをwindowsにインストールする覚書

記事内に広告が含まれています。
スポンサーリンク

Linux 用 Windows サブシステム (WSL) をインストールガイド

WSL のインストール
コマンド wsl --install を使用して Linux 用 Windows サブシステムをインストールします。 Windows コンピューター上で、好みの Linux ディストリビューションによって実行される Bash ターミナルを使...

Windows Insider 用の簡略化されたインストールをする。

書いてあるとおりにするだけで簡単だ。

1、Windows Insider Program に参加する

リンクが張ってあるので簡単で出来た

2、Windows 10 のプレビュー ビルド (OS ビルド 20262 以降) をインストールする。

確認してないけど、まあいいや
止まった時に調べてみよう

3、管理者特権でコマンド ライン ウィンドウを開く
4、管理者モードで開いたコマンド ラインに次のコマンドを入力します: wsl.exe –install
ここまで簡単。コピペだし。

・・・ん!?

wsl.exe –installして再起動後のコマンドプロンプトでエラー発生

ここでエラー発生。
「WslRegisterDistribution failed with error: 0xc03a001a」
だそうだ。

検索すると以下の記事が見つかる

WSL2 のインストール時に WslRegisterDistribution failed with error: 0xc03a001a で失敗するときの対処法 - Qiita
WSL2のインストールに失敗公式 Windows 10 用 Windows Subsystem for Linux のインストール ガイドこちらの手順に従ってWSL2を用いてUbuntu20.0…

記事の通りにC:のユーザーフォルダ内AppDataの該当フォルダの圧縮設定を外す。
途中の選択肢ラジオボタンは、「フォルダ内のサブフォルダやコンテンツすべてに適用」の方にすること。

Install WSL
Install Windows Subsystem for Linux with the command, wsl --install. Use a Bash terminal on your Windows machine run by ...

Microsoftストアを開いてubuntuページの起動ボタンを押したら次に進んだ。

よし、次にすすむぞ。

5、マシンを再起動します

新しい Linux ディストリビューションのユーザー アカウントとパスワードを作成する

6、次に、新しい Linux ディストリビューションのユーザー アカウントとパスワードを作成する
これについてはまたこの説明ページがあった。

WSL 開発環境を設定する
このステップ バイ ステップ ガイドのベスト プラクティスを使用して、WSL 開発環境を設定します。 Ubuntu、Visual Studio Code または Visual Studio、Git、Windows Credential Ma...

この ユーザー名 および パスワード は、インストールする Linux ディストリビューションごとに固有であり、Windows ユーザー名とは関係ありません。

ユーザーが ユーザー名 および パスワード を作成すると、そのアカウントがディストリビューションの既定のユーザーとなり、起動時に自動的にサインインされます。

適当なユーザー名とパスワードを入れておいた。

あれ?パスワード入力しても、画面に何も変化無し。

キーボード壊れた?

同じパスワードを2回入れるんだけども、とりあえずリターンキーを押してみる。

え!パスワードが違うって言われた。

無言でもちゃんとパスワードを聞いてるのね。

windowsとかだったらパスワード入力すると******ってなるのに、無言って・・・。

今何文字目か、本人すら分からないとは。

Next.js web フレームワークをインストールし、Windows 10 で稼働させるためのガイド

Windows に Next.js をインストールする
Linux 用 Windows サブシステムでの Next.js Web フレームワークの使用を開始するのに役立つガイドです。

必須コンポーネント
このガイドでは、読者が Node.js 開発環境を設定する手順を既に完了していることを前提にしています。これには以下が含まれます。
Windows 10 の最新バージョン (バージョン1903 以降、ビルド 18362 以降) をインストールします。
Linux ディストリビューション (Ubuntu など) を含む Linux 用 Windows サブシステム (WSL) をインストールし、WSL 2 モードで実行されていることを確認します。 これは PowerShell を開き、「wsl -l -v」と入力することによって確認できます。
WSL 2 上に Node.js をインストールします。これには、バージョン マネージャー、パッケージ マネージャー、Visual Studio Code、および Remote Development 拡張機能が含まれます。

Next.js のインストール

  • WSL コマンドライン (Ubuntu) を開きます。
  • 新しいプロジェクト フォルダーを作成し (mkdir NextProjects)、そのディレクトリに移動します (cd NextProjects)。
  • Next.js をインストールし、プロジェクトを作成します (‘my-next-app’ をアプリに付ける名前に置き換えます) (npx create-next-app my-next-app)。

ここまで来て
Command 'npx' not found, but can be installed with:
とかエラーが出た。

npxが見つからないエラー発生

npxってのはNode.jsに関係あるそうだ。
よく知らんが。

このガイドでは、読者が Node.js 開発環境を設定する手順を既に完了していることを前提にしています。

と最初に注意書きがあったが、Node.jsってのを入れてないことを白状しなければならない。

すみません、無くてもどうにかなるかなと思ってました。

なんだ、ここで最初へ戻るのか・・・重い空気が漂った

・・・

・・・ 休憩するか ・・・

・・・ 寝よう


Node.js を Linux 用 Windows サブシステム (WSL2) にインストールする

9月15日
気を取り直してMicrosoftのサイトの解説を読んでみる。
https://docs.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-overview

Node.js は Windows 上で動作しますか。
はい。 Windows 10 では、Node.js でアプリを開発するための 2 つの異なる環境がサポートされています。

・Node.js 開発環境を Windows にインストールする
・Node.js 開発環境を Linux 用 Windows サブシステムにインストールする

今回はNode.js 開発環境を Linux 用 Windows サブシステムにインストールするのリンクを開く。

WSL 2 上で Node.jis を設定する
Linux 用 Windows サブシステム (WSL) 上で Node.js 開発環境を設定するのに役立つガイド。

手順が書いてあった。

Windows ターミナルをインストールする (省略可能)

のターミナルをインストールしてみた。
なるほど、ワンクリックでubuntu開けるね。
便利だった。

コピペ出来ないのかな?と思ったら、

クリップボードにコピーされてる状態で、画面で右クリックするといきなりペーストされる。

何のメニューも挟まずにいきなりビビった。

ペーストは分かったけど、コピーは?

これもいきなりで、
行選択して右クリックしたら、クリップボードにコピーされてた。
何の表示も無いんですね。

nvm、node.js、および npm をインストールする

sudo apt-get install curl
をコピーして、ターミナルで右クリックペースト。
パスワード要求されたのでカーソル真っ暗だけど入力してみた。

curl is already the newest version (7.68.0-1ubuntu2.6).

あれ?もうインストールされてるようだ。
まあいいか。

次は
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
をコピーして、ターミナルで右クリ(省略

ダウンロードが始まって、いろいろ文字が出て、全部で22行、なんか書いてる。

注意

発行時に、NVM v 0.38.0 が使用可能な最新バージョンでした。 GitHub プロジェクト ページで NVM の最新リリースを確認し、最新バージョンを含むように上記のコマンドを調整することができます。 cURL を使用してより新しいバージョンの NVM をインストールすると、古いものが置き換えられ、NVM を使用してインストールした Node のバージョンはそのまま残ります。 たとえば次のようになります。curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

先に言ってよ。
https://github.com/nvm-sh/nvm
を開いたら

v0.38.0でよかったみたい。

よし、次に進むぞ。

インストールを確認するには、command -v nvm を入力します。これによって “nvm” が返されるはずです。”コマンドが見つかりません” というメッセージが返される場合または何も応答がない場合は、現在のターミナルを閉じてから再度開き、もう一度やり直してください。

なるほど、やってみる。

あれ?何も出ない。

現在のターミナルを閉じてから再度開き、もう一度

出た!

現在インストールされている Node のバージョンを一覧表示します (この時点では何もないはずです): nvm ls

$ nvm ls
            N/A
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

Node.jsをインストール

Node.js の現在のリリースをインストールします (最新の機能強化をテストするためですが、問題が発生する可能性が高くなります): nvm install node

Node.js の最新の安定した LTS リリースをインストールします (推奨):nvm install --lts

トラブルがないように安定版をインストールすることにします。

インストールされている Node のバージョンを一覧表示します: nvm ls。先ほどインストールした 2 つのバージョンが表示されるはずです。

$ nvm ls
->     v14.17.6
default -> lts/* (-> v14.17.6)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v14.17.6) (default)
stable -> 14.17 (-> v14.17.6) (default)
lts/* -> lts/fermium (-> v14.17.6)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.6 (-> N/A)
lts/fermium -> v14.17.6

これでNode.jsがインストールされたようだ。

これでやっと昨日の続きに戻ることが出来る。

昨日はどこで止まってたんだっけ?
この記事を見返すと、あぁここだ。
・Next.js をインストールし、プロジェクトを作成します (‘my-next-app’ をアプリに付ける名前に置き換えます) (npx create-next-app my-next-app)。

npm WARN @babel/plugin-syntax-jsx@7.14.5 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.

なんかいろいろ注意書が出てうまくいかないみたいだけど、ターミナルを再起動してみたらうまくいった。

cd ~ を使用してホーム ディレクトリを選択します。次に、explorer.exe . コマンドを入力します。

ってやってみたら、エクスプローラーが開いて、HDDじゃなくてネットワークの中にあるようになってる。
実体はどこか?
たぶん
C:\Users\ユーザー名\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_ランダム文字列\LocalState\ext4.vhdx
なんだろう

Visual Studio Code をインストールする

Node.js プロジェクトには、Visual Studio Code と Remote Development 拡張機能パックを併用することをお勧めします。

VScodeはインストール済みだけど、拡張パックのインストールリンクを開くとVScodeが必要ですと警告が出た。
continueで進んでいくとcodeが開いて無事にインストールできたようだ。

終了


Next.jsざっとした流れが分かるサイト

Next.js超入門 – セットアップからVercelへの公開まで | ともすたmedia | ともすた

上から下まで流し読みしていくと、自分でもなんとなく出来るような気になる秀逸な記事
すばらしい。

コメント

タイトルとURLをコピーしました