README Stock
taiga-tech
2020/10/15 - 最終更新 1年前
Dockerfile PHP Blade Vue Shell

DivingApp

laravel_icon
docker_icon compose_icon aws_icon
node_icon npm_icon vue_icon electron_icon

概要

行ったことのない南国へ旅行に行った際、GoogleMapなどで調べても海が多すぎてどこに行くか迷います、
一年ほど宮古島に住んでた頃に、あまり観光客が知らないようなローカルな海でも魅力的な海が非常にたくさんありました。
そこで写真で海の魅力を伝えつつ、位置情報まで共有できるようなSNSがあるといいなと思い、作成してみました。

AppURL

テストアカウント


サーバサイド

全てAPIで実装しました

  • ログイン機能

    • GoogleOAuth
    • FacebookOAuth
  • プロフィール機能

    • 新規登録時に新規プロフィール作成
    • プロフィール編集機能
      • S3へのプロフィール画像保存
  • 投稿機能

    • 投稿一覧
    • 投稿機能
      • S3への投稿画像保存
    • 投稿編集機能
    • 投稿削除
  • 投稿へのコメント機能

  • 投稿へのGood機能

  • 投稿・プロフィール検索機能

  • 各機能のユニットテスト

サーバーサイドで苦戦したこと

  • Railsでは意識しなかったような実装や、コマンドの動きの違いがたくさんあり、勉強できることが非常にたくさんありました。
  • Laravel8だと他のバージョンと少し記法が違うところがあり、バージョン違いの記事を参照しているとエラーが起きた際の原因特定が非常に困難でした。
    公式リファレンスが非常に読みやすかったので公式にかじりついてました。

フロントエンド

PWA参考画像

for Mac

スクリーンショット 2020-12-21 17 22 37 pwa_mac

for iPhone

pwa_iphone pwa_iphone pwa_iphone

Electron参考画像

electron

フロントエンドで苦戦したこと

RailsではSassなどのコンパイルは自動でしていたらしく、コンパイルが必要なことすら知らなかったので、変更点が反映されなかったときに非常に困惑しました。

インフラ

  • dockerを使用した環境構築
    docker-composeでデプロイをするので、docker-compose.ymlをローカル・本番で使い分けています。
  • ECRへのDockerイメージ保存
  • EFSへのDockerボリューム保存
  • AWS Fargate(サーバレス)へのデプロイ

デプロイ方法

AWSCloud Containers Conference2020で発表されたdocker-compose.ymlを使用してAWS Fargateへデプロイができる"DockerCLIでのECS統合"を使用してデプロイしました
https://docs.docker.com/engine/context/ecs-integration/

デプロイ手順

  • Dockerイメージをビルド
  • aws-cliを使用してECRへログイン
  • aws-cliを使用してECRへ最新イメージをPush
  • docker context use ecsを実行し、docker contextを作成したECS用のcontextに変更する
  • docker compose lsを実行し、コンテナが立ち上がっていないことを確認する
    ECSにコンテナが立ち上がっていたらエラーが出る。
  • docker compose upを実行
  • docker compose psで全てコンテナが立ち上がっていたらデプロイ完了
# Image Build
  % docker compose -f docker-compose.local.yml build

# ECR Login
  % aws ecr get-login-password --profile < profile名 > | docker login --username AWS --password-stdin xxxxxxxxxxxx.dkr.< リージョン >.amazonaws.com

# PHP Image Push
  % docker tag divingapp_php:latest xxxxxxxxxxxx.dkr.< リージョン >.amazonaws.com/< リポジトリ名 >:latest
  % docker push xxxxxxxxxxxx.dkr.< リージョン >.amazonaws.com/< リポジトリ名 >:latest

# Nginx Image Push
  % docker tag divingapp_nginx:latest xxxxxxxxxxxx.dkr.< リージョン >.amazonaws.com/< リポジトリ名 >:latest
  % docker push xxxxxxxxxxxx.dkr.< リージョン >.amazonaws.com/< リポジトリ名 >:latest

# Deploy
  % docker context use ecs
  % docker compose up

画面収録-2020-12-21-21 57 59_1
10分ほどの動画を12倍速&カットしてます


デプロイで苦戦したこと

  • ホストからのDockerボリュームが対応していないのでS3や、EFSなどのストレージに保存するか、イメージに保存するしかない
    • Laravel本体はDockerfileでイメージに保存
    • DBのデータはEFSに保存
  • ECS統合でのデプロイは現状1コンテナに付き1つのボリュームしか対応していない様子
    Docker公式Issuesにもあったので変更があるかも。これと似たような現象?
  • docker-compose.ymlの環境変数 を読み取らない
    env_fileでまとめて定義することで解決
  • デプロイ後にコンテナへアクセス(php artisan migrateなど)が出来ない
    sshは推薦されていない
    ※ 2021/3/31追記
    AWSのアップデートで、ECS Execが公開されて、コンテナへアクセスが可能になったようなので、今後試してみたいです。
    https://aws.amazon.com/jp/about-aws/whats-new/2021/03/amazon-ecs-now-allows-you-to-execute-commands-in-a-container-running-on-amazon-ec2-or-aws-fargate/
  • IPアドレスが変動する

今回初めてECSを触り、さらにDockerの最新デプロイ方法を試してみたので、公式リファレンスしか頼るところがなかったので、非常に苦しいこともありましたが、その分issuesなどを見ながら解決する方法を知れたので非常に勉強になりました。


CricleCIの動き

Master Brunch 以外

  • テスト
  • テスト結果のSlack通知

Master Brunch

  • テスト
  • テスト結果のSlack通知
  • ECR Push
  • ECR Push結果のSlack通知
  • ECS Deploy
  • ECS Deploy結果のSlack通知

ECRへのPushは成功したが、必要な物がイメージに含まれてなかったので保留しました、現在調査中

Docker ECS統合(docker compose up)も動かなかったので、完全自動化に向けて調査中


Slack通知の参考画像

Slack通知の参考画像


開発環境

language Version
Docker DeskTop 3.0.1
Docker Engine 20.10.0
docker-compose 1.27.4
aws-cli 2.1.1
PHP 7.4.13
Laravel 8.11.2
composer 2.0.8
Node 15.4.0
npm 7.0.15
Vue 2.6.12

インストール方法

# Git Clone
  % git clone https://github.com/taiga-tech/divingapp.git
  % cd divingapp

# Docker Build時の環境変数設置
  % cp .docker-compose.env .env

# Laravel内の環境変数設置
  % cp ./src/.env.example ./src/.env

# Docker setup
  % docker-compose -f docker-compose.local.yml build
  % docker-compose -f docker-compose.local.yml up -d

# Laravel setup
  % docker-compose -f docker-compose.local.yml run --rm php php artisan migrate

# アセットコンパイル
  % docker-compose -f docker-compose.local.yml run --rm php npm install
  % docker-compose -f docker-compose.local.yml run --rm php npm run dev

DB設計

ER図

ER図

テーブル

Users

Column Type Options
provider_id string unique, nullable
provider_name string unique, nullable
userid string nullable
email string unique
password string nullable
Association
  • hasOne->profile
  • hasMany->posts
  • hasMany->comments
  • hasMany->goods

profile

Column Type Options
name string
image string
comment string nullable
user_id foreignId unique
Association
  • bolongsTo->user
  • hasMany->posts
  • hasMany->comments
  • hasMany->goods

posts

Column Type Options
text string
place string nullable
lat double nullable
lng double nullable
user_id foreignId
profile_id foreignId
Association
  • bolongsTo->user
  • bolongsTo->profile
  • hasMany->post_images
  • hasMany->comments
  • hasMany->goods

post_images

Column Type Options
path string
post_id foreignId
Association
  • bolongsTo->post

post_comments

Column Type Options
content
post_id foreignId
user_id foreignId
profile_id foreignId
Association
  • belongsTo->post
  • belongsTo->user
  • belongsTo->profile

post_goods

Column Type Options
boolean
post_id foreignId
user_id foreignId
profile_id foreignId
Association
  • belongsTo->post
  • belongsTo->user
  • belongsTo->profile

参考資料