はじめに
DockerでVue.jsの環境を構築を行ったので、記録用に書きます。
色々な方の記事を結構参考にしてやりました。
超初心者の私が欲しかった超初歩的な細かい情報も書いてるので、どこかの誰かの役に立てれば…
「コマンドを実行するディレクトリはどこ？」
→これを間違えて、全工程完了後フォルダ内に何もインストールされないという変なことが起きました。
「ディレクトリ構成図が解読できない😇これファイル？フォルダ？どこに何がインストールされるの？」
環境
- PC: MacBook Air 2019
- OS: Ventura
- Docker 20.10.17
- Docker-compose v2.6.1
①フォルダを作成
$ mkdir svtApp でフォルダ作成
$ cd svtApp でそのフォルダ内に移動
$ mkdir vueApp,$ touch Dockerfile,$ touch docker-compose.yml
svtApp
├──(file) Dockerfile
├──(file) docker-compose.yaml
└──[folder] vueApp
②Dockerfile & docker-compose.ymlの中身作成
Dockerfileの中身
FROM node:18.12.1
WORKDIR /app
nodeのバージョンを公式サイトで確認して書きます
docker-compose.ymlの中身(参考サイトのほぼコピペです💦)
version: '3.9'
services:
#"vue-app" という名前で「サービス」を定義
vue-app:
#build...ComposeFileを実行し、ビルドされるときのpath
build:
context: .
dockerfile: Dockerfile
#tty...
tty: true
#environment...DBについての環境変数設定
environment:
- NODE_ENV=development
#volumes...マウントする設定ファイルのパスを指定
volumes:
- ./vueApp:/app
#command...
command: sh -c "cd vue-sample && npm run serve"
#ports...ホストの「ポート番号」とコンテナーの「ポート番号」の対応付けを定義
ports:
- "8080:8080"
疑問
- 「DockerfileのWORKDIR」と「docker-compose.ymlのvolumes」は一緒にする（？）
- 全部通してやってみて思ったけど、commandに書いてあるやつ実行されてる？
③コンテナの起動
.../svtApp % docker-compose build
-----
[+] Building 2.5s (6/6) FINISHED
=> 色々
=> 文字が続いて
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
④プロジェクトを作成
.../svtApp % docker-compose run --rm vue-app sh -c "npm install -g @vue/cli @vue/cli-init && vue create vue-sample"
-----
# vueのバージョンとパッケージマネージャーを選択
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: NPM
Vue CLI v5.0.8
✨ Creating project in /app/vue-sample.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
added 856 packages, and audited 857 packages in 3m
91 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
🚀 Invoking generators...
📦 Installing additional dependencies...
added 102 packages, and audited 959 packages in 31s
102 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project vue-sample.
👉 Get started with the following commands:
$ cd vue-sample
$ npm run serve
WARN Skipped git commit due to missing username and email in git config, or failed to sign commit.
You will need to perform the initial commit yourself.
最後に警告が出てきてるんですが、よく分からなかったので無視しました。（わかる方教えて欲しいです💦)
この時点でのフォルダ構成
※重要そうなところをメインに書きました
svtApp
├──(file) Dockerfile
├──(file) docker-compose.yaml
└──[folder] vueApp
└──[folder] vue-sample
├──(file) README.md
| : 色々ファイル
├──[folder] node_modules
├──[folder] public
└──[folder] src
├──[folder] assets
| └──(file)logo.png
├──[folder] components
| └──(file) HelloWorld.vue
├──(file) App.vue
└──(file) main.js
⑤起動
.../svtApp % cd vue-sample
.../svtApp/vue-sample $ npm run serve
---
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.*.*:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
http://localhost:8080/にアクセス
〜作業〜
↓
「^(control) + C」で抜け出せました