vue の開発環境を docker で得る

せっかくdocker 環境を手に入れたので、実務でも使えるポータブル可能＆使い捨て開発環境を作ろうかと。 今わたしが学習したい言語 No.1 の vue の開発環境を得ます。(といってもとっても簡単。)

準備するもの

• 開発環境用ディレクトリ
• vscode
• docker
• remote workspace (vscode の拡張機能)
• 知的好奇心

環境構築手順

1. vscode で開発環境用ディレクトリを開き、ctrl+shift+p などでコマンドパレットを起動し、"add container"などと打ち込み、"Remote-Containers: Add Development Container Configuration Files..."を選択。

2. 利用したい開発環境を選択する。明示的なvue 開発環境は見られないので、今回は、"Node.js 12 + Typescript "を選択。

3. devcontainer.json が開発環境用フォルダ直下に作成されるので、開いて以下の設定を追記する。

 ForwardPorts: [8080], //vue で作成したwebアプリケーション をhost PC側のブラウザから動作確認するときに必要。
    "extensions": [
        "dbaeumer.vscode-eslint",
        "ms-vscode.vscode-typescript-tslint-plugin",
        "octref.vetur"
    ]

1. Dockerfile に以下のようにvue をインストールするコマンドを追記する。

RUN npm install -g tslint typescript \
&& npm install -g @vue/cli \
&& npm install -g @vue/cli-init

1. 「このフォルダには dev container の設定ファイルがあるぜ！このフォルダをコンテナで開くか？」と聞かれるので、「Reopen in Container 」と答える

→コンテナが開き、コンテナ内のterminal が表示される！

　※vscode の remote Explore を開くとコンテナの設定が表示されます。ちなみに、今回設定した fowarding port などもここで確認できますし、コンテナを建てた後からでもこの画面から追加可能です。

1. 適当に vue application を作って動作確認までする。

#vue create sample
#cd sample
#yarn serve

http://localhost:8080 を開くと、いつものサイトが表示されるはずです。お疲れ様でした！

---

それにしても、 はてなの markdown のenum の中にコードなど仕込むと、採番が初期化されてしまうのは何とかならないのか。。。