【Docker】DockerにてVue.jsのhello worldまでを試行してみる

まとまった時間がなかなか取れず勉強できなかった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

…だからこういうのは後ろからたどらないの。必要そうなファイルを揃え再試行…変わらず。
エラーメッセージでググるとこういうことでした。

【Docker】Dockerを久しぶりに触ろうとしたら叱られた件

あるあるなのかも知れませんが。$ docker run --name some-nginx -d -p 8080:80 nginx：：unauthorized: authentication requiredと、叱ら...

画してビルドまでは通り、起動。コンテナに入り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に晒してみるか。