【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の環境構築
Laradockのインストール
開発環境を構築するためのディレクトリ(Sample)を準備して、カレントディレクトリにします。
~$ mkdir Sample
~$ cd Sample
Sampleディレクトリ内にLaradockをクローンします。
Sample $ git clone https://github.com/LaraDock/laradock.git
クローンができたら、Laradockディレクトリに移動します。
Sample $ cd laradock
.envファイルのコピーと編集
laradock内の「env-example」ファイルをコピーして、環境構築の設定ファイル「.env」を作成します。
laradock $ cp env-example .env
作成した.envファイルを編集します。
.env
MYSQL_VERSION=5.7 //編集
~~~~~
DB_HOST=mysql //追加
REDIS_HOST=redis //追加
QUEUE_HOST=beanstalkd //追加
コンテナの起動
Laradock内でコンテナ(Nginx、Redis、Beanstalkd)を起動させます。
laradock $ docker-compose up -d nginx mysql redis beanstalkd
laradock $ docker-compose ps //コンテナの起動状況を確認。StateがUPなら立ち上げ成功。
Laravelプロジェクトの作成
コンテナ内でLaravelプロジェクトを作成します。
まずは、コンテナにアクセスします。
laradock $ docker exec -it laradock_workspace_1 bash
パッケージリストの更新と必要なツールを導入します。
:/var/www# apt-get update
:/var/www# apt-get install vim
:/var/www# apt-get install sudo //必要ないと思うけど、、、
Laravelプロジェクト(project)を作成します。
:/var/www# composer create-project laravel/laravel project
:/var/www# ls //ディレクトリが作成されているか確認
パーミッション設定
Laravelプロジェクトの「storage」「bootstrap/cache」ディレクトリについて、Webサーバから書き込みできるように変更します。
projectディレクトリに移動して、パーミッションを変更します。
:/var/www# cd project
:/var/www/project# chmod 766 storage
:/var/www/project# chmod 766 bootstrap/cache
Nginxのドキュメントroot変更
laradockディレクトリに移動して、vimでdefault.confを編集します。
:/var/www/project# cd ../
:/var/www# cd laradock
:/var/www/laradock# vim nginx/sites/default.conf
derault.conf(vimモード)
root /var/www/public; //編集前
->
root /var/www/project/public; //編集後
最後にコンテナを再起動させると、Laradockトップ画面が表示されます。
laradock $ docker-compose restart
今後に向けて
次回は、LaravelのコンテナとMySQLのコンテナを接続させます。
参考
素晴らしい記事に感謝いたします。
