0からのスタート

de:code2019に参加した際、セッション「がんばらない Vue.js 〜 Visual Studio Code + TypeScript でクールに Vue.js の開発をしよう!」を聞いてwebアプリがこんなにも簡単に作れるのかと思い、javascript完全な初心者がwebアプリを作るまでにやったことを記録した、備忘録的なページです。

今更ながら、Dockerも使ったことがなかったので勉強ついでに開発環境はDockerを使って構築すること。ある程度動かせる状態まで環境が出来上がってきたんだけど、なんせ完全初心者。やり方が正しいかもいまいち怪しいので、Qiitaに投稿して指摘してもらおうと思い書いています！

Qiita投稿も初めてなので完全手探り状態・・・。

やろうとしていること

よくあるTodo管理のWebアプリ

Vue.jsつかってフロントエンドを開発
DBはmysqlを使用（最終的にはFirebase使いたい）
バックエンドの処理はPHPで行う

上記の開発環境をDocker-compose使って構築してみよう！

フォルダ構成

├── docker-compose.yml
├── dockerfile
├── nginx
│   └── nginx.conf
├── php
│   ├── Dockerfile
│   └── php.ini
├── mysql
│   └── data
└── www
    └── html
        └── index.php

いろいろなサイトを参考にさせてもらっているので、フォルダ構成は大分乱れていると思います。もう少し理解が深まってきたらすっきりさせたいな・・・。

##各種設定

./Dockerfile

FROM node:8.15.0-alpine
ENV NODE_ENV=development

WORKDIR /app

RUN apk update && \
    npm install -g npm && \
    npm install -g @vue/cli

CMD ["/bin/sh"]

php/Dockerfile

FROM php:7.2-fpm
COPY php.ini /usr/local/etc/php/

./docker-compose.yml

docker-compose.yml

version: '3'
services:
  web:
    build: .
    ports:
      - 1234:8080
    volumes:
      - .:/app
    stdin_open: true
    tty: true

  nginx:
    image: nginx:latest
    ports:
      - 8080:80
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
      - ./www/html:/var/www/html
    depends_on:
      - php

  php:
    build: ./php
    volumes:
      - ./www/html:/var/www/html
    depends_on:
      - db
  
  db:
    image: mysql:5.7
    ports:
      - 13306:3306
    volumes:
      - ./mysql/data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: secret
  
  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    ports:
      - 8888:80
    depends_on:
      - db

nginx/nginx.conf

nginx.conf

server {
    listen 80;
    server_name _;

    root  /var/www/html;
    index index.php;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_pass php:9000;
        fastcgi_index index.php;    
        fastcgi_param SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include       fastcgi_params;
    }
}

設定はこんな感じ。上記のフォルダ構成でそれぞれの設定ファイルを準備すればどこでも同じ開発環境が作れるのかなーといった認識。上記の準備が整ったら、docker-compose.ymlがある場所で

docker-compose build
docker-compose up -d

でコンテナが作成され

docker exec -it web /bin/sh
# vue create <project-name>
# cd <project-name>
# npm run serve

でとりあえずvueの動作確認が可能になる（localhost:1234）

不明点

今の設定だとwebコンテナとnginxコンテナの２つウェブサーバ的なコンテナができているけどひとつにコンテナにまとめなくてもいいのかよく分かっていません。コンテナを仮想サーバみたいなものと考えていること自体がそもそも間違ってるんですかね。

もう少しいろんなサイト参考にして理解を深めていきたいと思います。

なかなか本題のVue.js使った開発までたどり着けなくてもどかしい・・・。