質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Q&A

解決済

2回答

1971閲覧

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

morizoo-

総合スコア65

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

0グッド

0クリップ

投稿2022/04/24 17:49

編集2022/05/08 15:34

vuejs初学者です。

前提

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

実現したいこと

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

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

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

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

該当のソースコード

bash

1# フォルダ構造 2$ tree -a 3. 4├── .env 5├── Dockerfile 6├── app 7│   └── _sample.txt 8└── docker-compose.yml

Dockerfile

1FROM alpine 2 3WORKDIR /usr/src/app 4 5RUN apk add --no-cache \ 6 vim \ 7 less \ 8 git \ 9 sudo \ 10 nodejs \ 11 npm 12 13# ホスト(VPSサーバ)と一般ユーザを共有させてます。詳細は後述のdocker-compose.ymlへ。 14RUN echo '%wheel ALL=(ALL) NOPASSWD: ALL' >> /etc/sudoers 15 16RUN npm install -g @vue/cli

docker

1version: '3' 2 3services: 4 app: 5 build: . 6 ports: 7 - 8080:8080 8 env_file: 9 # UID, GID って環境変数で ユーザー/グループID定義してます。 10 - .env 11 user: ${UID}:${GID} # from .env 12 volumes: 13 - ./app:/usr/src/app 14 # ホスト(VPSサーバ)と一般ユーザー共有してます。 15 - /etc/passwd:/etc/passwd:ro 16 - /etc/group:/etc/group:ro 17 tty: true 18 stdin_open: true 19 command: /bin/sh

試したこと

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

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

bash

1/usr/src/app $ whoami 2mosuke 3/usr/src/app $ vue create app-10 4 ERROR Error saving preferences: make sure you have write access to /home/mosuke/.vuerc. 5 (ENOENT: no such file or directory, open '/home/mosuke/.vuerc') 6 7 8Vue CLI v5.0.4 9? Please pick a preset: Manually select features 10? Check the features needed for your project: Babel, Linter 11? Choose a version of Vue.js that you want to start the project with 3.x 12? Pick a linter / formatter config: Basic 13? Pick additional lint features: Lint on save 14? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files 15? Save this as a preset for future projects? No 16 17 18Vue CLI v5.0.4 19✨ Creating project in /usr/src/app/app-10. 20🗃 Initializing git repository... 21⚙️ Installing CLI plugins. This might take a while... 22 23npm ERR! code EACCES 24npm ERR! syscall mkdir 25npm ERR! path /home/mosuke 26npm ERR! errno EACCES 27npm ERR! FetchError: Invalid response body while trying to fetch https://registry.npmjs.org/@vue%2fcli-plugin-babel: EACCES: permission denied, mkdir '/home/mosuke' 28npm ERR! at /usr/lib/node_modules/npm/node_modules/minipass-fetch/lib/body.js:162:15 29npm ERR! at async Arborist.[nodeFromEdge] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:934:19) 30npm ERR! at async Arborist.[buildDepStep] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:880:11) 31npm ERR! at async Arborist.buildIdealTree (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:218:7) 32npm ERR! at async Promise.all (index 1) 33npm ERR! at async Arborist.reify (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:136:5) 34npm ERR! at async Install.install (/usr/lib/node_modules/npm/lib/install.js:150:5) 35npm ERR! FetchError: Invalid response body while trying to fetch https://registry.npmjs.org/@vue%2fcli-plugin-babel: EACCES: permission denied, mkdir '/home/mosuke' 36npm ERR! at /usr/lib/node_modules/npm/node_modules/minipass-fetch/lib/body.js:162:15 37npm ERR! at async Arborist.[nodeFromEdge] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:934:19) 38npm ERR! at async Arborist.[buildDepStep] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:880:11) 39npm ERR! at async Arborist.buildIdealTree (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:218:7) 40npm ERR! at async Promise.all (index 1) 41npm ERR! at async Arborist.reify (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:136:5) 42npm ERR! at async Install.install (/usr/lib/node_modules/npm/lib/install.js:150:5) { 43npm ERR! code: 'EACCES', 44npm ERR! errno: 'EACCES', 45npm ERR! syscall: 'mkdir', 46npm ERR! path: '/home/mosuke', 47npm ERR! type: 'system', 48npm ERR! requiredBy: '.' 49npm ERR! } 50npm ERR! 51npm ERR! The operation was rejected by your operating system. 52npm ERR! It is likely you do not have the permissions to access this file as the current user 53npm ERR! 54npm ERR! If you believe this might be a permissions issue, please double-check the 55npm ERR! permissions of the file and its containing directories, or try running 56npm ERR! the command again as root/Administrator. 57 ERROR Error: command failed: npm install --loglevel error --legacy-peer-deps 58Error: command failed: npm install --loglevel error --legacy-peer-deps 59 at ChildProcess.<anonymous> (/usr/local/lib/node_modules/@vue/cli/lib/util/executeCommand.js:138:16) 60 at ChildProcess.emit (events.js:400:28) 61 at maybeClose (internal/child_process.js:1058:16) 62 at Process.ChildProcess._handle.onexit (internal/child_process.js:293:5) 63/usr/src/app $

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

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

補足

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

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

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

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

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

投稿2022/04/25 01:07

YuuT

総合スコア667

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

morizoo-

2022/05/03 15:32

返答が遅れてしまい申し訳ございません。 ご回答、記事のご共有ありがとうございます。 自己回答の方にも記載しておりますが、今回は **「`vue create`実行ユーザのホームディレクトリを用意していない」** ことが直接のエラー要因でした。 とはいえ、Yuuさんの > Dockerfileでvue.jsをインストールする際(node.jsのインストール等)をroot以外のユーザーを作成して行ってみてはどうでしょうか? というご意見がこの解決の足掛かりとなりましたので、非常に助かりました。 ありがとうございました。 一応、node.js のインストール等をroot以外のユーザーで作成してみようと試行してみましたが、 root以外だと`apk`等のパッケージ管理システムが実行出来ないため、node.js のインストールはソースから行う必要がありそうです。 実現したいことの規模感を考えると、妙にややこしくなって再現性も薄れ、少しスマートじゃないかな、と感じたため、途中でこの手法は諦めました。 また、ご共有頂いた記事についてもざっくり目を通させていただきました。 `docker-rootless` 面白そうですね。少し興味あります。 今回は記事の内容を試す前に解決いたしましたので、また今度時間を見つけて触ってみたいと思います。
guest

0

自己解決

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

【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 が作成される様です。

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

bash

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

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

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

解決ソース

bash

1# フォルダ構造 2. 3├── .env 4├── Dockerfile 5├── app 6│ └── _sample.txt 7├── docker-compose.yml 8└── entrypoint.sh

Dockerfile

1# Dockerfile 2FROM nginx:stable-alpine 3 4WORKDIR /usr/src/app 5 6RUN set -ex; \ 7 apk add --no-cache \ 8 # alpine 向けの gosu 9 su-exec \ 10 bash \ 11 # useradd, usermod とかそういう系 12 shadow \ 13 nodejs \ 14 npm 15 16RUN npm install -g @vue/cli 17 18COPY ./entrypoint.sh /usr/local/bin/entrypoint.sh 19RUN chmod +x /usr/local/bin/entrypoint.sh 20 21RUN useradd mosuke 22WORKDIR /home/mosuke 23 24ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]

yml

1# docker-compose.yml 2version: '3' 3 4services: 5 app: 6 build: . 7 ports: 8 - 8080:8080 9 env_file: 10 # UID, GID って環境変数で ユーザー/グループID定義してます。 11 - .env 12 volumes: 13 - ./app:/home/mosuke/app 14 tty: true 15 stdin_open: true 16 command: /bin/sh

bash

1# entrypoint.sh 2#!/bin/bash 3 4USER_ID=${UID:-9001} 5GROUP_ID=${GID:-9001} 6 7echo "Starting with UID : $USER_ID, GID: $GROUP_ID" 8usermod -u $USER_ID -o -d /home/mosuke -m mosuke 9groupmod -g $GROUP_ID mosuke 10export HOME=/home/mosuke 11 12# usermod で $HOME 配下は user に owner が変更されるが、 13# $HOME 自体は root 権限となってしまう。 14# このままでは ~/.vuerc や ~/.npm が作成出来ずにエラーとなってしまうため、 15# 下記で owner を user に変更しておく。 16chown -R $USER_ID:$GROUP_ID $HOME 17 18exec /sbin/su-exec mosuke "$@"

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

bash

1[mosuke@vps-server:~/vue_test] 2$ docker-compose up -d --build 3$ docker-compose exec --user mosuke app bash 4 5bash-5.1$ pwd 6/usr/src/app 7bash-5.1$ whoami 8mosuke 9bash-5.1$ vue create app-10 10... 11bash-5.1$ ls 12app-10 13bash-5.1$ cd app-10/ 14bash-5.1$ npm run serve 15... 16 - Local: http://localhost:8080/ 17 18 It seems you are running Vue CLI inside a container. 19 Access the dev server via http://localhost:<your container's external mapped port>/ 20 21# これで http://[vps-server]:8080/ とかでブラウザからアクセスすれば、vuejsお馴染みのあの画面が出力されます。 22# (僕の場合は デーモンやvue周りの 設定修正が必要でしたが、本題と逸れるので割愛します。)

参考

投稿2022/05/03 15:30

編集2022/05/08 06:34
morizoo-

総合スコア65

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問