VSCode + Docker でフロントエンドの開発環境構築

ことの発端

これまで VSCode で C++ の開発環境構築を進めていたのですが、フロントエンドの方々も vue の開発環境を Docker で行う方針にしたので、その導入のメモ書きです。
フロントエンドというか Node.js を使う開発環境って感じなので、vue だけじゃなくて electron なんかでも使えると思います。

手順

1. Dockerfile を作成

作業用のディレクトリを作成して、Dockerfileを作成します。¹

Dockerfile

FROM ubuntu:18.04
RUN apt-get update \
 && apt-get install -y nodejs npm build-essential git python3 curl \
 && npm i n -g \
 && n stable \
 && apt-get purge -y nodejs npm

通常コンテナ内でポートリスニングしていてもインバウンドが遮断されているんですが、VSCodeのターミナルで起動すると自動的にポートフォワードしてくれるので特に何も指定する必要がありません。²

2. VSCodeからコンテナ内へリモート接続する

1. 拡張機能 Remote - Containers : ms-vscode-remote.remote-containers をインストールします。

2. インストールすると、左下の緑色のボタンが表示されるので、クリックします。
   

3. コマンドパレットが表示されるのでRemote-Containers: Open Folder in Containers...を選びます。
   

4. フォルダ選択画面が表示されるので、Dockerfileが存在するフォルダを選択します。

5. コマンドパレットが表示されるのでFrom 'Dockerfile'を選択します。
   

この手順で、コンテナビルド→設定→起動→ログインが行われます。

3. 開発用の拡張機能をインストール³

1. 拡張機能 Vetur : octref.vetur をインストールします。
2. 必須じゃないけど Prettier - Code formatter : esbenp.prettier-vscode なんかもオススメです。

これにて、開発環境の構築は終了です。
ガシガシコードを書きましょう。

おまけ

以降は、取り敢えず、vueの知識が無いけど、とりあえず動作確認をやってみたい場合に、やってみると良いかもしれません。

１. ショボいサンプルプロジェクトをクローンする

ショボくて申し訳ない。

git clone https://github.com/codianz/templ.storybook
cd templ.storybook

２. パッケージのインストール

大概のパッケージマネージャでお約束ですのヤツです。

npm i

３. vue開発サーバの起動

vueアプリを開発する際に起動しておくサーバです。

npm start

ブラウザでhttp://localhost:8080/ で起動確認します。

４. パッケージのインストール

storybook で開発を進める際に起動しておくサーバです。

npm run storybook

ブラウザでhttp://localhost:6006/ で起動確認します。

VSCode のポートフォワーディング（2021/03/02追記）

当初、docker-compose.ymlを作成していたんだけど、実行してみたら、コンテナのポートがそのままフォワードされとるやんという事態に　「　？？？　」　だったのですが、VSCodeの親心というヤツでした。

この機能のお陰で、npm start（npm run serve）とかやると、右下にこんなポップアップが表示されます。

そして、左側のペインにフォワーディング状況を確認することができます。

す。。。凄すぎる。。。

1. チーム開発で環境を揃えるなら、ちゃんとバージョン指定した方が良いですが、今回はstable（安定版）を使います。 ↩

2. 当初は docker-compose.yml を作成する手順にしていましたが、開発環境構築というテーマで、且つ、VSCodeを使用する前提なので、この恩恵は受けておこうということで、記事を改訂しました。（2021/03/02） ↩

3. VSCodeはリモート環境毎に拡張機能をインストールするという素晴らしい仕様なので、既にローカルで拡張機能をインストールしていても、再度インストールがされているか確認をしてください。 ↩