大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があればコメント頂けると幸いです。Twitterアカウント https://twitter.com/ryuzan03

【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を導入します。

 

参考

素晴らしい記事に感謝いたします。

Laradock

LaradockのプロジェクトコンテナとMySQLコンテナを接続する方法 - Qiita