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

はじめに
前提条件
試してみましょう
1. 参考リンク
2. 試してみましょう

はじめに

まとまった時間がなかなか取れず勉強できなかったDockerを勉強する。

前提条件

・Dockerにアカウントがあり、コマンドラインでログインしている。
・Dockerデスクトップをダウンロードしている。

試してみましょう

参考リンク

ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4] - Qiita

2019/10/21 vuecli4系の手順に更新概要今更ながらようやくdockerデビューしたのでフロントエンドの勉強も兼ねて少しこだわってローカルにnpmとかを入れずにdocker上で開発環境の構築をしました doc...

試してみましょう

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に晒してみるか。