- 投稿日:2019-10-26T17:31:49+09:00
【サルが書く】LaraDockでLaravelの環境構築やってみよう編
わきゃ
環境構築がこの世で一番難しいと思っています。
今回はLaraDockを使用して、Laravelの開発環境構築を行っていきます。
※基本的にMacでの環境構築方法を説明していきます。LaraDockとは?
LaraDockとは、仮想化ソフトウェア「Docker」上で動作する、オープンソースの開発環境です。
https://laradock.io/Dockerとは、コンテナと呼ばれる仮想環境を作ることができるものです。これまでの仮想環境に比べると動作が軽く、環境の設定等をコードで管理できるため、環境の再現性が高いです。
LaraDockはLaravelの動作に必要な環境を構築するコードを、GitHubから引っ張ってきてそのコードを元にDockerが環境を構築してくれます。
LaraDockには以下の機能が含まれています。
- nginx (webサーバー)
- php-fpm (phpの実行環境)
- MySQL (DB管理システム)
- workspace (Laravelの開発に必要な環境がまとまっているもの)
- phpMyAdmin (MySQLをGUIで操作できるもの)
Laravelの環境を構築していくわよ
Laradockのの導入には
Dockerとgitのインストールが必要です。1. Dockerのインストール
DockerHubにアクセス会員登録を行う。
https://hub.docker.com/会員登録後に、トップページにある
Get started with Docker Desktopのリンクをクリックし、Dockerをダウンロードします。ダウンロードファイルを展開し、指示通りにインストールを進めます。インストールが完了したらDockerを起動した状態にしておきましょう。
2. gitのインストール
Macの場合Xcodeがインストールがされていればgitのインストールがされていると思います。
以下のコマンドをターミナルで叩いてみましょう$ git --version git version 2.23.0バージョン情報が出ていればgitはすでにインストールされています。
バージョンが古い場合があるので、最新版のgitをインストールしても良いと思います。
https://git-scm.com/downloads3. LaraDockのインストール
# laradock_testという名前でディレクトリを作ります bash-3.2$ mkdir laradock_test # cd でlaradock_testに移動 bash-3.2$ cd laradock_test/ # git cloneでlaaradockのソースをダウンロードします。 bash-3.2$ git clone git@github.com:laradock/laradock.git Cloning into 'laradock'... remote: Enumerating objects: 32, done. remote: Counting objects: 100% (32/32), done. remote: Compressing objects: 100% (30/30), done. remote: Total 9337 (delta 10), reused 7 (delta 0), pack-reused 9305 Receiving objects: 100% (9337/9337), 8.66 MiB | 4.45 MiB/s, done. Resolving deltas: 100% (5002/5002), done. # lsでディレクトリの中身を確認するとlaaradockディレクトリが確認できます。 bash-3.2$ ls laradock # cdでlaradockディレクトリに移動しましょう。 bash-3.2$ cd laradock/4. コンテナの初期化をやる
コンテナ初期化の前に、設定ファイルを作成する必要があります。
# 元のソースにあるenv-exampleを.envとしてコピーする bash-3.2$ cp env-example .envコンテナの初期化を行ってきましょう。
# コンテナの初期化行います。ダウンロードや設定を行うのでしばらく待ちます。 bash-3.2$ docker-compose up -d nginx mysql workspace phpmyadmin初期化が終わると自動的にコンテナが起動状態になっています。
docker psコマンドを実行すると起動中のコンテナを確認することができます。CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 09b6b2e0f3e8 laradock_nginx "/bin/bash /opt/star…" 28 seconds ago Up 26 seconds 0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp laradock_nginx_1 7dcee16a8564 laradock_php-fpm "docker-php-entrypoi…" 29 seconds ago Up 27 seconds 9000/tcp laradock_php-fpm_1 7f049605423b laradock_phpmyadmin "/docker-entrypoint.…" 31 seconds ago Up 29 seconds 0.0.0.0:8080->80/tcp laradock_phpmyadmin_1 38a2d3135a8d laradock_workspace "/sbin/my_init" 31 seconds ago Up 28 seconds 0.0.0.0:2222->22/tcp laradock_workspace_1 018fa8e3cdde laradock_mysql "docker-entrypoint.s…" 32 seconds ago Up 30 seconds 0.0.0.0:3306->3306/tcp, 33060/tcp laradock_mysql_1 59ec053e8585 docker:dind "dockerd-entrypoint.…" 32 seconds ago Up 30 seconds 2375-2376/tcp laradock_docker-in-docker_16つのコンテナが起動していることが確認できます。
5. Laravelのプロジェクトを作っていこう
先程、初期化を行ったworkspaceが作業を行うコンテナなのでそこへ接続(ログイン)を行います。
ログインはデフォルトで用意されているlaradockで行います。docker-compose exec --user=laradock workspace bashログインが完了すると、
/var/wwwディレクトリに入るので、下記のcomposerコマンドを叩いて新規プロジェクトを作成します。
このcreateコマンドを打つことによって、必要なパッケージは自動的にインストールされ、laravelのアプリケーションが作成されます。
コマンド内のtest_appがアプリケーション名になります。composer create-project laravel/laravel test_app --prefer-dist "5.5.*"アプリケーションは作成されましたが、まだ
http://localhostではアクセスできません。6. 最後にホストに設定をしなくてはならない......!!
一旦、workspaceコンテナから出ます。
laradock@38a2d3135a8d:/var/www$ exit exitそこで先程の
.envファイルを編集します。vi .env ########################################################### ###################### General Setup ###################### ########################################################### ### Paths ################################################# # Point to the path of your applications code on your host # ここを先程作成したアプリケーション名に書き換える APP_CODE_PATH_HOST=../ ↓ APP_CODE_PATH_HOST=../test_app ..(略)書き換えただけでは、設定が反映されないので、コンテナの再起動を行います。
# 停止 bash-3.2$ docker-compose stop Stopping laradock_nginx_1 ... done Stopping laradock_php-fpm_1 ... done Stopping laradock_phpmyadmin_1 ... done Stopping laradock_workspace_1 ... done Stopping laradock_mysql_1 ... done Stopping laradock_docker-in-docker_1 ... done # 起動 bash-3.2$ docker-compose up -d nginx mysql Starting laradock_mysql_1 ... done Recreating laradock_docker-in-docker_1 ... done Recreating laradock_workspace_1 ... done Recreating laradock_php-fpm_1 ... done Recreating laradock_nginx_1 ... doneここで
http://localhostにアクセスしてみましょう。
テストページが表示されるはずです!
環境ができた!いろいろためしてみよう!
7. 参考文献
- 投稿日:2019-10-26T16:08:02+09:00
Laravelで画像投稿機能を実装する
Laravelで画像投稿機能を実装します。具体的には以下のような機能を実装します。
上記の写真で画像ファイルを選択し、フォームにコメントを入力後、投稿ボタンを押すと、
上記の写真のように、画像とコメントを表示する機能を実装します。
開発環境
Laravel:5.5.46
MYSQL:5.5.62
PHP:7.2.17
画像アップロードサーバ:AmazonS3マイグレーションファイル作成
画像とコメントを保存するためのテーブルpostsを作成します。ターミナルで以下のコマンドを実行しマイグレーションファイルを作成します。
$ php artisan make:migration _create_posts_table --create=posts作成したマイグレーションファイルを編集します。
database/migrations/2019_10_22_220848_create_posts_table.php<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreatePostsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('posts', function (Blueprint $table) { $table->increments('id'); $table->string('image_file_name',100);//追加 $table->string('image_title',100);//追加 $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('posts'); } }ターミナルで以下のコマンドを入力しマイグレーションを実行します。
$ php artisan migrateモデル
Postモデルを作成します。ターミナルで以下のコマンドを実行しモデルを作成します。
$ php artisan make:model Post作成したモデルを編集します。
app/Post.php<?php namespace App; use Illuminate\Database\Eloquent\Model; class Post extends Model { //後にcreate()メソッドで保存するカラムを指定 protected $fillable = [ 'image_file_name', 'image_title', ]; }ルータ
ルータを記述します。ページを表示したときと、投稿ボタンを押したときのルーティングを記述します。
routes/web.phpRoute::post('upload', 'PostsController@upload')->name('upload'); Route::get('/', 'PostsController@index');コントローラ
ターミナルで以下のコマンドを実行しコントローラを作成します。
$ php artisan make:controller PostsControllerweb.phpに記述した各ルーティングに対応したアクションを記述します。
/app/Http/Controllers/PostsController.php<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Foundation\Auth\User; use App\Post; use Storage; use Illuminate\Support\Facades\Validator; class PostsController extends Controller { //画像およびコメントアップロード public function upload(Request $request){ //Validatorファサードのmakeメソッドの第1引数は、バリデーションを行うデータ。 //第2引数はそのデータに適用するバリデーションルール $validator = Validator::make($request->all(), [ 'file' => 'required|max:10240|mimes:jpeg,gif,png', 'comment' => 'required|max:191' ]); //上記のバリデーションがエラーの場合、ビューにバリデーション情報を渡す if ($validator->fails()){ return back()->withInput()->withErrors($validator); } //s3に画像を保存。第一引数はs3のディレクトリ。第二引数は保存するファイル。 //第三引数はファイルの公開設定。 $file = $request->file('file'); $path = Storage::disk('s3')->putFile('/', $file, 'public'); //カラムに画像のパスとタイトルを保存 Post::create([ 'image_file_name' => $path, 'image_title' => $request->comment ]); return redirect('/'); } //ページ表示 public function index(){ $posts = \App\Post::all(); $data = [ 'posts' => $posts, ]; return view('welcome',$data); } }ターミナルで以下のコマンドを入力し、ビューでFormファサードを使用できるようにします。
$ composer require "laravelcollective/html":"5.5.*"AWSの S3にアクセスするライブラリを導入します。
$ composer require league/flysystem-aws-s3-v3.envで環境変数を設定します。
.envAWS_S3_KEY=[your Access Key ID] AWS_S3_SECRET=[your Secret Key] AWS_S3_REGION=[your region] AWS_S3_BUCKET=[your backet]ビュー
resources/viewsに最初からあるwelcome.blade.phpを編集します。
resources/views/welcome.blade.php//投稿フォーム {!! Form::open(['route' => 'upload', 'method' => 'post','files' => true]) !!} <div class="form-group"> {!! Form::label('file', '画像投稿', ['class' => 'control-label']) !!} {!! Form::file('file') !!} </div> <div class="form-group m-0"> {!! Form::label('textarea', '投稿コメント', ['class' => 'control-label']) !!} {!! Form::textarea('comment',null,['class' => 'form-control']) !!} </div> <div class="form-group text-center"> {!! Form::submit('投稿', ['class' => 'btn btn-primary my-2']) !!} </div> {!! Form::close() !!} //画像とコメントをすべて表示 @foreach($posts as $post) <div class="card-header text-center"> <img src= {{ Storage::disk('s3')->url($post->image_file_name) }} alt="" width=250px height=250px></a> </div> <div class="card-body p-1"> <span class="card-title">{{ $post->image_title }}</span> </div> @endforeach
- 投稿日:2019-10-26T13:13:33+09:00
【Docker for Windows】Laradock環境をささっと構築する
LaradockでLaravel開発環境を整える
今回チームのアプリ制作でLaradockを使って開発をすることになったので
その時にハマったことなどを備忘録的にまとめていきたいと思います
前提環境
- Windows 10 Pro(Hyper-V)
- Docker for Windows
- Postgres(DB)
- Nginx(Web Server)
- Git
※Docker for windowsはWindows 10 Proじゃないと使えないので注意が必要です
Laradockをgit clone
好きなディレクトリへ移動してLaradockをgit cloneします
cd yourProject //移動したらgit cloneをする git clone https://github.com/laradock/laradock.git
現段階でのディレクトリ構造は以下の通りです
yourProject ┗━ Laradockできていることが確認出来たら.envファイルを作成します
作成というよりファイル名を変えてコピーするだけなのでコマンドを入力するだけです
cp env-example .envコマンドを入力したら.envファイルが作成されます
確認したい場合はエクスプローラーから開いて確認することができますLaradock .envの設定
変更するコード
APP_CODE_PATH_HOST=../APP_NAME/ //8行目あたり COMPOSE_PROJECT_NAME=APP_NAME //36行目あたり ※APP_NAMEはおのおの名前を付けてください特に二行目のcompose_project_nemeを変更は忘れないようにしましょう
ここを設定しておくとコンテナ被りを避けることができます
あと290行目付近にPostgresの設定が書かれているところがあるのでDB名とユーザー名、パスワードをメモか何かしておきましょう
あとでLaravel側の.envの書き換えで使います
Dockerの環境構築
まずDockerアプリを起動します
起動するまでしばし待ちましょう
cd laradock
起動が完了したらLaradockフォルダに移動してdockerのコンテナを立ち上げます
コンテナとは?
コンテナ型仮想化はOSの上に“コンテナ”と呼ばれる仮想的なユーザー空間を提供します。ユーザー空間とは、ユーザーがアプリケーションを実行するための、
ひと揃いのリソースが提供される空間です。通常は1つのOSの上に1つのユーザー空間があるのですが、コンテナ型仮想化では1つのOSの>上で仮想的なユーザー空間であるコンテナを複数提供できます。
以下をPoweShellに入力
docker-compose up -d nginx postgres
途中赤字の文字とか出てきますが気にせず完了するまで待ちます
ただ、はじめて構築するときはそこそこ時間がかかるので気長に待ちます
完了した後にLaradockのワークスペースに入り込みます
PowerShellで以下の入力します
docker exec -it APP_NAME_workplace bashroot@------:/var/wwwと出たらワークスペースに入ることができています
エラーが出た場合に確認すること
- Dockerが起動しているか
- カレントディレクトリ(今いるディレクトリ)がLaradockかどうか
ワークスペースに入り込んだらlaradockにあるパッケージを最新のバージョンに更新していきます
これもコマンドを入力するだけOKです
apt-get update入力したら完了までしばらく待ちます
完了したらLaravelをインストールしていきます
新規プロジェクトを作成する方法
ワークスペースに入っている状態で
composer create-project laravel/laravel APP_NAMEそして、次にDockerの時と同じように.envファイルをコピーして作成していきます
cp .env.example .env.envファイルは環境を設定するためのファイルなのでないとエラーが出てしまいます
なのでDockerの時もそうですが忘れずに作成するようにしましょう
作成し終わったら、次はcomposerをアップデートします
今の状態だとvenderファイルが存在しません
venderファイルというのはcomposerの依存設定を置くところと認識したらOKだと思いますcomposer update //ワークスペース内でちなみに現在のディレクトリはこんな感じです
yourProject ┗━ APP_NAME ┗━ Laradock読むといいかも:Laravelのディレクトリ構造について学ぶ
Laravel .envの設定
今回はPostgresを使うのでその箇所だけを書き換えます
たとえばこんな感じ
DB_CONNECTION=pgsql DB_HOST=postgres DB_PORT=5432 //ここから↓はLaradockの.envにかかれてた内容を書く DB_DATABASE=DB_NAME DB_USERNAME=USER_NAME DB_PASSWORD=PASSWORD上から3行はコピペしちゃっても大丈夫かと思います
下から3行はLaradockに書いてあったとおりに書いていきましょう
最後にdocker-composeでコンテナをリビルドします
docker-compose up -d --build nginx postgresリビルドが完了したら
http://localhost
でLaravelのウェルカムページが表示されるはずここで表示されないエラーが出る場合はlaradockの側の.envファイルでミスがあります。
詳しくは後日別記事で書きますのでお待ちください。以上がDocker for windowsを使ったLaradock環境構築でした、ありがとうございました。
僕がおせわになった記事たち
LaradockでLaravel環境構築【手順書】
Windows10でLaradockを使ってLaravel 5.5環境を作る
docker for windowsを使ってlaravelの開発環境を作る
- 投稿日:2019-10-26T12:40:52+09:00
【Docker for Windows】Laradock環境をささっと構築する
LaradockでLaravel開発環境を整える
今回チームのアプリ制作でLaradockを使って開発をすることになったので
その時にハマったことなどを備忘録的にまとめていきたいと思います
前提環境
- Windows 10 Pro(Hyper-V)
- Docker for Windows
- Postgres(DB)
- Nginx(Web Server)
- Git
※Docker for windowsはWindows 10 Proじゃないと使えないので注意が必要です
Laradockをgit clone
好きなディレクトリへ移動してLaradockをgit cloneします
cd yourProject //移動したらgit cloneをする git clone https://github.com/laradock/laradock.git
現段階でのディレクトリ構造は以下の通りです
yourProject ┗━ Laradockできていることが確認出来たら.envファイルを作成します
作成というよりファイル名を変えてコピーするだけなのでコマンドを入力するだけです
cp env-example .envコマンドを入力したら.envファイルが作成されます
確認したい場合はエクスプローラーから開いて確認することができますDockerの環境構築
まずDockerアプリを起動します
今いるディレクトリはyourProjectのはずなのでlaradockフォルダに移動
cd laradock
移動したらdockerのコンテナを立ち上げる準備をしていきます
コンテナとは?
コンテナ型仮想化はOSの上に“コンテナ”と呼ばれる仮想的なユーザー空間を提供します。ユーザー空間とは、ユーザーがアプリケーションを実行するための、
ひと揃いのリソースが提供される空間です。通常は1つのOSの上に1つのユーザー空間があるのですが、コンテナ型仮想化では1つのOSの>上で仮想的なユーザー空間であるコンテナを複数提供できます。
以下をPoweShellに入力
docker-compose up -d nginx postgres
途中赤字の文字とか出てきますが気にせず完了するまで待ちます
ただ、はじめて構築するときはそこそこ時間がかかるので気長に待ちます
完了した後にLaradockのワークスペースに入り込みます
PowerShellで以下の入力します
docker exec -it youProject_workplace bashroot@------:/var/wwwと出たらワークスペースに入ることができています
エラーが出る場合に確認すること
- Dockerが起動しているか
- カレントディレクトリ(今いるディレクトリ)がLaradockかどうか
ワークスペースに入り込んだらlaradockにあるパッケージを最新のバージョンに更新していきます
これもコマンドを入力するだけOKです
apt-get update入力したら完了までしばらく待ちます
完了したらLaravelをインストールしていきます
新規プロジェクトを作成する方法
ワークスペースに入っている状態で
composer create-project laravel/laravel APP_NAMEAPP_NAMEはあなたのプロジェクトの名前を入力してください
そして、次にDockerの時と同じように.envファイルをコピーして作成していきます
cp .env.example .env.envファイルは環境を設定するためのファイルなのでないとエラーが出てしまいます
なのでDockerの時もそうですが忘れずに作成するようにしましょう
作成し終わったら、次はcomposerをアップデートします
今の状態だとvenderファイルが存在しません
venderファイルというのはcomposerの依存設定を置くところと認識したらOKだと思いますちなみに現在のディレクトリはこんな感じです
yourProject ┗━ APP_NAME ┗━ Laradock
.envファイルを整えていく
これが最後の工程になります
.envファイルをいじってやらないとLaravelとLaradockの間で差異が出てしまってうまく起動することができません
ではさっそくいじっていきましょう
Laradock .envの設定
変更するコード
APP_CODE_PATH_HOST=../APP_NAME/ //8行目あたり COMPOSE_PROJECT_NAME=APP_NAME //36行目あたり ※APP_NAMEはあなたのプロジェクト名です特に二行目のcompose_project_nemeを変更は忘れないようにしましょう
ここを設定しておくとコンテナ被りを避けることができます
あと290行目付近にPostgresの設定が書かれているところがあるのでDB名とユーザー名、パスワードをメモか何かしておきましょう
あとでLaravel側の.envの書き換えで使います
Laravel .envの設定
今回はPostgresを使うのでその箇所だけを書き換えます
たとえばこんな感じ
DB_CONNECTION=pgsql DB_HOST=postgres DB_PORT=5432 //ここから↓はLaradockの.envにかかれてた内容を書く DB_DATABASE=DB_NAME DB_USERNAME=USER_NAME DB_PASSWORD=PASSWORD上から3行はコピペしちゃっても大丈夫かと思います
下から3行はLaradockに書いてあったとおりに書いていきましょう
最後にdocker-composeでコンテナをリビルドします
docker-compose up -d --build nginx postgresリビルドが完了したら
http://localhost
でLaravelのウェルカムページが表示されるはずここで表示されないエラーが出る場合はlaradockの側の.envファイルでミスがあります。
詳しくは後日別記事で書きますのでお待ちください。以上がDocker for windowsを使ったLaradock環境構築でした、ありがとうございました。
僕がおせわになった記事たち
LaradockでLaravel環境構築【手順書】
Windows10でLaradockを使ってLaravel 5.5環境を作る
docker for windowsを使ってlaravelの開発環境を作る
- 投稿日:2019-10-26T12:18:30+09:00
Laravel のFTP接続で FTP_USEPASVADDRESS を false にする
経緯
Laravel の Storage ファサードを使ってFTP操作をしようとした際に以下のようなエラーが出た。
>>> Storage::disk('ftp')->files() PHP Warning: ftp_rawlist(): php_connect_nonb() failed: No error (0) in /*****/vendor/league/flysystem/src/Adapter/Ftp.php on line 570この記事を参考にして調べたところ、自分が接続しようとしている環境でも
ftp_set_option()でFTP_USEPASVADDRESSをfalseにすれば正常に動作する事が分かった。Laravel での設定方法
Laravel 公式ドキュメントの設定例 にはそれらしいオプションは見当たらなかったが、ソースを追ったところ設定している箇所を発見し、
ignorePassiveAddressというオプションがある事が分かった。これを
config/filesystems.phpに設定してやるとFTP_USEPASVADDRESSが設定され、FTP操作ができるようになった。'ftp' => [ 'driver' => 'ftp', 'host' => 'ftp.example.com', 'username' => 'your-username', 'password' => 'your-password', 'passive' => true, 'ssl' => true, 'ignorePassiveAddress' => true, // FTP_USEPASVADDRESS を false にするには true を指定する ],おまけ
後から知ったが、League\Flysystem のドキュメント のサンプルコードには
ignorePassiveAddressの記述があった。その他設定可能なオプションを調べたい場合は
\League\Flysystem\Adapter\Ftp::$configurableを参照すると良い。protected $configurable = [ 'host', 'port', 'username', 'password', 'ssl', 'timeout', 'root', 'permPrivate', 'permPublic', 'passive', 'transferMode', 'systemType', 'ignorePassiveAddress', 'recurseManually', 'utf8', 'enableTimestampsOnUnixListings', ];
- 投稿日:2019-10-26T02:16:55+09:00
ER図から『Laravel Migrationファイル生成』可能なツールを4日で作った
4日で作った『ER diagram Quick』 Laravel Migration生成可能
◇ツール名: ER diagram Quick
4日で作成したER図をWeb上で作成管理してLaravelのMigrationを生成するツールです。
『Laravel Migrationファイル生成』機能は、まだβ版ですがER図で設計したあとにベーステンプレートのMigrationを作成するだけでも(全て書かなくて良いので)捗るはずです。見た目など、細かい部分などはだいぶ見ないで進めましたが、現時点の進捗としては満足してます。◇技術
- HTML / CSS / Vanilla JS
- Firebase / WWW SQL Designer
- PHP /Laravel5.5(Migration検証)
リンク: https://venezia-works.com/sql/
ER図をかいたら保存!!
作成したER図はCloud(Firebase) or ブラウザに保存
Migrationファイルができあがるとこんな感じ
早く開発できたのには理由がある
- API(Firebase)を利用できたこと
- WWW SQL Designer を利用できたこと(1日コード眺めるくらいでどのような事をやってるかわかったので、必要な修正には時間がかからなかった。)
- Laravelを少し前に触ってたので、Migrationのドキュメントを読んでいた。そのため、全てではないがER図から生成できるカラム等の調査にも時間がかからなかった(はず)。
- 作るのが楽しい
今後は
一気に作って少し疲れたので、少しずつ改修していこうと思います。
必要とされるかまだわかりませんが、今後も良いものにしていきたいです。
- 投稿日:2019-10-26T02:16:55+09:00
ER図から『Laravel Migrationファイル生成』可能なツールを4日で作ってみた
4日で作った『ER diagram Quick』 Laravel Migration生成可能
◇ツール名: ER diagram Quick
4日で作成したER図をWeb上で作成管理してLaravelのMigrationを生成するツールです。
『Laravel Migrationファイル生成』機能は、まだβ版ですがER図で設計したあとにベーステンプレートのMigrationを作成するだけでも、全て書かなくて良いので捗るはずです。
見た目など、細かい部分などはだいぶ見ないで進めましたが、現時点の進捗としては満足してます。(1日は子供をスカイツリーに連れていったので・・・もう少し少ないかも)
少しでも役に立てば幸いです。リンク: https://venezia-works.com/sql/
ER図をかいたら保存!!
作成したER図はCloud(Firebase) or ブラウザに保存
Migrationファイルができあがると
Zip圧縮されて全てのMigrationファイルが作成されます。
中身はみなさんご存知の以下のようなCODEです。早く開発できたのには理由がある
- API(Firebase)を利用できたこと
- WWW SQL Designer を利用できたこと(1日コード眺めるくらいでどのような事をやってるかわかったので、必要な修正には時間がかからなかった。)
- Laravelを少し前に触ってたので、Migrationのドキュメントを読んでいた。そのため、全てではないがER図から生成できるカラムや記法等の調査にも時間がかからなかった。
- 作るのが楽しい
◇使用した技術
- HTML / CSS / Vanilla JS
- Firebase / WWW SQL Designer
- PHP / Laravel5.5(Migration検証) / MAMP
今後は
一気に作って少し疲れたので、少しずつ改修していこうと思います。
必要とされるかまだわかりませんが、今後も良いものにしていきたいです。
いや、かなり便利なはずなので、是非使ってほしい(^^)
- 投稿日:2019-10-26T02:16:55+09:00
ER図からLaravelのMigrationを生成するツール
『ER diagram Quick』は Laravel Migration生成可能ツールでもある
◇ツール名: ER diagram Quick
実は4日間で作成したER図をWeb上で作成管理してLaravelのMigrationを生成するツールです。たった4日間ですが、アウトプットの量はハンパないので、こういうのは慣れています。
『Laravel Migrationファイル生成』機能は、まだβ版ですがER図で設計したあとにベーステンプレートのMigrationを作成するだけでも、全て書かなくて良いので捗るはずです。開発の進めかたですが、個人としては「アウトプット・ファースト」を最優先にしています。
大体いつもα版(目的を満たす機能、動作ができてる最低限の状態)を一週間と決めて開発しています。
そこを軸に、大事な目的にあった機能を先行して作り込み、機能動作優先、見た目など細かい部分などはだいぶ見ないで進めました。現時点の進捗としては満足してます。いつもデザインはリリース後に調整していくので、このスピード感を出すためには、この方法が良いと思っています(まずは動くが優先、モチベーションも保ちやすい)。
少しでも役に立てば幸いです。◇サイトデザインは少しだけLaravelのサイトカラーを入れました(^^)
リンク: https://venezia-works.com/sql/
ER図をかいたら保存!!
作成したER図はCloud(Firebase) or ブラウザに保存
Migrationファイルができあがると
Zip圧縮されて全てのMigrationファイルが作成されます。
中身はみなさんご存知の以下のようなCODEです。早く開発できたのには理由がある
- API(Firebase)を利用できたこと
- WWW SQL Designer を利用できたこと(1日コード眺めるくらいでどのような事をやってるかわかったので、必要な修正には時間がかからなかった。)
- Laravelを少し前に触ってたので、Migrationのドキュメントを読んでいた。そのため、全てではないがER図から生成できるカラムや記法等の調査にも時間がかからなかった。
- 作るのが楽しい
◇使用した技術
- HTML / CSS / Vanilla JS
- PWA (ChcheAPI, ServiceWorker, Manifest)
- Firebase / WWWSQLDesigner
- PHP7.2 / Laravel5.5(Migration検証) / MAMP
- ツール: PHPStorm、GoogleChrome
Chrome Auditsの結果 (画像とFirebaseJS外部ファイルがPerfomanceに影響してるようですが十分ですね)
今後は
一気に作って少し疲れたので、少しずつ改修していこうと思います。
必要とされるかまだわかりませんが、今後も良いものにしていきたいです。
いや、かなり便利なはずなので、是非使ってほしい(^^)
- 投稿日:2019-10-26T01:59:23+09:00
未経験からweb系プログラマーになるための独学履歴~アプリケーション作成を体系的に学ぶ・Laravel導入編~
はじめに
ここまでチュートリアルやPHPについての基礎的な勉強を積み重ねてきたが、それぞれ個々としての理解に留まり、それらを使った実際のWebアプリケーションの実装の流れの理解には未だ乏しいので、ここから就活に使う成果物の作成のために、実際にWebアプリケーションはどのような手順で作成するのか、セキュリティはどうするのかということをPHPでログイン機能を実装するチュートリアルと、パーフェクトPHPを参考に以前作成した新規登録・ログイン・パスワードリセットのサイト元にそれらを確認しながら実装してみようと試みていたが、テンプレート・エンジンの項目を見て先にLaravelに手を付けたほうが効率が良いと判断したので以下の記事を参考にLaravelの導入とその基本的な仕組みを頭に入れてみる。
Laravel入門 - 使い方チュートリアル
Laravel超入門 開発環境の構築(VirtualBox + Vagrant + Homestead + Composer)
Laravel5.7: usersのCRUD機能を実装する
Laravelで作るRESTなWebアプリ
Vagrant + VirtualBox でLaravel5.8環境構築メモ
1 Homesteadの準備
Laravelと仮想環境以外に必要なもの……Git Bash、Composer、Vim
Composerで導入するのでまずComposerを導入していない場合はComposerを導入する。
Composerについては以下を参照。
Composerの使い方各種仮想開発環境は各自用意する。
私は今まではXAMPPを使っていたが、今回はLaravelでHomesteadを使いたかったのでVagrantを用いている。
Vagrantの導入については冒頭の参考ページを参照してほしい。Vagrantを導入した、あるいは導入済みの場合はHomesteadのダウンロードに進む。
まずはHomestead vagrant boxをダウンロードするために以下のコマンドを実行する。vagrant box add laravel/homestead次にHomesteadを入れたい任意のディレクトリとフォルダを用意して以下のコマンドを実行する。
git clone https://github.com/laravel/homestead.git HomesteadHomesteadのダウンロードが終わったら次はその設定ファイルを作成する。
先程ダウンロードしたHomesteadにディレクトリ移動して以下のコマンドを実行。bash init.shすると、Homestead.yamlが作成されるのでそちらにHomesteadの設定を書き込んでいくのだが、設定項目でSSH鍵の項目があるので先にそちらを設定する。
一応、SSH鍵があるかどうか検索するコマンドを実行する。ls -al ファイルパス .ssh Windowsならこっち dir ファイルパス .ssh私はバッチファイルを作って前者のコマンドを利用した。
Windowsでもls,pwd,clearコマンドを使いたい!検索すると
~のディレクトリ ファイルが見つかりません (コマンドで指定したファイルパス) のディレクトリ 2019/10/19 04:07 <DIR> . 2019/10/19 04:07 <DIR> .. 2019/10/19 04:06 <DIR> .ssh 2019/10/19 04:40 <DIR> app 0 個のファイル 0 バイト コマンドで指定したファイルパス\.ssh のディレクトリ 2019/10/19 02:14 <DIR> . 2019/10/19 02:14 <DIR> .. 2019/10/19 02:14 1,766 id_rsa 2019/10/19 02:14 406 id_rsa.pub 2 個のファイル 2,172 バイト 2 個のディレクトリ 190,943,170,560 バイトの空き領域といったように検索結果が出てくる。
今回私はすでに作成をしてあるのでこのような結果になる。
つまり、.sshフォルダを任意の箇所に作ってそこにssh鍵を保存するということになる。
では、ssh鍵を作成する。ssh-keygen -t rsa上記コマンドを実行。
Enter file in which to save the keyと表示されたら、保存したいファイルパスを指定してEnter。
Enter passphraseでパスワード求められるので任意のパスフレーズを入力し、確認のため二度目の入力を済ませればSSH鍵の完成と相成る。ここまで来たらHomestead.yamlファイルを編集する。
Vimエディターを使える方はファイルが保存されているディレクトリに移動して以下を入力してVimを起動してください。vim Homestead.yaml内容は以下の通り
ip: "192.168.30.10" #Laravelに接続する際のipアドレス。デフォルトだと競合してエラーを起こす可能性が高いのでこれにしておく memory: 2048 #vagrantに割り当てるメモリ数 cpus: 2 #vagrantに割り当てる仮想CPUコア数 provider: virtualbox #仮想ソフトの指定 authorize: ~/.ssh/id_rsa.pub # ssh鍵の場所。下記のkeysとセット。 keys: - ~/.ssh/id_rsa folders: - map: C:\~(ルートフォルダからのファイルパス)\app\code #Windowsの場合はフルパス指定、超めんどくさい。appフォルダを指定する場合はその直後のディレクトリにcodeフォルダを作り、こうやって指定する。 to: /home/vagrant/Code #ホスト(上で指定した実際のディレクトリ)と連動する仮想環境化のディレクトリ、相互に変更が反映される。 sites: # プロジェクトごとに以下のようにパスを通すと複数のプロジェクトを作成できる。 - map: homestead.test #後々Lalavelをブラウザで表示させるためのルートアドレス。トップページが表示される。 to: /home/vagrant/Code/Laravel/public #Laravelのpubilcフォルダ(ウェブルート)を指定する。仮想環境化で入れてるのでこうなる。 databases: # 各プロジェクトで参照するDBの名前。複数ある場合はその都度追記する。 - laravel_test features: # オプションの設定、trueにしてから変更を反映すると対応するDBを削除してtrueにしたDBがインストールされる。 - mariadb: true - ohmyzsh: false - webdriver: false # blackfire: # - id: foo # token: bar # client-id: foo # client-token: bar # ports: # - send: 50000 # to: 5000 # - send: 7777 # to: 777 # protocol: udp注釈を補足すると、foldersの項目では実際に仮想環境化で扱うディレクトリを指定する。
上記の場合は~\app以下にあるcodeフォルダ以下を仮想環境下での/home/vagrant/Codeディレクトリと共有(連動)させるということになる。
つまり、後でこのcodeフォルダにLaravelをダウンロードするのだが、ダウンロードすると仮想環境下でのCodeフォルダも同様の状態になるということになる。sitesとdatabasesでは作りたいプロジェクト(アプリケーション)に合わせてルートアドレスとウェブルート、そのプロジェクトで参照するDBを設定する。
Homesteadで複数のアプリを動かしたい場合はその都度新しくLaravelを共有フォルダにインストールしてHomestead.yamlに追記していく形になる。featuresの項目はオプションの設定。
Homesteadには仮想開発するためのツールが一通り付属しているのでそれを使用するためのものだと思っていい。
Laravel及びHomesteadにおいてデフォルトで使用されるデータベースはMySQLかPostgreSQLだが、私はMariaDBを使いたかったのでtrueに設定している。
詳しくはドキュメントを参照。
Homesteadちなみに私は沼ったのでそうならないために補足すると、このファイルを変更した際それを反映するには
vagrant up --provisionでvagrantをupしないといけないことに注意してほしい。これで下準備が完了したので次はHomesteadにLaravelをダウンロードする。
2 Laravelのインストール
Homesteadディレクトリで以下を実行。
vagrant up vagrant sshvagrant upしていた場合は、sshのみでOK。
次にCodeディレクトリに移動してそこにLaravelをダウンロードするので以下のコマンドを実行する。cd Code/ composer create-project laravel/laravel -prefer--dist ディレクトリ名ディレクトリ名はプロジェクト名や作成するアプリケーションの名前などダウンロードしたLaravelフォルダの名前にしたいものを指定する。
Laravelのダウンロードはこれで完了。あとは、Homestead.yamlで設定したIPアドレス、あるいはfoldersのmapで定義した文字列を打ち込むとTOPページが表示される。
次回は、Laravelの基本的な扱い方について見ていく。










