devContainerでReact(Next)＋SpringBootの開発環境を作成する FrontEnd編

とりあえず作って学習していこうのスタイルで、`DevContainer`を使って開発環境を作る自分用のメモ書きになります。
多分長くなると思うので、`FrontEnd`と`BackEnd`の2部構成を考えています。

※初めて、環境構築について記事を書くのでおかしい場所もあるかと思いますが、指摘や提案は大歓迎です。

:::note info
- BackEnd側の話は[こちら](https://qiita.com/ede/items/3bd85313c9d354d57415)から
:::

## 構成
　事前条件として、`Ubuntu`/`Docker`/`VSCode`がインストール済みで、拡張機能で`Dev Containers`が導入済みであること。
- Node
- TypeScript
- Next.js
- React.js

# 手順

## リポジトリ作成
- 1.とりあえず、github上にリポジトリを作成します。
　[公式](https://docs.github.com/ja/get-started/quickstart/create-a-repo)の作り方が載っているので、参考にお願いします。
- 2.wsl側にクローンします。
`SSH`キーを使用してwsl上にクローンを行います。
```
git clone -T [SSHキーのパス] git@github.com:[URLの続き]
```
:::note warn
　`SSH`キーを作成したことがない場合は、`ssh-keygen`して鍵をGitHub上に設定してください。
:::

## DevContainerを立ち上げ
- 1.VScodeを起動する。
適当なフォルダーを作成して、そのフォルダー配下でVSCodeを起動させます。
```
~$ mkdir sample-project-frontend
~$ cd sample-project-frontend

sample-project-frontend$ code .
```
- 2.VSCodeのコントロールパネル(`ctrl + shift + P`)から、`「Dev containers:Add Dev Containers Configuration Files...」`を選択します。
- 3.`「Node.js & TypeScript」`を選択します。
- 4.Nodeのバージョンを選択、ちなみにこの記事を作成した時点では20がdefalutでしたので20を選択します。
- 5.CLI等を入れるかと尋ねられるので、何も選択せずに作成をする。以下の感じになればOKです。

```
root
  └─ .devcontainer
      └─ devcontainer.json
```

## devContainerを`Dockerfile`でビルドするように変更
将来的なカスタマイズ性を考えて、ビルドに必要なものをなるべく1ファイルに集約したい。
イメージを直接呼び出すのではなく、Dockerfileを使用するように変更を加えています。
- 1.`devcontainer.json`をカスタマイズする
```.devcontainer/devcontainer.json
{
	"name": "node-frontend",
	"dockerComposeFile": "compose.yml",
	"service": "node-frontend",
	"workspaceFolder": "/work/frontend",
	"shutdownAction": "stopCompose",
	"customizations": {
		"vscode":{
			"settings":{
				"editor.formatOnSave": true
			},
			"extensions": [
				"mhutchie.git-graph",
				"mikestead.dotenv"
			]
		}
	},
	"remoteUser": "node"
}
```
- 2.`compose.yml`を.devContainer作成する。
```.devcontainer/compose.yml
services:
  node-frontend:
    container_name: node-frontend
    build: ./docker/node/
    volumes:
      - ..:/work/frontend:cached
      - ~/.ssh:/root/.ssh
    
    # 実行終了時にコンテナが自動で閉じられるため、コンテナを立ち上げっぱなしにする。
    command: sleep infinity
```
- 3.Dockerdfileを作成する。
```.devcontainer/docker/node/Dockerfile
FROM mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye

RUN apt-get update && apt-get -y install git
```
- 4.ファイル構成は以下の通りです。
```
root
  └─ .devcontainer
      ├─ docker
      │   └─ node
      │       └─ Dockerfile
      ├─ compose.yml
      └─ devcontainer.json
```

## devcontainerを起動してnext.jsをインストール
- 1.コンテナを起動
　同じ要領でコントロールパネルから`Dev Containers: Rebuild and Reoprn in container`を選択する。
- 2.`next.js`をインストール
`VSCode`上で`ctrl ＋ shift ＋ @`でターミナルを開いて、下記のように入力を行う。
```
$ npm install -g npm@latest

added 1 package in 2s

26 packages are looking for funding
  run `npm fund` for details
$ npx create-next-app@latest

//いろいろ聞かれるけどとりあえずEnter押して行けば大丈夫
Need to install the following packages:
create-next-app@14.0.1
Ok to proceed? (y) 
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /work/frontend/my-app.

~~~~~~~~~~~~~~ 中略 ~~~~~~~~~~~~~~~
Success! Created my-app at /work/frontend/my-app
```
- 3.`mv`コマンドで`my-app`配下を一つ上の階層に移動して、`my-app`は削除します。
```Console
mv my-app/* ./
```
- 4.起動して確認
　以下のコマンドを使用した後に、`localhost:3000`をwebで開きます。
```
npm run dev
```
　ちなみに開いた後の画面はこんな感じになっていればOKです。
![nextデフォルト画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3615210/a9c6c7c2-01a8-9883-0bb5-dd1e40ae60b6.png)