Windows WSL2/Ubuntu上でGitからNext.jsプロジェクトをCloneする流れ
はじめに
今回はグループでの開発であること、開発環境の差を極力少なくするため、Next.jsがNode.jsをベースに動くことからLinux上の方がスムーズに動くことが予想されることWSL2つまりLinuxでの開発を選択した。
環境
Windows11
WSL2
Ubuntu
前提
すでにWindows11にWSL2とUbuntu環境が作られているものとする。
流れ
- ubuntuシステム上のパッケージを最新状態にする
下記コマンドはUbuntuシステム全体に対して行われるのでどのディレクトリで実行してもOK。
sudo apt update
ubuntuシステム上のパッケージを最新状態にする
- Ubuntu上でGitが使えるようにする
下記コマンドはUbuntuシステム全体に対して行われるのでどのディレクトリで実行してもOK。
sudo apt install git curl -y
Ubuntuの公式リポジトリにあるパッケージで、システム全体にインストールされる。これにより、どのディレクトリからでもgitコマンドを使用できるようになる。
- nvmをインストールする
下記コマンドはUbuntuシステム全体に対して行われるのでどのディレクトリで実行してもOK。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
- nvmのコマンドを使えるようにする
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
- Node.jsの最新版をインストール
nvm install node
- GitHubからクローンする
プロジェクトを開発予定のディレクトリに移動する。
git clone https://ユーザ名:トークン@github.com/teamnetjp/your-nextjs-project.git"
ユーザ名
自分のGitHubのユーザ名
トークン
自分のGitHubで発行したトークン
github.com/teamnetjp/your-nextjs-project.gitには、GitHubリポジトリのClone用のURLをコピペする。
- Cloneしたディレクトリに移動する
cd your-nextjs-project
※your-nextjs-projectは該当のディレクトリ名を入れる
開発時は?
- Visual Studio Codeで開く
Windowsディレクトリ内のUbuntu→home→wslで該当ディレクトリを開く。
開くときにVisualStudioCodeで開く。
- 開発サーバーを起動する
依存パッケージのインストール
Ubuntuターミナルで行うこと。VSCodeのターミナルからだとWindowsのフォルダ構成になってしまいエラーが出ます。※もし出ない方法あれば教えてください
npm install
開発サーバーの起動
npm run dev
以下のような表示がでます。
//省略
▲ Next.js 14.2.3
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 1726ms
- ブラウザで表示を確認
を確認しましょう。
src/page.tsx
に表示されているものがlocalhost:3000で表示されたらOK。
Discussion