【Angular × Laravel 連携・環境構築②】Angularのビューを表示させるまで【全4回】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
バックエンドにLaravel、フロントエンドにAngularを使った開発の知識をさらに深めるために、実際に独自でLaravel×Angularのアプリを開発することにしました。
案の定、環境構築の部分で時間が取られたので、ブログにまとめておきたいと思います。
内容が少し多いので、4回に分けて投稿していきます。
概要
以下の手順で環境構築を行います。
・第1回 LaradockでDocker内にLaravelの環境構築を行う
・第2回 LaravelのコンテナとMySQLのコンテナを接続する
・第3回 フロントエンドにAngularを導入する
・第4回 LaravelのBlade.phpを使わずにAngularビューを表示させる
環境は以下の内容で構築します。
・Docker
・Laravel 6.5.1
・Angular 8.0.0
・MySQL 5.7
※最新版8.0は使ったことがないので、慣れている5.7を使いました
Laravel×Angularの環境構築
MySQLのDATABASEの値を変更
laradockに設定してあるMySQLのDATABASEを任意の値に変更します。
.env
MYSQL_DATABASE=default //編集前
->
MYSQL_DATABASE=project_db //編集後
MySQLコンテナに入ってみる(動作確認)
コンテナを立ち上げて、MySQLコンテナに入ってみます。
laradock $ docker-compose up -d nginx mysql redis beanstalkd
laradock $ docker-compose exec mysql bash
:/# mysql -u root -p
Enter password:
~~~~~~~~~~~~~~~
mysql>
workspaceコンテナからMySQLにアクセスできるユーザーを作成
workspaceのコンテナ情報からIPアドレスを取得します。
laradock $ docker exec -it laradock_workspace_1 /bin/bash
root@***:/var/www#
上記でworkspaceに入ると、***部分に文字と数字が混ざった12桁が表示されていると思います。
それを使って、IPアドレスを取得します。
laradock $ docker inspect ***
→
"IPAddress": "IPアドレス"
取得したIPアドレスを使ってユーザーを作成します。
laradock $ docker-compose exec mysql bash
:/# mysql -u root -p
mysql> create user 'root'@'IPアドレス' identified by 'root';
ついでにデータベースも作成します。
mysql> create database project_db charset=utf8;
マイグレーションの実行
まずは、workspaceのコンテナに移動して、マイグレーションファイルを作成します。
laradock $ docker exec -it laradock_workspace_1 /bin/bash
:/var/www/project# php artisan make:migration project_db_table
projectディレクトリの.envを編集します。
.env
:/var/www/project# vim .env
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=project_db
DB_USERNAME=root
DB_PASSWORD=root
マイグレーションを行います。
:/var/www/project# php artisan migrate
以下のコードを使えば、テーブルが作成されているかMySQLコンテナから確認できます。
mysql> show databases;
mysql> use project_db;
mysql> show tables;
今後に向けて
次回は、LaravelプロジェクトのフロントエンドにAngularを導入します。
参考
素晴らしい記事に感謝いたします。