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

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

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

• BackEnd側の話はこちらから

構成

　事前条件として、Ubuntu/Docker/VSCodeがインストール済みで、拡張機能でDev Containersが導入済みであること。

• Node
• TypeScript
• Next.js
• React.js

手順

リポジトリ作成

• 1.とりあえず、github上にリポジトリを作成します。
  　公式の作り方が載っているので、参考にお願いします。
• 2.wsl側にクローンします。
  SSHキーを使用してwsl上にクローンを行います。

git clone -T [SSHキーのパス] [e-mail]:[URLの続き]

　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は削除します。

mv my-app/* ./

• 4.起動して確認
  　以下のコマンドを使用した後に、localhost:3000をwebで開きます。

npm run dev

　ちなみに開いた後の画面はこんな感じになっていればOKです。