研究

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

投稿者:

Contents

はじめに

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

前提条件

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

試してみましょう

参考リンク

https://qiita.com/rh_taro/items/ca08b930f704275286a4#docker-compose%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E4%BD%BF%E3%81%86%E5%A0%B4%E5%90%88

試してみましょう

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

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

https://maya-pg.net/2020/09/28/docker%e3%82%92%e4%b9%85%e3%81%97%e3%81%b6%e3%82%8a%e3%81%ab%e8%a7%a6%e3%82%8d%e3%81%86%e3%81%a8%e3%81%97%e3%81%9f%e3%82%89%e5%8f%b1%e3%82%89%e3%82%8c%e3%81%9f%e4%bb%b6/

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