Mac + VirtualBox + DockerでLaravel+Nuxt.js環境構築してAWS Fargateにデプロイする方法

2020年8月3日

全体概要

#記事の目的
・Laravel(API) + Nuxt.js(SSR・フロント)でのWEBアプリ開発の勉強

・MacにてHomesteadで上記組み合わせの環境構築がうまくできず Homesteadを使わないMac + VirtualでのLaravel環境構築備忘録
 理由:Nginxの設定ファイルにproxy設定の追記ができない(再起動すると消える原因解決できず)
・Dockerの環境構築の勉強とAWS Fargateにデプロイする方法調査兼備忘録

#主な記事の内容
・AWSを実運用する為の理想の使い方を参考サイトから学び実践した備忘録
・Dockerの使いかた
・ 同ドメインのNuxtjs(フロントエンド)からLaravel (API) へのアクセス方法

Mac ローカル環境に VirtualBoxでのLaravel環境構築

#参考サイト
https://hrroct.hatenablog.com/entry/2019/01/05/143655

#目的
MacにLaravelが動作する環境を構築したい
LaravelにてAPIのアクセスを許可する為、NginxのProxy設定を変更したい

#やる事
VirtualBOXを作成
CentOS7.3+ Nginx + PHP7 + MySQL5.7 で構成

#CentOS7インストール
Virtualbox + Vagrantはインストール済みとする
Boxlist確認とBox追加(Virtualboxを選択)

追加完了したら確認する

ローカルPCのプロジェクトを作成した場所の一つ上の階層に移動して
任意の名前でディレクトリ作成して移動

vagarantfile作成

ディレクトリ内に Vagrantfile というファイルが作成される

#vagrantfileを修正する
ホストOS(Macのローカル作業ディレクトリ)とゲストOS(vagrant内の対象ディレクトリ)で共有したいフォルダのパスを指定する
左側がホスト側(vagrantfileからの相対パスを指定する)、右側がゲスト側、create trueは指定したディレクトリがない場合自動で作成する

以下ホスト名の設定(追記/コメントを外す)

vagrantにホスト名でアクセスできるプラグインをインストール

上記設定完了してvagrant upで起動すれば
ローカルPCのhostsファイルに自動で反映される
hostファイル場所(確認用)

※共有フォルダの設定をした際にエラーがでた場合以下のプラグインをインストール

上記設定完了後再度vagrant up

起動/再起動コマンド

ssh接続

#Vagarant接続後の設定

パッケージをアップデート

#php7.3をインストール

EPELリポジトリを追加

Remiをインストール

nginxからphpが使えるようにPHP-FPMをインストール

PHP-FPMの設定ファイル /etc/php-fpm.d/www.conf に PHP-FPMプロセスを実行できる ユーザー/グループを設定

サービスとして実行されるよう登録

/etc/nginx/nginx.confの fastcgi_paramを以下のように修正

yumを更新

phpのversion 確認

#Composerインストール

zip unzip gitのインストール

#Nginxをインストール

自動起動設定

Nginx起動

nginx設定ファイルの更新

nginx設定ファイルを以下のように編集

nginx再起動

php-fpmの設定

SElinuxの無効化

logoutして vagrant reload –provison で再起動

phpinfoファイル作成

#node.jsをインストール
nvmインストール

logout してvagrant reload( 再起動)
公式サイトで最新バージョンを確認してインストール

#mysqlをインストール
mariaDBをアンインストール
MySQLと競合を起こすことがあるので削除

MySQL 5.7 のインストール

※インストールがうまくいかない場合
 yumの依存関係が解決できないようなので
–skip-brokenをつける

MySQL Sever が自動起動するように設定

MySQL Server を起動

MySQL の root の初期パスワードを確認

以下のコマンドで確認

MySQL に接続してみる

root の初期パスワードを変更する

ユーザーを作成
rootでログインして以下のようなコマンドでユーザーを作成できる

Laravelで使うデータベースを作成

#Laravelをインストール
laravelプロジェクトを作成
※laravelをインストールする前に共有フォルダ設定を行う

権限を与える

storageにSELinuxの設定
httpd_sys_rw_content_tタイプを設定する事で、一時的に許可

.envファイルを変更する
データベース情報を追記

ライブラリをインストール

ログイン機能作成

必要Packageインストール

css・jsをビルド

データベースのテーブルを自動で作成

#Nuxtjsをインストール


#Nginxの設定を変更

#APIのアクセステスト

VirtulBoxにDockerを導入する

#参考サイト
https://qiita.com/yuki_ycino/items/cb21cf91a39ddd61f484

#Dockerについて

#目的
Dockerの使い方を覚えたい

#構築手順

#AWS用の設定

AWS のECS/FargateにDockerからデプロイする使い方

参考サイト

#はじめに(AWSを使う準備)
ベーシックプランを選択
Budgetsにて毎月$20の予算に設定して80%時点でアラートがくるように設定

#Amazon ECS ( Amazon Elastic Container Service)について
Amazon ECSとはクラスターで Docker コンテナを簡単に実行、停止、管理できる非常にスケーラブルで高速なコンテナ管理サービス

Amazon ECS クラスターはタスクまたはサービスの論理グループ

#AWS Fargateについて
WS Fargate は、Amazon ECS とともに使用して Amazon EC2 インスタンスでサーバーまたはクラスターを管理する必要なくコンテナを実行できるテクノロジー
AWS Fargate を使用すると、コンテナを実行するために仮想マシンのクラスターをプロビジョニング、設定、スケールする必要がない

#DockerからECSにコンテナをデプロイする方法

この記事で補いきれなかった事

#windowsでの開発環境準備
Windows+VirtualBox+DockerでLaravel+Nuxt.js環境構築してAWS Fargateにデプロイする方法

 

AWS で使う機能

参考サイト
https://qiita.com/mejileben/items/f68a50ec9164b261b9cd#%E6%A6%82%E8%A6%81

#ACM
HTTPS通信の証明書を発行したり、期限の管理ができるサービス

CloudFrontやALBに証明書を紐付けて利用する
バージニア北部のリージョンで取得した証明書じゃないと紐付けることができない
#CloudFront
WAF(IP制限など)や画像のキャッシュ機構などを乗せることができるサービス

CSSやJavaScriptのgzip配信も対応しているので、ページの読み込み速度向上も簡単に実現
S3やALBなどを後段に置き、URLのパスごとに振り分けることができる
XServer側のDNSレコード設定でCNAMEにCloudFrontのデフォルトURLを指定し、先程発行したACMの証明書をCloudFrontに紐付けると、「noschool.asia」をHTTPSで利用できる
#S3
画像置き場
#ALB
ALBはロードバランサではありますが、URLのパスベースでアクセスを振り分けることも可能
#EC2
セキュリティグループ
HTTP/HTTPS通信をALBからのもののみ許可
AMI

CodeDeployやAutoScaling
#RDS
データベースを構築する
Laravelとの組み合わせとしては、RDSのホスト名やユーザー名、パスワードを.envファイルに記載する(=環境変数に設定する)ことが必要
ネットワークの観点ではRDSのセキュリティグループでEC2からのアクセスを許可する必要
パラメータストアで秘匿情報を管理し、デプロイ時にそれらの情報を環境変数に設定することでアクセスする手法
#ElastiCache
複数台のEC2でセッション情報を始めとする各種キャッシュを共通化する必要があり、キャッシュ版のRDS
#CodeDeploy / CodePipeline
C2インスタンスにソースコードをリリースする用途で使う
appspec.ymlというファイルを作成しルートディレクトリに配置
リリース時に実行してほしいスクリプトを書く(例えばnpm installcomposer install
LBと連携することで、ALBが自動でリリース中のインスタンスをトラフィックから外してくれる
#AutoScaling
EC2インスタンスを複数台まとめて登録しておくと、台数を指定した範囲内で自動で上下させてくれるサービス
常に台数を一定に保ってくれるので、不調になったインスタンスを削除すると勝手に補充してくれる
CodeDeployと連携することで、補充したインスタンスが起動すると自動でソースコードをインストールできる
#Systems Manager(Parameter Store)
RDSのパスワードやIAMで発行したアクセスキーなど、サービスで利用することはあるけどAWS外には出したくない

#全体構成
draw.ioでAWSのインフラ構成図を書くツール
https://www.draw.io/

AWSを勉強用に使うためにする事

AWSは1年分無料とあるがどうやら各機能毎に使える容量が限られれているため注意する
しばらく放置して後から多額の請求がこないように上限額アラート機能をつける
#上限額アラート機能の付け方
あああ

ああああ

#使う機能と設定
あああ
ああああ

 

AWS で使う機能

ああああ

 

ああああ

 

 

AWS で使う機能