LoginSignup
0
0

More than 1 year has passed since last update.

Vue-cli,python,MySQLをDocker composeを用いて構成する(環境構築編)

Last updated at Posted at 2023-01-21

1 この記事は

Vue-Cli(描写系)-python(演算系)-mysql(データ保存)で構成されるシステムをdockerコンテナを使って構築する。この記事で環境構築のみの方法を説明する。

457.jpg

アプリ作成編は、下記リンク先をご確認ください

2 制作アプリの紹介

上記のシステムを動かすために、入力した数値に+3を加算し、演算結果を表示するアプリを作成してみました。
449.jpg

入力した数値に+3を加算し表示するとき
450.jpg

+3を加算する演算を実施した時刻を読みだすとき
451.jpg

3 システムの構築手順

3-1 前提条件

・Windows11
・Docker desktop for windowsがインストールされていること

3-2 ディレクトリを構成する。

下記のとおり、ディレクトリ、ファイルを配置する。(この地点では、ファイルの中は空でOKです)
452.jpg

3-3 docker-compose.ymlを作成する

MEGARA_SEL/fe/docker-compose.yml
version: "3"
services:

  # フロントエンド
  fe:
    container_name: fe
    build: ./fe
    volumes:
      - ./fe/app:/app
      - node_modules_volume:/app/node_modules
    ports:
      - "8080:8080"
    links:
      - be
    command: tail -f /dev/null   #コンテナ起動状態を維持するため

  # バックエンド
  be:
    container_name: be
    build: ./be
    volumes:
      - ./be/app:/app
    ports:
      - "5000:5000"
    command: tail -f /dev/null   #コンテナ起動状態を維持するため
    links:
      - db

  # データベース
  db:
    container_name: mysql_host0
    build: ./db
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: test_db
      MYSQL_USER: docker
      MYSQL_PASSWORD: docker
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
    - ./docker/db/data:/var/lib/mysql
    - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
    - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
    - 3306:3306
volumes:
  node_modules_volume:

3-4 Dockerfileを作成する

beに配置するDockerfile

MEGARA_SEL/be/Dockerfile
FROM ubuntu:20.04
FROM python:3.9.2-buster
RUN apt-get update
RUN apt-get install lsof
RUN apt-get install emacs

# 必要パッケージのインストール
RUN apt install -y nodejs npm
RUN npm install python-shell
RUN npm install express
RUN npm install mysql

RUN mkdir /app
ADD requirements.txt /app

ENV PYTHONUNBUFFERED 1
EXPOSE 5000

WORKDIR /app
RUN pip3 install -r requirements.txt

feに配置するDockerfile

MEGARA_SEL/fe/Dockerfile
# ベースイメージ
FROM node:16-alpine3.15

# Create app directory
WORKDIR /app

# Install app dependencies (package.json and package-lock.json)
COPY package*.json ./
RUN apk update
RUN apk add lsof
RUN npm install
RUN npm install axios
RUN npm install -g npm
RUN npm install -g @vue/cli@3.9.3
RUN npm install -g @vue/cli-init
RUN vue init webpack . 

# Bundle app source (server.js)
COPY . .

# Listen port
EXPOSE 8080

dbに配置するDockerfile

MEGARA_SEL/db/Dockerfile
# apt-get出来る様にdebian版を使う。
FROM mysql:8.0.30-debian
# コンテナ内で日本語が打てるようにlocalを変更といらないファイル削除
RUN apt-get update \
   && apt-get install -y locales \
   && sed -i -E 's/# (ja_JP.UTF-8)/\1/' /etc/locale.gen \
   && locale-gen \
   && update-locale LANG=ja_JP.UTF-8 \
   && apt-get clean \
   && rm -rf /var/lib/apt/lists/*
ENV LC_ALL ja_JP.UTF-8

3-5 環境構築時、同時にインストールするパッケージを記載したファイルを作成する

MEGARA_SEL/be/requirements.txt
SQLAlchemy
Flask-SQLAlchemy
Flask-Cors
marshmallow
marshmallow-sqlalchemy
flask-marshmallow
pymysql
MEGARA_SEL/db/my.cnf
[mysqld]   
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

[client]
default-character-set=utf8mb4
MEGARA_SEL/fe/package.json and MEIGARA_SEL/be/app/package.json
{
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "accepts": {
      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
      "requires": {
        "mime-types": "2.1.35",
        "negotiator": "0.6.3"
      },
      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
      "version": "1.3.8"
    },
    "array-flatten": {
      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
      "version": "1.1.1"
    },
    "bignumber.js": {
      "integrity": "sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A==",
      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.0.tgz",
      "version": "9.0.0"
    },
    "body-parser": {
      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
      "requires": {
        "bytes": "3.1.2",
        "content-type": "1.0.4",
        "debug": "2.6.9",
        "depd": "2.0.0",
        "destroy": "1.2.0",
        "http-errors": "2.0.0",
        "iconv-lite": "0.4.24",
        "on-finished": "2.4.1",
        "qs": "6.11.0",
        "raw-body": "2.5.1",
        "type-is": "1.6.18",
        "unpipe": "1.0.0"
      },
      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
      "version": "1.20.1"
    },
    "bytes": {
      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
      "version": "3.1.2"
    },
    "call-bind": {
      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
      "requires": {
        "function-bind": "1.1.1",
        "get-intrinsic": "1.1.3"
      },
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
      "version": "1.0.2"
    },
    "content-disposition": {
      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
      "requires": {
        "safe-buffer": "5.2.1"
      },
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
      "version": "0.5.4"
    },
    "content-type": {
      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
      "version": "1.0.4"
    },
    "cookie": {
      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
      "version": "0.5.0"
    },
    "cookie-signature": {
      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
      "version": "1.0.6"
    },
    "core-util-is": {
      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
      "version": "1.0.3"
    },
    "debug": {
      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
      "requires": {
        "ms": "2.0.0"
      },
      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
      "version": "2.6.9"
    },
    "depd": {
      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
      "version": "2.0.0"
    },
    "destroy": {
      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
      "version": "1.2.0"
    },
    "ee-first": {
      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
      "version": "1.1.1"
    },
    "encodeurl": {
      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
      "version": "1.0.2"
    },
    "escape-html": {
      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
      "version": "1.0.3"
    },
    "etag": {
      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
      "version": "1.8.1"
    },
    "express": {
      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
      "requires": {
        "accepts": "1.3.8",
        "array-flatten": "1.1.1",
        "body-parser": "1.20.1",
        "content-disposition": "0.5.4",
        "content-type": "1.0.4",
        "cookie": "0.5.0",
        "cookie-signature": "1.0.6",
        "debug": "2.6.9",
        "depd": "2.0.0",
        "encodeurl": "1.0.2",
        "escape-html": "1.0.3",
        "etag": "1.8.1",
        "finalhandler": "1.2.0",
        "fresh": "0.5.2",
        "http-errors": "2.0.0",
        "merge-descriptors": "1.0.1",
        "methods": "1.1.2",
        "on-finished": "2.4.1",
        "parseurl": "1.3.3",
        "path-to-regexp": "0.1.7",
        "proxy-addr": "2.0.7",
        "qs": "6.11.0",
        "range-parser": "1.2.1",
        "safe-buffer": "5.2.1",
        "send": "0.18.0",
        "serve-static": "1.15.0",
        "setprototypeof": "1.2.0",
        "statuses": "2.0.1",
        "type-is": "1.6.18",
        "utils-merge": "1.0.1",
        "vary": "1.1.2"
      },
      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
      "version": "4.18.2"
    },
    "finalhandler": {
      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
      "requires": {
        "debug": "2.6.9",
        "encodeurl": "1.0.2",
        "escape-html": "1.0.3",
        "on-finished": "2.4.1",
        "parseurl": "1.3.3",
        "statuses": "2.0.1",
        "unpipe": "1.0.0"
      },
      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
      "version": "1.2.0"
    },
    "forwarded": {
      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
      "version": "0.2.0"
    },
    "fresh": {
      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
      "version": "0.5.2"
    },
    "function-bind": {
      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
      "version": "1.1.1"
    },
    "get-intrinsic": {
      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
      "requires": {
        "function-bind": "1.1.1",
        "has": "1.0.3",
        "has-symbols": "1.0.3"
      },
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
      "version": "1.1.3"
    },
    "has": {
      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
      "requires": {
        "function-bind": "1.1.1"
      },
      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
      "version": "1.0.3"
    },
    "has-symbols": {
      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
      "version": "1.0.3"
    },
    "http-errors": {
      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
      "requires": {
        "depd": "2.0.0",
        "inherits": "2.0.4",
        "setprototypeof": "1.2.0",
        "statuses": "2.0.1",
        "toidentifier": "1.0.1"
      },
      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
      "version": "2.0.0"
    },
    "iconv-lite": {
      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
      "requires": {
        "safer-buffer": "2.1.2"
      },
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
      "version": "0.4.24"
    },
    "inherits": {
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "version": "2.0.4"
    },
    "ipaddr.js": {
      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
      "version": "1.9.1"
    },
    "isarray": {
      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
      "version": "1.0.0"
    },
    "media-typer": {
      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
      "version": "0.3.0"
    },
    "merge-descriptors": {
      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
      "version": "1.0.1"
    },
    "methods": {
      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
      "version": "1.1.2"
    },
    "mime": {
      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
      "version": "1.6.0"
    },
    "mime-db": {
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
      "version": "1.52.0"
    },
    "mime-types": {
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
      "requires": {
        "mime-db": "1.52.0"
      },
      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
      "version": "2.1.35"
    },
    "ms": {
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "version": "2.0.0"
    },
    "mysql": "^2.18.1",
    "negotiator": {
      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
      "version": "0.6.3"
    },
    "object-inspect": {
      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
      "version": "1.12.2"
    },
    "on-finished": {
      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
      "requires": {
        "ee-first": "1.1.1"
      },
      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
      "version": "2.4.1"
    },
    "parseurl": {
      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
      "version": "1.3.3"
    },
    "path-to-regexp": {
      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
      "version": "0.1.7"
    },
    "process-nextick-args": {
      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
      "version": "2.0.1"
    },
    "proxy-addr": {
      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
      "requires": {
        "forwarded": "0.2.0",
        "ipaddr.js": "1.9.1"
      },
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
      "version": "2.0.7"
    },
    "python-shell": {
      "integrity": "sha512-TWeotuxe1auhXa5bGRScxnc2J+0r41NBntSa6RYZtMBLtAEsvCboKrEbW6DvASosWQepVkhZZlT3B5Ei766G+Q==",
      "resolved": "https://registry.npmjs.org/python-shell/-/python-shell-3.0.1.tgz",
      "version": "3.0.1"
    },
    "qs": {
      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
      "requires": {
        "side-channel": "1.0.4"
      },
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
      "version": "6.11.0"
    },
    "range-parser": {
      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
      "version": "1.2.1"
    },
    "raw-body": {
      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
      "requires": {
        "bytes": "3.1.2",
        "http-errors": "2.0.0",
        "iconv-lite": "0.4.24",
        "unpipe": "1.0.0"
      },
      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
      "version": "2.5.1"
    },
    "readable-stream": {
      "dependencies": {
        "safe-buffer": {
          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
          "version": "5.1.2"
        }
      },
      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
      "requires": {
        "core-util-is": "1.0.3",
        "inherits": "2.0.4",
        "isarray": "1.0.0",
        "process-nextick-args": "2.0.1",
        "safe-buffer": "5.1.2",
        "string_decoder": "1.1.1",
        "util-deprecate": "1.0.2"
      },
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
      "version": "2.3.7"
    },
    "safe-buffer": {
      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
      "version": "5.2.1"
    },
    "safer-buffer": {
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
      "version": "2.1.2"
    },
    "send": {
      "dependencies": {
        "ms": {
          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
          "version": "2.1.3"
        }
      },
      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
      "requires": {
        "debug": "2.6.9",
        "depd": "2.0.0",
        "destroy": "1.2.0",
        "encodeurl": "1.0.2",
        "escape-html": "1.0.3",
        "etag": "1.8.1",
        "fresh": "0.5.2",
        "http-errors": "2.0.0",
        "mime": "1.6.0",
        "ms": "2.1.3",
        "on-finished": "2.4.1",
        "range-parser": "1.2.1",
        "statuses": "2.0.1"
      },
      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
      "version": "0.18.0"
    },
    "serve-static": {
      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
      "requires": {
        "encodeurl": "1.0.2",
        "escape-html": "1.0.3",
        "parseurl": "1.3.3",
        "send": "0.18.0"
      },
      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
      "version": "1.15.0"
    },
    "setprototypeof": {
      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
      "version": "1.2.0"
    },
    "side-channel": {
      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
      "requires": {
        "call-bind": "1.0.2",
        "get-intrinsic": "1.1.3",
        "object-inspect": "1.12.2"
      },
      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
      "version": "1.0.4"
    },
    "sqlstring": {
      "integrity": "sha512-ooAzh/7dxIG5+uDik1z/Rd1vli0+38izZhGzSa34FwR7IbelPWCCKSNIl8jlL/F7ERvy8CB2jNeM1E9i9mXMAQ==",
      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
      "version": "2.3.1"
    },
    "statuses": {
      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
      "version": "2.0.1"
    },
    "string_decoder": {
      "dependencies": {
        "safe-buffer": {
          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
          "version": "5.1.2"
        }
      },
      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
      "requires": {
        "safe-buffer": "5.1.2"
      },
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
      "version": "1.1.1"
    },
    "toidentifier": {
      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
      "version": "1.0.1"
    },
    "type-is": {
      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
      "requires": {
        "media-typer": "0.3.0",
        "mime-types": "2.1.35"
      },
      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
      "version": "1.6.18"
    },
    "unpipe": {
      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
      "version": "1.0.0"
    },
    "util-deprecate": {
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "version": "1.0.2"
    },
    "utils-merge": {
      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
      "version": "1.0.1"
    },
    "vary": {
      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
      "version": "1.1.2"
    }
  }
}

3-6 Docker-composeの起動 & コンテナの正常起動確認

(1) Docker Desktop for Windows を起動させる。(これを忘れるとDockerFileが動作しません)

453.jpg

(2) VS Codeを起動し、MEIGARA_SELディレクトリ(rootディレクトリに移動する)に移動する。VS Codeの下欄にTERMINALがあるのでこちらにコマンドを入力すると便利です。

454.jpg

MEGARA_SEL
 docker-compose build

(3)コンテナを生成、正常起動することを確認する。

MEGARA_SEL
 docker-compose up

Docker desktop for windowsを見ると下記のように3つコンテナが作成されている。
441.jpg

それぞれのコンテナについて矢印をクリックし、正常起動することを確認する。
442.jpg

VS CodeのTERMINALにて下記のコマンドでコンテナに入っても良い

MEGARA_SEL
 docker exec -it (コンテナ名) /bin/bash

455.jpg

3-7 frontend(Vue-cli)を起動させる。

Vue-Cliインストール完了後、MIGARA_SEL/fe/app/confog/index.jsのhostを下記のように書き換える。
image.png

コンテナfeの中に入り下記コマンドを起動させる。

app
/app # npm run dev &

 DONE  Compiled successfully in 2429ms                                                                        2:12:02 AM
 I  Your application is running here: http://0.0.0.0:8080

445.jpg

localhost:8080にアクセスし、下記の画面が表示されればフロントエンド(Vue-Cli)は正しくインストールできています。

446.jpg

3-8 mysqlを起動させる。

コンテナを起動させ、コンソールを表示させる。
image.png

mysqlサーバーに接続する。

mysql
sh-4.2# mysql -h 127.0.0.1 -u root -p  #mysqlサーバーに接続する。

mysql> CREATE DATABASE test_db;  #database 「test_db」を作る。
Query OK, 1 row affected (0.00 sec)

mysql> show databases; #存在するdatabaseを表示する。
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| test_database      |
| test_db            |
+--------------------+
6 rows in set (0.01 sec)

mysql> drop database test_db; #database 「test_db」を削除する。

mysql> show databases;  #存在するdatabaseを表示する。
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| test_database      |
+--------------------+
5 rows in set (0.01 sec)


mysql> CREATE DATABASE test_db; #database 「test_db」を作成する。
Query OK, 1 row affected (0.00 sec)

mysql> SHOW TABLES from test_db; #database 「test_db」に存在するtableを表示する。
+-------------------+
| Tables_in_test_db |
+-------------------+
| test_table        |
+-------------------+
1 row in set (0.00 sec)

mysql> SELECT * FROM test_db.test_table;  #database 「test_db」に存在するtable「test_table」の内容を表示する。
+------------+-------+
| hiduke     | value |
+------------+-------+
| 2001-03-12 |     3 |
| 2000-04-05 |     6 |
| 2001-03-27 |     9 |
+------------+-------+
3 rows in set (0.00 sec)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0