docker 上に Vue.js + TypeScript の開発環境を整えて Visual Studio Code で開く

とりあえず新しいマシンにして docker が快調に動くようになったので少し色々試してみてます。昨日は Python の環境で今日は Vue.js で試してみました。

blog.okazuki.jp

これのいいところは、誰かが環境整えたら他の人は VS Code で開くだけで同じ環境で開発できちゃうところですよね。

環境作り

とりあえず、適当な空のフォルダーを作って、そこにリモート開発の設定を追加します。何かベースにいいのがないかなと探してたら node.js LTS + TypeScript がありました。君に決めた。

生成された Dockerfile に Vue CLI を入れるコマンドを一行追加します。 tslint と typescript を入れている次の行くらいに入れておきました。

# Install tslint and typescript globally
&& npm install -g tslint typescript \
&& npm install -g @vue/cli \

devcontainer.json に npm run serve したときに起動する 8080 ポートを追加します。

"appPort": [8080],

あと、Vetur 拡張機能も Visual Studio Code に入れておかないと話にならないので入れる設定をします。devcontainer.json の extensions を以下のような感じにします。

"extensions": [
    "ms-vscode.vscode-typescript-tslint-plugin",
        "octref.vetur"
]

全体はこんな感じになりました。

// For format details, see https://aka.ms/vscode-remote/devcontainer.json or the definition README at
// https://github.com/microsoft/vscode-dev-containers/tree/master/containers/typescript-node-lts
{
    "name": "Node.js (latest LTS) & TypeScript",
    "dockerFile": "Dockerfile",
    "appPort": [
        8080
    ],
    // Use 'settings' to set *default* container specific settings.json values on container create. 
    // You can edit these settings after create using File > Preferences > Settings > Remote.
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },
    // Uncomment the next line if you want to publish any ports.
    // "appPort": [],
    // Uncomment the next line to run commands after the container is created.
    // "postCreateCommand": "yarn install",
    // Uncomment the next line to use a non-root user. On Linux, this will prevent
    // new files getting created as root, but you may need to update the USER_UID
    // and USER_GID in .devcontainer/Dockerfile to match your user if not 1000.
    // "runArgs": [ "-u", "node" ],
    // Add the IDs of extensions you want installed when the container is created in the array below.
    "extensions": [
        "ms-vscode.vscode-typescript-tslint-plugin",
        "octref.vetur"
    ]
}

出来たら Reopen in container のコマンドをコマンドパレットから実行すると docker build が走ります。

チーム開発とかで使う場合は、何処か適当なリポジトリーに @vue/cli とかまで入れたイメージ作っておいて、それをベースにするほうが各人が全部ビルドしなくていいし各種ツールのバージョンもしっかりそろっていい感じかなぁって思ってます。

ビルドが終わって開かれたので Terminal で vue と打ち込むとちゃんと入ってます！

とりあえずカレントのディレクトリーにプロジェクト作ってみる感じで以下のようにうってみましょう。

$ vue create .

お好みのオプションを選んでさくっとプロジェクトを作ると、ちゃんとできた！！（当然ですけど） Explorer 上でもモリモリファイル出来ていくのが面白い

そして npm run serve うったら http://localhost:8080 に Windows 側からブラウザーで開きます。先ほど devcontainer.json に 8080 ポートの設定を追加しておいたので 8080 ポートは自動的に docker コンテナ内に転送されます。

インテリセンスも効くのでいいですね！！

まとめ

普通に普段から node.js 使ったり vue.js やってるならローカルに入れるのが一番いいですがプロジェクトで全体的に環境整えたいとか、ちょっと興味があってやってみたいんだけどローカルに入れるのはなんかやだなぁっていうのには Visual Studio Code のリモート開発機能で Docker 上に開発環境作って開くのとてもよさそうですね。