【Docker】VSCodeでDockerコンテナ内のコードを直接編集する【VSCode】

## はじめに
本記事は、プログラミング初学者が学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。  
そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。  
間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。  

## VSCodeでDockerコンテナ内のコードを直接編集する
VSCodeの拡張機能である`Remote - Containers`を使用することでコンテナ内のコードを直接編集することができます。
`Remote - Containers`の設定手順を以下に記載します。

### `Remote - Containers`をインストールする
まず、VSCodeに`Remote - Containers`をインストールします。
下の画像にも記載のあるとおり、`Remote - Containers`はプレビュー版です。
![スクリーンショット 2022-04-24 3.11.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/efc59ffb-c51d-318a-2564-ed6183969e38.png)

### Dockerに関する準備をする
コンテナを立ち上げるのに必要なファイルを用意します。
今回は以下のような設定でNext.jsのプロジェクトを作成します。

```Dockerfile:Dockerfile
FROM node:16.14.2

ENV USER_NAME=myuser
ENV TZ=Asia/Tokyo

WORKDIR /myapp

RUN adduser ${USER_NAME} && \
  chown -R ${USER_NAME} /myapp
USER ${USER_NAME}

EXPOSE 3000
CMD ["yarn", "dev"]
```
```docker-compose.yml
version: '3.9'
services:
  front:
    build: .
    volumes:
      - .:/myapp
    environment:
      NODE_ENV: development
    ports:
      - 3000:3000
```
```:ターミナル
＄ docker compose run --rm front yarn create next-app --ts next && \
  cd $_ && \
  mv * .* .. && \
  rmdir ${PWD} && \
  cd ../
```

### `devcontainer.json`を作成する
次にプロジェクトのルートディレクトリに`.devcontainer`というフォルダを作成し、その中に`devcontainer.json`を作成します。
![スクリーンショット 2022-04-24 4.11.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/cdc05ff8-7ecc-57ef-9a79-dcfb11b32640.png)

`devcontainer.json`に以下のように記述します。
```devcontainer.json
{
  // コンテナ名
  "name": "next-front-1",

  // docker-compose.ymlのファイルパス
  "dockerComposeFile": [
      "../docker-compose.yml"
  ],

  // 起動するサービス名
  "service": "front",

  // コンテナ内でのユーザー
  "remoteUser": "myuser",

  // VSCodeで開くコンテナ内のパス
  "workspaceFolder": "/myapp",

  // コンテナ内で使用する拡張機能のID
  "extensions": [
      "PulkitGangwar.nextjs-snippets"
  ]
}
```
拡張機能のIDは拡張機能をインストールする画面の歯車マークからコピーできます。
![スクリーンショット 2022-04-24 3.26.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/949d2816-cde1-5945-42b4-475c11064636.png)

### コンテナの起動とファイル表示
上記の設定が完了したら、コンテナの起動とファイルの表示を行います。
VSCodeのウィンドウ左下の緑色の箇所をクリックします。
![スクリーンショット 2022-04-24 3.27.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/ea8ecfbc-df89-c4bf-d09f-37cae518f39d.png)

以下のように表示されるので`Reopen in Container`をクリックします。
![スクリーンショット 2022-04-24 3.58.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/8a109afa-cd33-61ce-ae77-211d24fd63b2.png)

するとコンテナが起動され、コンテナ内のファイルが表示されます。

![スクリーンショット 2022-04-24 3.29.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/978a0394-5e5e-93c0-ef3a-f5d8df069b87.png)

ターミナルもコンテナ内のものが表示されています。

### 動作確認
編集をしてみます。
編集前のコードと画面は以下のとおりです。

```index.js

    <省略>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js</a>
        </h1>

    <省略>

```
![スクリーンショット 2022-04-24 3.31.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/a259968c-6720-46ed-a2cc-b17382bcf281.png)

`Welcome to Next.js!`を`Welcome to Sample App !!`に変更します。

```index.js

    <省略>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Sample App !!</a>
        </h1>

    <省略>

```
![スクリーンショット 2022-04-24 3.32.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/34f88f42-25f4-2923-f07e-215b8b155348.png)

変更されました。

`devcontainer.json`で設定した拡張機能が使用できるか確認します。
![スクリーンショット 2022-04-24 3.38.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/3cad28a0-b7aa-1015-be3b-55f01add84d1.png)
Next.jsのスニペットが機能しました。