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

研究
この記事は約4分で読めます。

まとまった時間がなかなか取れず勉強できなかった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に晒してみるか。

コメント

タイトルとURLをコピーしました