DevContainerのススメ！！！

## はじめに

環境構築ってめんどくさくないですか？
しかもローカル環境を汚したくはないですよね、、、

ただ、少し触りたいだけなのにDockerfile書くのもめんどくさい。。。

そんなときに便利なVScodeの機能があります。
それは`DevContainer`です！！

この記事ではDevContainerを使用して`Rust`と`Next.js`の環境構築を実演していきます。

## 準備するもの

- VScode
- Docker環境

## 環境

```bash
$ sw_vers
ProductName:		macOS
ProductVersion:		13.6.1
BuildVersion:		22G313

$ colima --version   
colima version 0.6.6

$ docker --version
Docker version 24.0.7, build afdd53b4e3
```

## 準備

### DevContainerの拡張機能を入れる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/c105b7f9-bbdf-b0ce-f792-67ea02a7954f.png)

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers&ssr=false#review-details

## Rust環境を作ってみる

注：初回のイメージのプル時間によっては時間かかるかも。。。

### 1. ソースコードをおくディレクトリを作成しVScodeを立ち上げる

```bash
$ mkdir ~/rust_sample && code $_
```

### 2. devcontainerの設定ファイルを生成する

Cmd+Shift+Pでコマンドパレットを出し、「Dev Container: Add Dev Container ...」を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/4947b1ea-fbbb-7dd8-ae42-cb5fd33963cf.png)

「rust」と入力し、以下のように選択していく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/57433793-61fb-537c-07eb-e1fe5fec466d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/e644a398-5033-701e-1977-37200ba0e8c3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/594ef33e-9a81-8391-1a96-72137ba911c6.png)

最後は「OK」を選択してください。

すると以下のように`.devcontainer/devcontainer.json`が作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/2b91c10c-c2bf-b20a-441e-14e7664ca0a2.png)

### 3. DevContainerを立ち上げる

右下に表示されている「Reopen in Container」を押してください。

または、左下の緑をクリックして、「Reopen in Container」を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/d989ddd0-e3ec-911f-aac3-faab03be1858.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/21929eae-80ec-b285-2108-fcb8752e3702.png)

最初はコンテナイメージのプルなどが走ると思います。
イメージのダウンロードが終わり準備が完了すると、DevContainer内でワークスペースを開き直してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/1d05e3e0-7c0f-baf2-0638-16e05205d465.png)

### 4. あとは…

```
$ cargo init
$ cargo run
```

とするだけで、RustでHelloWorld！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/1b3e313d-00ff-3b5f-cdfd-ca271b87bc21.png)

## Next.js環境を作ってみる

注：初回のイメージのプル時間によっては時間かかるかも。。。

### 1. ソースコードをおくディレクトリを作成しVScodeを立ち上げる

```bash
$ mkdir ~/nextjs && code $_
```

### 2. devcontainerの設定ファイルを生成する

コマンドパレットで、Rustの時と同じように「Dev Container: Add Dev Container ...」を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/780be53d-fb27-fad5-ec6d-b13921f61809.png)

「node」と入力し、以下のように選択していく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/07035a9b-b648-a690-aa4e-9588b0b7774b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/0bd652a9-2454-6715-cc39-b017c413a9d0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/9a30d882-4b4e-dc77-6b6d-cc7fe7f5bb9b.png)

最後は「OK」を選択してください。

すると以下のように`.devcontainer/devcontainer.json`が作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/f0770d45-47e9-c815-61ed-5218c53ba0cd.png)

### 3. DevContainerを立ち上げる

右下に表示されている「Reopen in Container」を押してください。

または、左下の緑をクリックして、「Reopen in Container」を選択してください。

### 4. あとは…

```bash
# .devcontainerの設定等を避難させておく
$ sudo mv .devcontainer/ ../
```
```bash
# Next.jsのサンプルアプリを持ってくる（権限で怒られたためsudo使用）
$ sudo npx create-next-app -e with-next-ui .
```
```bash
# .devcontainerの設定等を戻す
$ sudo mv ../.devcontainer .
```
```bash
# Next.jsのサーバーを立ち上げる
$ npm run dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/b9db8f9a-0734-372a-2c17-49797dc988af.png)

ローカルのブラウザで`http://localhost:3000/`を開くと…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640416/4aadbec9-ea47-a361-5fd5-d648570675ba.png)

無事にNext.jsのサンプルを見ることができました！！

## 最後に

今回はrustとnodejsのベースを使いましたが、他にも色々な環境が用意されています。
お好きな環境でぜひ試してみてください！