LoginSignup
1
2

More than 3 years have passed since last update.

初めてのWEBアプリ作成(1)

Last updated at Posted at 2020-02-28

はじめに

 初めまして、RHEMS技術研究室所属の白瀬です。
今回は初めてWEBアプリ作成としてTrello風ToDoリストを作成するまでの工程を投稿していこうと思います。間違った点がありましたらご指摘いただけると嬉しいです。
環境はmacのdocker,iTerms2を使用しています。

コンテナ構築

 nginx・PHP・MYSQLのコンテナの構築をdockerで行いました。!
今回はnginxとPHPの連携させずに作って行きます。
(無題).png

全体のディレクトリ

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

コマンド

docker-compose.yml

version: '3'
services:
  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


nginx.conf

server {
    listen 80;
    server_name _;

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

    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;
    }
}

Dockerfile

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

php.ini

date.timezone = "Asia/Tokyo"

index.php

<h1>Hello WORLD</h1>

すべて書き終えた後docker-compose.ymlがあるディレクトリまで移動し下記のコマンドを実行

docker-compose up -d

実行し終えたらlocalホスト(http://localhost:8080/)に接続して画像のようになりました。
スクリーンショット 2020-02-28 16.44.01.png
残りはこれをToDoリストように書き換えていくだけだと思っています。

あとがき

自分がWEBアプリを作ってみてくれ言われ何をしたらいいか分からずdocker trello 作成などといった検索をかけていましたが的はずれなことをしていました。
誰でもはじめはわからないことばかりなので皆さんも人に聞きましょう。
自分は4日ほど悩んでました…

1
2
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
1
2