Q&A
背景
dockerを利用したVueアプリケーションの公開
最近初めてVueを触ったのですが、環境依存性があり、dockerコンテナを利用する際はコンテナに入って
$ npm install
しないといけないことを知りました。(初学者なので勘弁)
個人で開発する分にはいいと思うのですが、作成したものを公開、ないし共有して利用してもらう場合
(デプロイしてアプリケーション自体を利用してもらうという意味ではない)
同様にコンテナに入ってから$ npm install
してね〜とREADMEに書くのはどうなんだろうと思っています。
知りたいこと
結局知りたいことですが、Dockerを利用したVueのアプリケーションを公開するときに
導入の際の手順として
$ npm install
してもらう必要があると思いますが、どうするのが一般的?であり、親切なのかを知りたいです。
自分の中の想像としては
・Dockerfileで記述してコンテナを立てたらnpm installが完了するようにする
くらいしか思いついてません。
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
回答5件
#1
総合スコア787
投稿2023/03/21 08:39
初心者ならWeb公開とdockerを使うのは一旦置いておいて、javascriptとvueの使い方をローカルでちゃんと学んだ方がいいと思います。
#2
総合スコア10268
投稿2023/03/21 09:27
vue程度で環境依存してることがおかしいけど
どうしてもDockerが必要ならREADMEに書くしかない。
## 必要な環境 - node.js v〇〇以上 - △△ ## Dockerを使う場合のインストール docker run ... ## Dockerを使わない場合のインストール △△が必須。 npm install
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
#3
総合スコア143061
投稿2023/03/21 09:33
作成したものを公開、ないし共有して利用してもらう場合
通常は「コンパイルして出来上がったJavaScriptを公開」で片付くのですが、それでは問題となる背景事情はどのようなものでしょうか?
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
#4
総合スコア21111
投稿2023/03/22 03:31
今の所のベストプラクティスとしては
Docker HubとGitHub Actionsを勉強していけば解決するでしょう。
.dockerignore
でdocker build
時のnode_modules
ディレクトリを無視するようにしますdockerfile
内でnpm install
をしてインストール- もしこれらをDocker Hub等で配布するなら、GitHub Actionsのmainブランチが更新されたら自動で
docker build
→docker push
までしてくれるように設定すると漏れがなくて良いよね
どうするのが一般的?であり、親切なのかを知りたいです。
Dockerは配布されるimageの中身は
全ての依存モジュールが全て揃った状態で整っており、
後はdocker run
で起動できる状態になっているべきです。
例えばDocker Hubのmysqlを見れば分かりますが、
READMEのどこにもapt instlal
でMySQLをインストールしてから実行してね!なんて書いてありません。
docker run
で起動したら過不足ないMySQLサーバとして即座に実行されます。
そもそもDockerを使う大きなメリットの一つが、ライブラリの組み合わせで「ちゃんと動くモジュールが完成している」事ですから、
モジュールがバラバラでイチから集め直さなきゃいけないんだよ、
それじゃDockerかませるより生のLinuxのがいいよねって話です。
なので、配布されたimageからnpm install
してねはおかしいです。
とはいえ、UbuntuやCentOS、Alpine等のLinuxのディレクトリ構造が再現されただけのバニライメージや、
Node.jsだけが動く事が担保されたバニライメージもあります。
これらは全ての礎になり、そこから貴方の思い描く完成形を更に詰め込んで動作するimageを生成する為の材料となります。
これには例外もあります。
今回の質問文に最もその一番ありがちな例が、
Node.jsバニラのイメージをそのまま使い、docker run
時に外から注入して運用する場合です。
これは開発時タイミングで
とりまdocker-compose.yml
で用意しただけという状況ならそうなっている事が多いです。
質問文の内容が正式リリース時点でそうなら、(時間的な都合で)ほぼその状態のまま改良される事なく正式リリースしてしまったのだと考えられます。
Docker Hubに登録するにしても企業だと金かかるしね。
予算申請とかめんどくせ、となってる間に忘れたとかもありがちです。
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
#5
総合スコア183
投稿2023/04/08 05:45
下記は私が普段使っているものです。
Imageをbuildしたタイミングで自動でnpm install
されます
.dockerignore
も必要だと思います。 COPYした時にnode_modulesを除外するためのものです。
Dockerfile
1 2FROM node:18.14.2-buster 3 4WORKDIR /usr/src/app 5 6COPY package*.json ./ 7 8# npmを最新のversionにする && 上でコピーしてきたpackageに沿ってnpm install 9RUN npm install -g npm && npm install 10# 本番環境用の場合 11# RUN npm install --only=production 12 13COPY . .
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
関連した質問
意見交換
受付中
HDD、何故遅いものと速いものがあるのか、そして仮想メモリ、増設すべきかしないか?
回答4
クリップ0
更新
2023/05/24
Q&A
解決済
navの背景色が変化しない
回答1
クリップ0
更新
2023/06/08
意見交換
受付中
ポートフォリオのおすすめデプロイ先を教えてください
回答4
クリップ2
更新
2023/05/21
Q&A
解決済
CSS position: absolute が効きません
回答1
クリップ0
更新
2023/05/23
Q&A
解決済
json形式のデータをfor分を使ってsqliteに登録
回答1
クリップ0
更新
2023/06/04
Q&A
解決済
ASP.NET HTMLタグを動的に生成する方法がわからない
回答1
クリップ0
更新
2023/06/03
Q&A
解決済
Ajax成功時の部分ビューの更新 (ASP.NET Core MVC)
回答1
クリップ0
更新
2023/06/01
同じタグがついた質問を見る
Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。
docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。
Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。
Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。