Zenn
🌊

VSCode Remote ContainerでVite(Vue.js)+Java+Oracle開発環境構築

2022/02/17に公開
Docker
Java
VS Code
Vite
Oracle
tech

はじめに

今まで、VSCodeをベースに様々な環境構築手順の記事を公開してきましたが、バックエンドやフロントエンドの開発環境、データベースもサクッと構築したいですよね。

そこで、今回はRemote Containersを利用したVite(Vue.js)+Java+Oracleの環境構築手順を紹介してみたいと思います。

VSCodeの拡張機能について

改めて、VSCodeの拡張機能について触れてみたいと思います。普段、何気なくインストールしている拡張機能の保存場所ですが、LOCAL, WSL, Remote(SSH, Cotainer)といくつか分かれており、インストールされているパッケージの場所に応じて、使い分けたほうがいいと思います。

そこで、今回インストールする拡張機能と保存場所について、紹介します。皆さんのプロジェクトに応じて、設定を書き換えてもらえれば幸いです。

拡張機能 Extension ID 言語/DB 保存場所
Remote - Containers ※省略 LOCAL
Remote - SSH ※省略 LOCAL
Remote - WSL ※省略 LOCAL
Docker ※省略 WSL
Spring Boot Extension Pack Pivotal.vscode-boot-dev-pack Java Remote
Lombok Annotations Support GabrielBB.vscode-lombok Java Remote
Extension Pack for Java vscjava.vscode-java-pack Java Remote
Vue Language Features(Volar) johnsoncodehk.volar Vue.js Remote
ESLint dbaeumer.vscode-eslint Any Remote
Prettier esbenp.prettier-vscode Any Remote
codic ※1 pizzacat83.codic Any Remote
zenkaku ※2 mosapride.zenkaku Any Remote
Todo Tree Gruntfuggly.todo-tree Any Remote
Oracle Developer Tools Oracle.oracledevtools Oracle Remote

※1 https://codic.jp/ 変数名を日本語→英語に変換してくるサービス。アカウントを発行し、アクセストークンをVSCodeに設定しないと利用できない。F1で「codic」と入力して、利用できる。
※2 全角スペースを見やすくする。

VSCodeの初期化

WSLを利用していないときは、LOCALに拡張機能を入れたり、途中からWSLに入れていたりと、中途半端な状態だったので、私は一旦VSCodeを初期化しました。あとは、デフォルトでWSL起動にしようと設定したのですが、効かなかったので。

VSCodeの初期化手順は以下の通りです。今までの設定が消えてしまうので、今の設定を残したい方は、そのままでも構いません。

  1. 個人は%HOMEPATH%.vscode、LOCALは%APPDATA%\Code、WSLは~/.vscode-server配下のファイルを削除。
  2. VS Codeを再インストール
  3. WSLをデフォルト起動にするために、F1で「Select Default Profile」を入力し、Ubuntu(WSL)を選択。

VSCode Remote Containers

Remote Containersとは、Dockerコンテナ内で、VS Codeの開発環境を提供してくれる拡張機能です。プロジェクトごとに異なった開発言語やライブラリ、バージョンが存在しますが、別コンテナに接続するだけで、シームレスに切り替えることができます。また、他のメンバーにも全く同じ開発環境を提供できるようになります。

具体的な準備としては、以下のフォルダ構成で、必要なファイルを用意するだけでOKです。WSL版Dockerのインストール手順はこちらを参照。

dev-container/(任意)
├─ .devcontainer/
│ ├─ workspace/
│ │ └─ Dockerfile
│ ├─ devcontainer.json
│ └─ docker-compose.yml
├─ .vscode-server/
└─ workspace/

※ Oracle21xeのDockerイメージ(oracle/database:21.3.0-xe)の作成手順はこちら

# Oracle用データフォルダを事前に作成しないと、エラーになる。
sudo mkdir -p /srv/oracle/oradata
sudo chmod 777 /srv/oracle/oradata
devcontainer.json
{
  "name": "dev",
  "dockerComposeFile": "docker-compose.yml",
  "service": "workspace",
  "workspaceFolder": "/home/docker",
  "extensions": [
    // 共通
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "mosapride.zenkaku",
    "pizzacat83.codic",
    // Java用
    "vscjava.vscode-java-pack",
    "Pivotal.vscode-boot-dev-pack",
    "GabrielBB.vscode-lombok",
    // Vite(Vue.js)用
    "johnsoncodehk.volar",
    // Oracle用
    "oracle.oracledevtools",
  ],
  "settings": {
    // 共通
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "terminal.integrated.defaultProfile.linux": "bash",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "codic.ACCESS_TOKEN": "<アクセストークン>",
    "codic.case": "PascalCase",
    // Java用 
    "[java]": {
      "editor.defaultFormatter": "redhat.java"
    },
    // Oracle用
    "oracledevtools.connections": [
      {
        "authenticationType": 1,
        "dBAPrivilege": "SYSDBA",
        "userID": "SYS",
        "passwordSaved": true,
        "password": "ora21c",
        "dataSource": "database:1521/XEPDB1",
        "connectionType": 2,
        "databaseHostName": "database",
        "databasePortNumber": "1521",
        "databaseServiceName": "XEPDB1",
        "name": "SYS.XEPDB1",
        "currentSchema": "",
        "tnsAdmin": "/home/docker/Oracle/network/admin"
      }
    ]
  },
  // 画面を閉じたときコンテナを自動停止させる。noneはそのまま。
  "shutdownAction": "stopCompose"
}
docker-compose.yml
version: "3"

services:
  workspace:
    build: workspace
    environment:
      TZ: Asia/Tokyo
    command: sleep infinity
    volumes:
      - .:/home/docker/.devcontainer
      - ../.vscode-server:/home/docker/.vscode-server
      - ../workspace:/home/docker/workspace
  database:
    image: oracle/database:21.3.0-xe
    container_name: database
    volumes:
      - /srv/oracle/oradata:/opt/oracle/oradata
    ports:
      - 1521:1521
      - 5500:5500
    environment:
      TZ: Asia/Tokyo
      ORACLE_PWD: ora21c
workspace\Dockerfile
FROM ubuntu:20.04
# git
RUN apt-get update -y && \
  apt-get install -y tzdata && \
  apt-get install -y git
# jdk 17
RUN apt-get install -y openjdk-17-jdk
# npm 8.x
RUN apt-get install -y curl gnupg; \
  curl -fsSL https://deb.nodesource.com/setup_16.x | bash -; \
  apt-get install -y nodejs; \
  npm install npm@latest -g
# .NET Core Runtime 3.1(Oracle Developer Tools)
RUN apt-get install wget; \
  wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb; \
  dpkg -i packages-microsoft-prod.deb; \
  rm packages-microsoft-prod.deb
RUN apt-get update; \
  apt-get install -y apt-transport-https && \
  apt-get update && \
  apt-get install -y aspnetcore-runtime-3.1
# Add user
RUN useradd -m -u 1000 docker
USER 1000

記載内容についても、少し説明しておきます。

  • 1つのコンテナで、複数のプロジェクトが開発できるようにworkspaceを用意。
  • .vscode-serverは、コンテナが作られるたびに生成されるので、volumesでファイル保存できるようにした。
  • ターミナルは、デフォルトではshが起動してしまうため、bashに変更。
  • ユーザは、デフォルトでrootになってしまうため、dockerユーザを作成し、WSLのuserID(1000)と同じIDに変更。
  • Oracle Developer Toolsは、最初のSYSユーザ分のみ用意。必要に応じて、スキーマ分も作成する。
  • 拡張機能を追加したい場合は、拡張機能の歯車アイコンで拡張機能IDのコピーを行う。Add to devcontainer.jsonは機能しなかったです。

VSCode Remote Containersの使い方

サイドバーのリモートエクスプローラーで、Containersを選択し、Open Folder in Containerで今回作成したフォルダを選択すると、Dockerコンテナが2つ(workspace, oracle）が起動し、必要な拡張機能および設定が完了します。

あとは、補足説明です。

  • Containersの対象フォルダをworkspace内の対象プロジェクトを選択すると、そのプロジェクト専用の開発画面で起動できる。バックエンド、フロントエンドも同様。
  • コンテナ内のJavaやOracle Developer Toolsで、DB接続する場合のサーバ名はoracle:1521となる。また、Windows PCからもlocalhost:1521経由で外部ツールの接続が可能。

おわりに

最初に記事を投稿していたときは、Remote Containersの存在すら知らなかったのですが、今ではデータベースを含めた開発環境が一瞬で構築でき、開発チームにも簡単に展開できるので、重宝しています。

皆さんも、ぜひRemote Containersを使いこなして、自分たちのプロジェクトにあった最適な開発環境を構築してみてください。

Discussion