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

はじめに

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

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

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

Remote - Containersをインストールする

まず、VSCodeにRemote - Containersをインストールします。
下の画像にも記載のあるとおり、Remote - Containersはプレビュー版です。

Dockerに関する準備をする

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

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を作成します。

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は拡張機能をインストールする画面の歯車マークからコピーできます。

コンテナの起動とファイル表示

上記の設定が完了したら、コンテナの起動とファイルの表示を行います。
VSCodeのウィンドウ左下の緑色の箇所をクリックします。

以下のように表示されるのでReopen in Containerをクリックします。

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

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

動作確認

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

index.js

    <省略>

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

    <省略>

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>

    <省略>

変更されました。

devcontainer.jsonで設定した拡張機能が使用できるか確認します。

Next.jsのスニペットが機能しました。