Docker コンテナ内でElectronの開発環境を構築する

DockerでElectronの開発環境を構築する方法を紹介します。

Docker コンテナ内のアプリで日本語入力をする方法でコンテナ内でGUIアプリを起動して、日本語入力ができるようになりました。

このコンテナに対して、Electronの開発環境の設定を追加していきます。

electron-vueなどを使った開発環境を構築し、electron-builderを使ってwindows用のexeを作成するまでできるような環境を構築します。

Dockerファイルの作成

Docker コンテナ内のアプリで日本語入力をする方法で紹介したDockerfileに対して修正をします。

Electronの実行に必要なパッケージをインストールします。

また、electron-vueなどを使用した開発環境を構築するため、nodejsやyarnのインストールも行います。

動作確認用のleafpadは不要のため削除します。

Dockerfile

FROM ubuntu

RUN apt-get update \
    && apt-get -y install libgtkextra-dev libgconf2-dev libnss3 libasound2 libxtst-dev libxss1 libgtk-3-0

RUN apt-get update \
    && apt-get install -y language-pack-ja-base language-pack-ja fonts-noto-cjk fcitx-mozc \
    && im-config -n fcitx

RUN apt-get update && apt-get install -y leafpad

# windows用にビルドするために必要
RUN dpkg --add-architecture i386 \
    && apt-get update \
    && apt-get install -y wine-stable wine32

# nodejsとyarnをインストールするために必要
RUN apt-get update \
  && apt-get install -y curl

# nodejsをインストール
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \
    && apt-get install -y nodejs

# yarnをインストール
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/+sources.list.d/yarn.list \
    && apt-get update && apt-get install yarn

ENV GTK_IM_MODULE=xim \
    QT_IM_MODULE=fcitx \
    XMODIFIERS=@im=fcitx \
    DefalutIMModule=fcitx

RUN locale-gen ja_JP.UTF-8  
ENV LANG=ja_JP.UTF-8 \
    LC_ALL=ja_JP.UTF-8

# add user
ARG DOCKER_UID=1000
ARG DOCKER_USER=docker
ARG DOCKER_PASSWORD=docker
RUN useradd -m \
  --uid ${DOCKER_UID} --groups sudo ${DOCKER_USER} \
  && echo ${DOCKER_USER}:${DOCKER_PASSWORD} | chpasswd

USER ${DOCKER_USER}

WORKDIR /home/${DOCKER_USER}/app

docker-compose.ymlの修正

privilegedをtrueに設定します。

他の設定が影響しているのかもしれませんが、この設定がないとyarn run devなどでElectronを実行するとエラーになってしまいました。

また、開発ソースをコンテナ側にマウントします。

以下の例ではホスト側のappフォルダ配下にソースを配置していますが、配置する場所は適宜変更してください。

ルートディレクトリ
- app
  - node_modules
  - package.json
  - ソースなど
- docker
- app
  - Dockerfile
- docker-compose.yml

docker-compose.yml

version: '3'
services:
  app:
    build: ./docker/app
    tty: true
    privileged: true
    environment:
      - DISPLAY=${DISPLAY}
    volumes:
      - /tmp/.X11-unix:/tmp/.X11-unix
      - ./app:/home/docker/app

動作確認

コンテナをビルドして起動し、コンテナ内に入ります。

electron-vueの場合は、以下のコマンドでモジュールをインストールします。

ホスト側ですでにインストールしている場合でもnode_modulesフォルダを削除し、コンテナ側で再度インストールを行います。

ホスト側とコンテナ側の環境に差異があるため、コンテナ側で再インストールをしないとエラーになることがあります。

$ yarn

その後、以下のコマンドでElectronを実行し、Electronのウインドウが画面に表示されることが確認できます。

$ yarn run dev