Zenn
🦉

Reactコンテナ開発環境をサクっと構築【VSCode+RemoteContainers】

2021/02/18に公開
Docker
React
TypeScript
VS Code
初心者
tech

VSCode の拡張機能 RemoteContainers がとても便利なので、その紹介記事です。

RemoteContainers とは

VSCode の拡張機能で、コンテナの作成や起動中コンテナへの接続を簡単に行うことができます。
Docker コマンドを一度も手打ちすることなくコンテナ開発環境が完成します。
この記事では React+TypeScript の開発環境を構築していきます。

事前準備

適当なワークスペースフォルダを用意し、そこにDockerfileとdocker-compose.ymlを作成します。

react-sample/Dockerfile
FROM node:14

# 必要なパッケージがある場合インストール
# RUN apt install ~~~
react-sample/docker-compose.yml
version: '3'
services:
  app:
    build: .
    ports:
      - 3000:3000
    volumes:
      - ./:/app/sampleApp
    working_dir: /app/sampleApp
    container_name: sampleApp


ここまでのディレクトリ構成

react-sample　#今回のワークスペースフォルダ
        ├─ docker-compose.yml
        └─ Dockerfile


ワークスペースフォルダを VSCode で開き、拡張機能からremote containersを検索してインストール

以上で準備完了です。

コンテナ接続

  1. RemoteContainers インストール後、VSCode の画面左下に表示されるアイコンをクリック


  2. プルダウンからRemote-Containers: Reopen in Containerを選択


  3. プルダウンからFrom 'docker-compose.yml'を選択

    （初回起動時はコンテナのビルドが走るので少し待ちます…）

  4. VSCode の画面左下にコンテナ接続情報が表示されていれば OK！


これでコンテナ内で起動している VSCode にローカルマシンから接続している状態になりました。
つまり、これ以降 VSCode のターミナルで実行するコマンドはローカルマシンではなくコンテナ内で実行されることになります。

React アプリ実行

ターミナルから以下コマンドを実行

npx create-react-app hello-world --template typescript
cd hello-world
yarn start

ブラウザからlocalhost:3000にアクセスし、React サンプル画面が表示されたら OK!

VSCode 拡張機能について

RemoteContainers はコンテナで実行されている VSCode にローカルマシンから接続して使用するので、VSCode の拡張機能は基本的に何も入っていない状態になります。
この件へのケアとして、ワークスペースフォルダ/.devcontainer/devcontainer.jsonのextensionsに拡張機能 ID を記述しておくと、コンテナ作成時に自動でインストールしてくれます。
(.devcontainerは RemoteContainers が勝手に作成したフォルダです)

ESLint と Prettier の拡張機能を記述した例

これでコンテナを作り直した場合でも拡張機能を手動で入れなおす必要が無くなります。お気に入りの拡張機能を追記しておきましょう。

以上です。お疲れ様でした 🦉

Discussion