初めに
インストールするもの
1.WSL2(Ubuntu)
2.Node.js
3.VScode
4.Git
5.Next.js
目次
1.WSLのインストール
2.Node.jsをWSL上にインストール
3.VScodeをインストール
4.gitのインストール
5.Next.jsを使ってみる
6.GitHubにアップロードしてみる
WSLをインストールする
初めに参考にしたものを記載します。
powershell もしくはコマンドプロンプトを右クリックから、管理者権限で実行します。
次のコマンドを実行します。
wsl --install
するとLinuxディストリビューション(規定ではUbuntu)がバージョンWSL2でインストールされます。
詳細は次で確認してください。
ここでPCの再起動が必要になります。再起動してください。
次にwindowsのホームボタンよりUbuntuを検索し、開いてください。
ここではUbuntuのユーザー名とパスワードの作成を求められます。
【注意】パスワード設定の際に画面には何も表示されません
Node.jsのインストール
ここではNode.jsを一からWSL上にインストールします。そのためほかにもいくつかインストールする必要があります。
ただ、こちらは、コマンドでインストールできるので簡単です。
下記を参考にしてください。
１．ご利用の Ubuntu コマンド ライン (または任意のディストリビューション) を開きます。
２．sudo apt-get install curl を使用して cURL をインストールします (コマンドラインでインターネットからコンテンツをダウンロードするために使用するツール)。
３．curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash を使用して nvm をインストールします。
これは、ubuntu上ではなくコマンドプロンプト上で行う必要がある場合があります。
４．インストールを確認するには、command -v nvm を入力します。これによって "nvm" が返されるはずです。"コマンドが見つかりません" というメッセージが返される場合または何も応答がない場合は、現在のターミナルを閉じてから再度開き、もう一度やり直してください。
５．現在インストールされている Node のバージョンを一覧表示します (この時点では何もないはずです): nvm lsを入力してください
６．現在のバージョンと安定バージョンの両方の Node.js をインストールします。 この後の手順で、Node.js のアクティブなバージョン間を nvm コマンドを使用して切り替える方法について説明します。
安定バージョン(LTS)
・Node.js の現在の安定した LTS リリースをインストールします (実稼働アプリケーション用に推奨):
nvm install --lts
最新バージョン
・Node.js の現在のリリースをインストールします (最新の Node.js 機能と改善をテストするためですが、問題が発生する可能性が高くなります):
nvm install node
通常はLTSで使用するのがおすすめです。
７．インストールされている Node のバージョンを一覧表示します: nvm ls。先ほどインストールした 2 つのバージョンが表示されるはずです。
８．Node.js がインストールされており、現在の既定のバージョンであることを確認します: node --version を使用 次に、 npm --version を使用して、npm があることも確認します。
９．プロジェクトに使用する Node.js のバージョンを変更するには、mkdir NodeTestで新しいプロジェクトディレクトリを作成し、ディレクトリ cd NodeTest を入力します。次に nvm use node を入力して現在のバージョンに切り替えるか、または nvm use --lts を入力して LTS のバージョンに切り替えます。
また、nvm use v8.2.1 のように、インストールした追加のバージョンに固有の番号を使用することもできます。
VScodeのインストール
こちらはWSLではなく通常に、Windows上にインストールします。
すでにインストールしている場合は、そのまま使用できると思います。
下記にアクセスし、ダウンロードしてください
VSCodeUserSetup-x64-1.78.2.exeがダウンロードされると思います。(1.78.2はバージョンですので違う数字になっているはずです)
これをダブルクリックで実行し、インストールしてください。
VScodeがインストール出来たら、拡張機能でWSLをインストールしてください。これはVScodeアプリ内から直接インストールできます。
インストールしたら、アプリを再起動してください。そうしないと反映されません。
GitをインストールしVScodeで使用する
まずWindowsにGitをインストールします。
上記のページからダウンロードし、Git-2.43.0-64-bit.exeをひらいたら、このページを参考にして、初期設定を選択し、インストールをしてください。
Git-2.43.0-64-bit.exeの2.43.0はバージョンですので異なる場合があります。
ここではとりあえずインストールのみしておいてください。
GitHubへのアップロードなどは最後に紹介します。
Next.jsのインストール
Next.jsはプロジェクトの作成ごとに、毎回インストールを行います。下記を参考に行ってみてください。
Next.js をインストールするには (これには、next、react、react-dom のインストールが含まれます):
１．WSL コマンドライン (Ubuntu) を開きます。
２．新しいプロジェクト フォルダーを作成し (mkdir NextProjects)、そのディレクトリに移動します (cd NextProjects)。
３．Next.js をインストールし、プロジェクトを作成します ('my-next-app' をアプリに付ける名前に置き換えます) (npx create-next-app my-next-app)。
４．パッケージがインストールされたら、新しいアプリ フォルダーにディレクトリを変更してから (cd my-next-app)、code . を使用して VS Code で Next.js プロジェクトを開きます。 これにより、アプリ用に作成された Next.js フレームワークを確認できます。 VS Code によって、アプリが WSL-Remote 環境で開かれたことに注意してください (VS Code ウィンドウの左下にある緑色のタブに示されています)。 これは、Windows OS で編集のために VS Code を使用している間、アプリが引き続き Linux OS 上で実行されていることを示します。
５．Next.js がインストールされたら、次の 3 つのコマンドを覚えておく必要があります。
・npm run dev。開発インスタンスをホット リロード、ファイル監視、タスク再実行で実行します。
・npm run build。プロジェクトをコンパイルします。
・npm start。アプリを実稼働モードで起動します。
VS Code に統合された WSL ターミナルを開きます ([表示] > [ターミナル])。 ターミナル パスがプロジェクト ディレクトリ (~/NextProjects/my-next-app$) を指していることを確認してください。 その後、npm run dev を使用して、新しい Next.js アプリの開発インスタンスを実行してみてください。VScodeの場合実行後、右下に「ブラウザで開く」のポップアップが表示されることがありますので、それをクリックし、開くことを許可して下さい。
６．ローカル開発サーバーが起動します。プロジェクト ページのビルドが完了すると、ターミナルに "正常にコンパイルされました - 準備完了 http://localhost:3000 が表示されます。 この localhost リンクを選択して、Web ブラウザーで新しい Next.js アプリを開きます。
GitHubにアップロードしよう
GitHubのアカウント作成
ブラウザ(chromeなど)でGitHubと検索し、アカウントを作成してください。
作成したプロジェクトで初めてアップロードするときのコマンドはこちらです。()がついている部分は自身のものに書き換えてください。その際()はつけないでください。masterの部分はGitのバージョンによってmainにする必要があるかもしれません。リポジトリのURLと.gitの間はスペースを入れないでください。
> git init
> git config user.name （GitHubのアカウントのユーザ名）
> git config user.email （GitHubのアカウントのメールアドレス）
> git remote add origin https://～（リモートリポジトリのURL).git
> git branch -M master
> git add -A
> git commit -m "first commit"
> git push origin master
二回目以降にコミットしたい場合のコマンド
> git add [ファイル名]
> git commit -m "（保存時のコメント）"
> git push origin master
参考