まとまった時間がなかなか取れず勉強できなかったDockerを勉強する。
前提条件
・Dockerにアカウントがあり、コマンドラインでログインしている。
・Dockerデスクトップをダウンロードしている。
参考リンク
ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4] – Qiita
2019/10/21 vuecli4系の手順に更新 今更ながらようやくdockerデビューしたのでフロントエンドの勉強も兼ねて 少しこだわってローカルにnpmとかを入れずにdocker上で開発環境の構築をしました dockerコマンドとdocker-composeコマンドを使う2パターン試しました docker-composeは複数のコンテナを連携させるために使われますが コンテナ1個でもやっぱりdocker-composeの方が全部ファイルに書けていいですね macOS 10.14.6 Docker Community Edition for Mac Version 19.03.2 https://store.docker.com/editions/community/docker-ce-desktop-mac ここからDocker Community Edition for Macをインストールしたら起動させる CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 723643ed72c6 vue_app_image “docker-entrypoint.s…” 13 seconds ago Up 11 seconds 0.0.0.0:9050->9050/tcp app ref: https://cli.vuejs.org/guide/creating-a-project.html#vue-create ? Your connection to the default yarn registry seems to be slow.
docker-composeを使うことにし、以下のdocker-compose.ymlを作ります。
version: '3' services: app: build: . ports: - 9050:9050 volumes: - .:/usr/src/app stdin_open: true tty: true command: /bin/sh
叱られる。
ERROR: Service 'web' failed to build : Get https://registry-1.docker.io/v2/library/node/manifests/10.17.0-alpine3.9: unauthorized: incorrect username or password
…だからこういうのは後ろからたどらないの。必要そうなファイルを揃え再試行…変わらず。
エラーメッセージでググるとこういうことでした。
画してビルドまでは通り、起動。コンテナに入りVueプロジェクトを作る。vue.config.jsの置き場だけ分からなかったので
わかった。ここでした。

module.exports = { devServer: { port: 9050, host: '0.0.0.0', disableHostCheck: true, }, };
こう書いたら、
/usr/src/app # npm run serve
こうやって画面を確認。(分からないままにしないの)
http://localhost:9050/ で参照できます。

なおソースコードを変更してセーブしてやると、同時にコンパイルが走ります。ほうほう。
あとはこの人をMySQLと繋いでいろいろやってみようと思います。Githubに晒してみるか。
コメント