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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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つです

解決済

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

morizoo-
mosuke

総合スコア59

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つです

2回答

0評価

0クリップ

311閲覧

投稿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

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

Dockerfile

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

docker

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時に下記のエラーが発生します。
権限周りで死んでますね。

bash

/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界隈のベストプラクティスなのであればそちらへ舵を切ります。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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つです