dockerコンテナ内で作成した vue プロジェクトをVSCodeでいじりたい

Question

vuejs初学者です。

前提

alpine ベースの Dockerコンテナ内に vuejs インストールさせてvueプロジェクトを作成しました。
作成したプロジェクトのルートフォルダはホスト(VPSサーバ)とvolumeマウントさせています。

実現したいこと

マウントしたVueプロジェクト配下のファイルを、VSCodeエディタで編集したい。

発生している問題・エラーメッセージ

Dockerコンテナ内で vue create すると、基本的にはプロジェクトはroot権限で作成されてしまいます。
このファイルをVSCode等のエディターで編集したいのですが、一般ユーザーとしてリモート接続しているため、
ファイルを編集する権限がありません。

この問題はどう解決すべきでしょうか？

該当のソースコード

# フォルダ構造
$ tree -a
.
├── .env
├── Dockerfile
├── app
│   └── _sample.txt
└── docker-compose.yml

FROM alpine

WORKDIR /usr/src/app

RUN apk add --no-cache \
    vim \
    less \
    git \
    sudo \
    nodejs \
    npm

# ホスト(VPSサーバ)と一般ユーザを共有させてます。詳細は後述のdocker-compose.ymlへ。
RUN echo '%wheel ALL=(ALL) NOPASSWD: ALL' >> /etc/sudoers

RUN npm install -g @vue/cli

version: '3'

services:
  app:
    build: .
    ports:
      - 8080:8080
    env_file:
      # UID, GID って環境変数で ユーザー/グループID定義してます。
      - .env
    user: ${UID}:${GID}   # from .env
    volumes:
      - ./app:/usr/src/app
      # ホスト(VPSサーバ)と一般ユーザー共有してます。
      - /etc/passwd:/etc/passwd:ro
      - /etc/group:/etc/group:ro
    tty: true
    stdin_open: true
    command: /bin/sh

試したこと

1. 一般ユーザーで vueプロジェクト作成

上述に記載している通り、コンテナに一般ユーザ共有させた状態で、
下記を実行することで、一般ユーザーがownerの状態でvueプロジェクトを作成しようと試みましたが、
create時に下記のエラーが発生します。
権限周りで死んでますね。

/usr/src/app $ whoami
mosuke
/usr/src/app $ vue create app-10
 ERROR  Error saving preferences: make sure you have write access to /home/mosuke/.vuerc.
        (ENOENT: no such file or directory, open '/home/mosuke/.vuerc')


Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v5.0.4
✨  Creating project in /usr/src/app/app-10.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /home/mosuke
npm ERR! errno EACCES
npm ERR! FetchError: Invalid response body while trying to fetch https://registry.npmjs.org/@vue%2fcli-plugin-babel: EACCES: permission denied, mkdir '/home/mosuke'
npm ERR!     at /usr/lib/node_modules/npm/node_modules/minipass-fetch/lib/body.js:162:15
npm ERR!     at async Arborist.[nodeFromEdge] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:934:19)
npm ERR!     at async Arborist.[buildDepStep] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:880:11)
npm ERR!     at async Arborist.buildIdealTree (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:218:7)
npm ERR!     at async Promise.all (index 1)
npm ERR!     at async Arborist.reify (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:136:5)
npm ERR!     at async Install.install (/usr/lib/node_modules/npm/lib/install.js:150:5)
npm ERR!  FetchError: Invalid response body while trying to fetch https://registry.npmjs.org/@vue%2fcli-plugin-babel: EACCES: permission denied, mkdir '/home/mosuke'
npm ERR!     at /usr/lib/node_modules/npm/node_modules/minipass-fetch/lib/body.js:162:15
npm ERR!     at async Arborist.[nodeFromEdge] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:934:19)
npm ERR!     at async Arborist.[buildDepStep] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:880:11)
npm ERR!     at async Arborist.buildIdealTree (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:218:7)
npm ERR!     at async Promise.all (index 1)
npm ERR!     at async Arborist.reify (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:136:5)
npm ERR!     at async Install.install (/usr/lib/node_modules/npm/lib/install.js:150:5) {
npm ERR!   code: 'EACCES',
npm ERR!   errno: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/home/mosuke',
npm ERR!   type: 'system',
npm ERR!   requiredBy: '.'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
 ERROR  Error: command failed: npm install --loglevel error --legacy-peer-deps
Error: command failed: npm install --loglevel error --legacy-peer-deps
    at ChildProcess.<anonymous> (/usr/local/lib/node_modules/@vue/cli/lib/util/executeCommand.js:138:16)
    at ChildProcess.emit (events.js:400:28)
    at maybeClose (internal/child_process.js:1058:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:293:5)
/usr/src/app $

2. 一般ユーザーにsudo権限与えてプロジェクト作成

権限周りで失敗してそうなので $ sudo vue create <projectName> を実行。
作成出来ましたがプロジェクトownerはrootとして作成されました。そりゃそうだ。

補足

今の所考えてるけど自分の脳内で却下してる案がいくつかあります。
「それでいんじゃね？」「うんだめだね」って思ったら教えてほしいです。

案1: rootとして作った後に chown -R とかで一斉変更

なんか手間だしスマートじゃない気がする。

案2: vscode でリモート接続時にrootとしてログインする

セキュリティの観点で好ましくない。はず。

案3: そもそもホスト(VPSサーバ)側で vue create すれば？

ホストの環境をなるべく汚したく無い思ってます。
でもそれがvuejs界隈のベストプラクティスなのであればそちらへ舵を切ります。

Answer 1

vue.jsをインストール際(Dockerfileない出の記述)はroot権限でインストールしていますか?
であれば、プロジェクト作成時にエラーが発生しそうな気がします。
Dockerfileでvue.jsをインストールする際(node.jsのインストール等)をroot以外のユーザーを作成して行ってみてはどうでしょうか?

後は、自分も試したことないので情報共有程度ですが、以下の様な記事がありましたので、見てみるのはどうでしょうか。
Docker開発環境(1): ownerがrootになるのを回避する - Zenn
Docker側で生成したファイルがrootになる問題 - Zenn

関連ワード調べればいくつか解決できそうな記事は出てくるような気がします。

Comments

[mosuke]

返答が遅れてしまい申し訳ございません。

ご回答、記事のご共有ありがとうございます。
自己回答の方にも記載しておりますが、今回は
**「`vue create`実行ユーザのホームディレクトリを用意していない」**
ことが直接のエラー要因でした。

とはいえ、Yuuさんの
> Dockerfileでvue.jsをインストールする際(node.jsのインストール等)をroot以外のユーザーを作成して行ってみてはどうでしょうか?

というご意見がこの解決の足掛かりとなりましたので、非常に助かりました。
ありがとうございました。

一応、node.js のインストール等をroot以外のユーザーで作成してみようと試行してみましたが、
root以外だと`apk`等のパッケージ管理システムが実行出来ないため、node.js のインストールはソースから行う必要がありそうです。
実現したいことの規模感を考えると、妙にややこしくなって再現性も薄れ、少しスマートじゃないかな、と感じたため、途中でこの手法は諦めました。

また、ご共有頂いた記事についてもざっくり目を通させていただきました。
`docker-rootless` 面白そうですね。少し興味あります。
今回は記事の内容を試す前に解決いたしましたので、また今度時間を見つけて触ってみたいと思います。

Answer 2

解消方法: コンテナ内に特定ユーザのホームディレクトリを作成する

【Vue CLI】Creating a Project
にて、下記の文言を見つけました。

Saved presets will be stored in a JSON file named .vuerc in your user home directory. If you wish to modify saved presets / options, you can do so by editing this file.

どうやら、$ vue create を実行すると、実行ユーザのホームディレクトリ配下に プリセット(プロジェクトで必要となる設定)情報を保持するJSONファイル ~/.vuerc が作成される様です。

質問文記載のエラー出力にもその旨が記載されていました。

/usr/src/app $ vue create app-10
 ERROR  Error saving preferences: make sure you have write access to /home/mosuke/.vuerc.
        (ENOENT: no such file or directory, open '/home/mosuke/.vuerc')

$ vue create を行ったユーザーは一般ユーザーである mosuke なので、
本来であればプリセットファイルは /home/mosuke/.vuerc に作成されるハズです。
ところが、コンテナのビルド時にも立ち上げ時にも /home/mosuke/ フォルダは作成していないため、
「/home/mosuke/フォルダなんて見つからねぇよ」と怒られたわけですね。

この問題の解決策としては、シンプルに /home/mosukeフォルダをあらかじめ作成しておく 、というのが考えられます。

解決ソース

# フォルダ構造
.
├── .env
├── Dockerfile
├── app
│   └── _sample.txt
├── docker-compose.yml
└── entrypoint.sh

# Dockerfile
FROM nginx:stable-alpine

WORKDIR /usr/src/app

RUN set -ex; \
    apk add --no-cache \
    # alpine 向けの gosu
    su-exec \
    bash \
    # useradd, usermod とかそういう系
    shadow \
    nodejs \
    npm

RUN npm install -g @vue/cli

COPY ./entrypoint.sh /usr/local/bin/entrypoint.sh
RUN chmod +x /usr/local/bin/entrypoint.sh

RUN useradd mosuke
WORKDIR /home/mosuke

ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]

# docker-compose.yml
version: '3'

services:
  app:
    build: .
    ports:
      - 8080:8080
    env_file:
      # UID, GID って環境変数で ユーザー/グループID定義してます。
      - .env
    volumes:
      - ./app:/home/mosuke/app
    tty: true
    stdin_open: true
    command: /bin/sh

# entrypoint.sh
#!/bin/bash

USER_ID=${UID:-9001}
GROUP_ID=${GID:-9001}

echo "Starting with UID : $USER_ID, GID: $GROUP_ID"
usermod -u $USER_ID -o -d /home/mosuke -m mosuke
groupmod -g $GROUP_ID mosuke
export HOME=/home/mosuke

# usermod で $HOME 配下は user に owner が変更されるが、
# $HOME 自体は root 権限となってしまう。
# このままでは ~/.vuerc や ~/.npm が作成出来ずにエラーとなってしまうため、
# 下記で owner を user に変更しておく。
chown -R $USER_ID:$GROUP_ID $HOME

exec /sbin/su-exec mosuke "$@"

このメンツで下記を実行すると、問題無く「dockerコンテナ内でvueプロジェクトが作成され、一般ユーザーでリモート接続してるVSCodeから編集」が出来ました。

[mosuke@vps-server:~/vue_test]
$ docker-compose up -d --build
$ docker-compose exec --user mosuke app bash

bash-5.1$ pwd
/usr/src/app
bash-5.1$ whoami
mosuke
bash-5.1$ vue create app-10
...
bash-5.1$ ls
app-10
bash-5.1$ cd app-10/
bash-5.1$ npm run serve
...
  - Local:   http://localhost:8080/

  It seems you are running Vue CLI inside a container.
  Access the dev server via http://localhost:<your container's external mapped port>/
  
# これで http://[vps-server]:8080/ とかでブラウザからアクセスすれば、vuejsお馴染みのあの画面が出力されます。
# (僕の場合は デーモンやvue周りの 設定修正が必要でしたが、本題と逸れるので割愛します。)

参考

• 【Vue CLI】Creating a Project
• dockerでvolumeをマウントしたときのファイルのowner問題
• usermodの使い方(特に -d, -m オプション)