VSCode+dockerで開発環境をサクッとつくる基本手順

2750 ワード
Vue.js Docker vuetifyjs VSCode Docker テキストリンク

はじめに

Node.js,Vue.js,Vuetifyの環境を例に手順を記載します。
使用する言語により開発環境にインストールするパッケージや、Dockerのイメージは変更してください。

事前準備

Docker desktopをインストールしておく
VSCodeにRemote-Containers Pluginを入れておく

Windowsのファイルシステムにコンテンツおいて、コンテナで参照すると速度がかなり遅くなるらしいです。WSL2内にファイルを置いた方よいそうです。
このため、WSL2も使えるようにして、います。

手順

  1. ソースを作成するフォルダを作成 work/vuetify01
  2. VSCodeでこのフォルダを開く

  3. Ctrl+Shift P でコマンドパレットを開いて、Add Development Container Cinfiguration Filesを開く

  4. Show All Definitionsを選択

  5. コンテナを選ぶ。今回はNode.js & TypeScriptにしてみます。

  6. バージョンを選択

  7. devcontainer.jsonファイルに"postCreateCommand": "yarn global add @vue/cli && yarn install",を追加
    こんな感じ

  8. コマンドパレットで、Rebuild and Reopen in Containerを実行

    VSCodeが再起動して、Containerが起動し接続した状態になります。
    ターミナルを開くと、コマンドプロンプトがコンテナ内になっていることが分かります。nodeも使える状態になっています。

  9. vueプロジェクトの作成や、追加パッケージのインストール

$ cd ..
$ vue create vuetify01
$ cd vuetify01/
$ yarn serve
$ vue add vuetify

以上