Laravelのフォルダ 簡易一覧表 フォルダ名 内容 app アプリケーションのプログラム部分をまとめている。(Controllersフォルダ、Modelがある。) bootstrap アプリケーション実行時、最初に処理される内容がまとめられている config 設定関係のファイルがまとめられている。 database データベースに関するファイルがまとめられている。(factories・migrations・seedsフォルダがある。) public 公開フォルダ。Javascriptなどがまとめられている。(css・jsフォルダがある。) resources リソース関係の配置場所。(viewsフォルダがある。vue.jsの中身を配置する場所。) routes ルートの保存場所。(web.phpがある。) storage ファイルの保存場所。ログファイルがある。 tests ユニットテスト関係のファイルがある。 vendor フレームワークの本体がある。(laravel/framework/src/illuminateがある。) ※現時点で筆者がよく使うフォルダやファイルを太字にしております。

概要 Herokuへデプロイしたアプリケーションへの独自ドメイン適用とSSL対応についてまとめます。 前提条件 アプリケーションはHerokuへデプロイ済み お名前.com等で独自ドメインを取得済み(今回の例ではお名前.comで取得) Cloudflareのアカウントを作成済み 手順 ※取得したドメイン名はexample.comと仮定します。 Herokuへ独自ドメインの追加 Cloudflareへ作成したドメインの追加 お名前.comでネームサーバーの入力 1.Herokuへ独自ドメインの追加 基本的にこちらの公式ドキュメント通りに進めば問題ありません。 1-1. heroku domains:add heroku domains:add example.com まず、herokuコマンドが実行できるディレクトリでコマンドを実行します。 下記のエラーが発生した場合はクレジットカードの登録が必要となります。 https://devcenter.heroku.com/categories/billing › Error: Please verify your account in order to add domains (please enter a credit card) For more information, see https://devcenter.heroku.com/categories/billing Verify now at › https://heroku.com/verify ※Herokuは独自ドメインでのSSL利用は有料ですが、独自ドメインの使用自体は無料のため、この時点での登録では料金が発生しません。(2022/01/09現在) ちなみに、Personal>アプリケーション名>Setting>Domains のAdd Domainからでも追加できます。 2-2. heroku domains heroku domains 上のコマンドを実行し、DNS Targetをコピーしておきます。こちらは後ほどCloudflareで使用します。 2. Cloudflareへ作成したドメインの追加 1-1. ドメインの登録 ドメインを入力し、サイトを追加ボタンをクリックします。プラン選択画面が表示されるので、freeを選択します。 青色のレコードを追加ボタンからレコードを追加します。 タイプはCNAME、名前には取得したドメイン、ターゲットには先ほどコピーしたDNS Targetを貼り付けます。プロキシステータスにはチェックを入れておいてください。 Cloudflare ネームサーバーに２つネームサーバーがあるので、どちらもコピーしてください。次の手順で使用します。 3. お名前.comでネームサーバーの入力 ページ下部の2.ネームサーバーの選択からその他のサービスを選択し、先ほどCloudflareでコピーしたネームサーバーを貼り付けてください。 これですべての手順は完了です。 まとめ 無料で独自ドメインを適用しSSL対応する手順をまとめました。注意しなければならないのは、この手順でSSL化するのはブラウザとCloudflareの間のみです。chromeの非SSLページで表示される警告の回避などには十分と考えられますので、参考になれば幸いです。

以下の構成での構築記事がなかったので作成しました。 構成 Ubuntu 20.04 Lighttpd 1.4.55 php 8.0 laravel 8.x Ubuntu OS のインストールは済んでいるとします。 OS 最新化 $ sudo apt update $ sudo apt upgrade タイムゾーン設定 $ date $ sudo timedatectl set-timezone Asia/Tokyo $ date lighttpd のインストール $ sudo apt install lighttpd $ lighttpd -v $ sudo chown -R www-data:www-data /var/www/html/ $ sudo chown -R 755 /var/www/html/ $ sudo vi /var/www/html/index.html --- example.com --- ブラウザでアクセスする 　⇒ http://example.com/ 起動・停止 $ sudo systemctl stop lighttpd $ sudo systemctl start lighttpd $ sudo systemctl restart lighttpd 自動起動設定 $ sudo systemctl enable lighttpd php 8.0 のインストール $ sudo apt show php8.0 -a $ sudo add-apt-repository ppa:ondrej/php $ sudo apt show php8.0 -a $ sudo apt-get update $ sudo apt install php8.0 php8.0-fpm php8.0-sqlite3 php8.0-cli php8.0-curl php8.0-xml $ php -v php-fpm 設定 $ sudo vi /etc/php/8.0/fpm/pool.d/www.conf --- ;listen = /run/php/php8.0-fpm.sock listen = 127.0.0.1:9000 --- $ sudo vi /etc/lighttpd/conf-available/15-fastcgi-php.conf --- # -*- depends: fastcgi -*- # /usr/share/doc/lighttpd/fastcgi.txt.gz # http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs:ConfigurationOptions#mod_fastcgi-fastcgi ## Start an FastCGI server for php (needs the php5-cgi package) fastcgi.server += ( ".php" => (( "host" => "127.0.0.1", "port" => "9000", "max-procs" => 1, "bin-environment" => ( "PHP_FCGI_CHILDREN" => "4", "PHP_FCGI_MAX_REQUESTS" => "10000" ), "bin-copy-environment" => ( "PATH", "SHELL", "USER" ), "broken-scriptfilename" => "enable" )) ) --- モジュールの有効化 $ sudo lighty-enable-mod fastcgi $ sudo lighty-enable-mod fastcgi-php 再起動 $ sudo systemctl restart lighttpd php8.0-fpm phpファイルの動作確認 $ sudo vim /var/www/html/test.php --- <?php phpinfo(); --- ブラウザでアクセスする 　⇒http://example.com/test.php composer のインストール $ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" $ php -r "if (hash_file('sha384', 'composer-setup.php') === '906a84df04cea2aa72f40b5f787e49f22d4c2f19492ac310e8cba5b96ac8b64115ac402c8cd292b8a03482574915d1a8') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" $ php composer-setup.php $ php -r "unlink('composer-setup.php');" $ sudo mv composer.phar /usr/local/bin/composer $ composer -V Composer version 2.2.3 2021-12-31 12:18:53 SSL設定 (Let's Encrypt) lighttpdは停止しておく（でないとエラーになる） $ sudo systemctl stop lighttpd $ systemctl status lighttpd apache2をインストールすることでssl_modをインストールする $ sudo apt install apache2 SSL有効化 $ sudo a2enmod ssl certbot コマンドのインストール $ sudo apt install certbot コマンド実行 $ sudo certbot certonly --standalone -d example.com ここで管理者メールアドレスを設定する必要あり $ sudo ls -la /etc/letsencrypt/live/example.com 　⇒ cert.pem や fullchain.pem などが生成されている pemファイルをrootユーザに一度なって結合する $ sudo su - # cat /etc/letsencrypt/live/example.com/{privkey.pem,fullchain.pem} > /etc/letsencrypt/live/example.com/combined.pem # cat /etc/letsencrypt/live/example.com/combined.pem # exit 設定ファイルの下部に追記 $ sudo vim /etc/lighttpd/lighttpd.conf --- # http => https Redirect Setting $SERVER["socket"] == ":80" { $HTTP["host"] =~ "example.com" { url.redirect = ( "^/(.*)" => "https://example.com/$1" ) server.name = "example.com" } } # SSL Setting $SERVER["socket"] == ":443" { ssl.engine = "enable" ssl.pemfile = "/etc/letsencrypt/live/example.com/combined.pem" ssl.ca-file = "/etc/letsencrypt/live/example.com/fullchain.pem" } --- 起動 $ sudo systemctl start lighttpd ブラウザでアクセスする 　⇒ https://example.com/ laravelの導入 $ sudo apt install unzip $ cd ~/ $ composer create-project laravel/laravel example-app $ sudo mv example-app /var/www $ chmod -R 777 /var/www/example-app/storage webrootを割り当てる $ sudo vim /etc/lighttpd/lighttpd.conf --- -server.document-root = "/var/www/html" +server.document-root = "/var/www/example-app/public" --- 再起動 $ sudo systemctl restart lighttpd ブラウザでアクセスする 　⇒ https://example.com/ 以上です。 なお、mod_rewrite の設定が必要っぼい。

EC2インスタンスの複製方法と、その際に発生した問題と解決方法についてご紹介していきます！ 初めに 何故EC2インスタンスを複製する必要があったのか？ ・最初は問題なくEC2インスタンスにアプリをデプロイできたが、VPCのIPv4アドレスを/16で切ってしまっていたことで、その後サブネット作成時にIPv4アドレス選定の計算がめんどくさくなった。 →VPCのIPv4アドレスを/20で切って、サブネットを/24で切っておくと、後にサブネットを追加で作成する際にネットワークの切り分けが楽。 何故サブネットのIPv4アドレスを/24で切っておくといいのか？ 簡単にいうと、サブネットマスクを/20と/24で切った場合では、別サブネットを作成する際に選べるアドレスが以下のようになります。 ・例　172.31.32.0/24 →末尾の0のみが可変できる数字になる。 　つまり、別のサブネットを作成する際、172.31.32.0の32を33や34のように一つずらすだけでネットワークを切り分けることができるので計算が楽なんです！ ・例　172.31.32.0/20 この場合は、選択範囲が172.31.32.0 - 172.31.47.255になります。 ※計算はこちらのサイトで簡単にできます！ https://www.softel.co.jp/labs/tools/network/ と、このようにサブネットマスクを/24で切っておいた方が断然楽なので、IPv4aアドレスを割り当てし直そうということでEC2インスタンスを複製することにしました。 EC2インスタンスの複製 では早速、既存のEC2インスタンスから新規インスタンスを作成していきます。 下記の参考記事の通りに進めればOKです。 ※注意点として、新規でVPCとサブネットを作成する際、IPv4 CIDRをVPCは/20、サブネットは/24で切るようにしてください。 ELPの関連付け 次に、下記の手順で既存EC2に関連付けしていたELPを解除して新規EC2に関連付けさせます。 ※ELPを解除しないまま既存EC2インスタンスを停止してしまうと課金が適用されてしまうので注意。 1.既存EC2インスタンスとELPを解除し、インスタンス停止 下記記事に手順が記載されていますので参考にしてください。 解除ができたら、既存EC2を停止してください。 2.インターネットゲートウェイをアタッチ このままELPを新規EC2に関連つけさせてもエラーになります。 理由は、現在のままだとインタネットゲートウェイがアタッチされているのは既存EC2で使用していたVPCだからです。 なので、現在のVPCをデタッチして新規で作成したVPCにアタッチしましょう！ アタッチできたらELPを新規EC2に関連付けさせてください。 ssh接続の設定 このままだとターミナルからssh接続した時にエラーが出てしまいます。 なので、下記の設定をしていきます。 1.サブネットにルーティング追加 新規インスタンスのサブネット画面、「ルートテーブルの関連付けを編集」からインターネットゲートウェイへのルートを追加します。 2.一旦ssh接続確認 試しにssh接続してみると下記のようにエラーが発生し、もう一つのコマンドだと接続できます。 このエラーは、同じFQDNで別のマシンに差し替わったので、なりすましかもしれないよ！という意味です。 known_hostsというファイルに残っている履歴を削除してあげることで、エラーが出たコマンドでも接続できるようになります。 .ssh $ ssh -i "???????-????.pem" ec2-user@ec2-35-76-86-77.ap-northeast-1.compute.amazonaws.com @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone could be eavesdropping on you right now (man-in-the-middle attack)! It is also possible that a host key has just been changed. The fingerprint for the ED25519 key sent by the remote host is SHA256:quupw3VFbI0PMBQiwz+w5qKL54RUDiBLO2ww+I5OYjA. Please contact your system administrator. Add correct host key in /Users/.ssh/known_hosts to get rid of this message. Offending ED25519 key in /Users/.ssh/known_hosts:9 Host key for ec2-35-76-86-77.ap-northeast-1.compute.amazonaws.com has changed and you have requested strict checking. Host key verification failed. .ssh $ ssh -i "??????-????.pem" ec2-user@35.76.86.77 Last login: Mon Dec 20 07:10:40 2021 from p3014131-ipoe.ipoe.ocn.ne.jp __| __|_ ) _| ( / Amazon Linux 2 AMI ___|\___|___| https://aws.amazon.com/amazon-linux-2/ [ec2-user@ip-172-31-32-183 ~]$ 3.known_hostsファイルの履歴削除 エラーを見ると、hostsの9行目が指摘されているので、known_hostsの中身を確認して下記コマンドで履歴を削除します。 ※ここに関しては人によって違うかと思うので、ご自身の情報に当てはめて対処してください。 ssh-keygen -R ec2-35-76-86-77.ap-northeast-1.compute.amazonaws.com これで再度ssh接続すると先ほどのコマンドで接続できることがわかります！ アプリ起動 では早速、独自ドメイン、又はELPからアプリの起動確認をしてみましょう！ そうすると、あれ？404エラーが出ましたね。。。 404ということは、サーバーは問題なく動作しているので、OS側の設定が何処かおかしいのか？ ということで下記のように調査します。 1.curlコマンドでアクセス確認。 先ずは、ターミナルからssh接続し、curlで自分自身にアクセスしてみます。 ec2-user@ip-172-31-32-183 ~]$ curl 127.0.0.1 <html> <head><title>404 Not Found</title></head> <body> <center><h1>404 Not Found</h1></center> <hr><center>nginx/1.20.0</center> </body> </html> [ec2-user@ip-172-31-32-183 ~]$ 404が返ってきましたね。 2.ログ確認 /log/php-fpm/error.logからログの確認をします。 エラーが吐かれてますね！ [root@ip-172-31-32-183 php-fpm]# tail error.log [04-Jan-2022 15:12:41] WARNING: [pool www] ACL set, listen.owner = 'nginx' is ignored [04-Jan-2022 15:12:41] WARNING: [pool www] ACL set, listen.group = 'nginx' is ignored [04-Jan-2022 15:12:41] NOTICE: fpm is running, pid 26788 [04-Jan-2022 15:12:41] NOTICE: ready to handle connections [04-Jan-2022 15:12:41] NOTICE: systemd monitor interval set to 10000ms 3.対処 WARNING: [pool www] ACL set, listen.owner = 'nginx' is ignoredで検索してみて、記事を見つけたので参考に対処しましょう。 /etc/php-fpm.d/www.confの下記の箇所をコメントアウトします。 [root@ip-172-31-32-183 php-fpm.d]# vi /etc/php-fpm.d/www.conf ;listen.acl_users = apache,nginx #コメントアウト 編集を終えたら、php-fpmを再起動してphp-fpmを開き、先ほどのエラーが消えていれば成功です! [root@ip-172-31-32-183 php-fpm.d]# systemctl restart php-fpm #再起動 [root@ip-172-31-32-183 php-fpm.d]# systemctl status php-fpm #起動状態確認 ● php-fpm.service - The PHP FastCGI Process Manager Loaded: loaded (/usr/lib/systemd/system/php-fpm.service; enabled; vendor preset: disabled) Active: active (running) since Thu 2022-01-06 14:00:02 UTC; 7s ago Main PID: 8215 (php-fpm) Status: "Ready to handle connections" CGroup: /system.slice/php-fpm.service ├─8215 php-fpm: master process (/etc/php-fpm.conf) ├─8216 php-fpm: pool www ├─8217 php-fpm: pool www ├─8218 php-fpm: pool www ├─8219 php-fpm: pool www └─8220 php-fpm: pool www Jan 06 14:00:02 ip-172-31-32-183.ap-northeast-1.compute.internal systemd[1]: Starting The... Jan 06 14:00:02 ip-172-31-32-183.ap-northeast-1.compute.internal systemd[1]: Started The ... Hint: Some lines were ellipsized, use -l to show in full. [root@ip-172-31-32-183 php-fpm.d]# tail /var/log/php-fpm/error.log　#ログ確認 [04-Jan-2022 15:12:41] WARNING: [pool www] ACL set, listen.owner = 'nginx' is ignored [04-Jan-2022 15:12:41] WARNING: [pool www] ACL set, listen.group = 'nginx' is ignored [04-Jan-2022 15:12:41] NOTICE: fpm is running, pid 26788 [04-Jan-2022 15:12:41] NOTICE: ready to handle connections [04-Jan-2022 15:12:41] NOTICE: systemd monitor interval set to 10000ms [06-Jan-2022 14:00:01] NOTICE: Terminating ... [06-Jan-2022 14:00:02] NOTICE: exiting, bye-bye! [06-Jan-2022 14:00:02] NOTICE: fpm is running, pid 8215 [06-Jan-2022 14:00:02] NOTICE: ready to handle connections [06-Jan-2022 14:00:02] NOTICE: systemd monitor interval set to 10000ms おっと、まだエラーが出てますね。。。。 4.laravelのログ確認 一旦laravelの方のログを見てみます。 [root@ip-172-31-32-183 ~]# cd /var/www/laravel-zaikokanri/backend/storage/logs [root@ip-172-31-32-183 logs]# ls root@ip-172-31-32-183 logs]# あれ？あるはずのlaravel.logが無い？！ となると、恐らくLaravelのアプリ自体が正常に起動できていなく、ログが出力されてない状態のようです！ EC2の複製をオンラインのまま行ったとすると、もしかしたら変なセッションが残っていてそれが邪魔してる可能性があるので、一度OSを再起動してみます。 [root@ip-172-31-32-183 ~]# shutdown -r now #再起動 Connection to ec2-35-76-86-77.ap-northeast-1.compute.amazonaws.com closed by remote host. Connection to ec2-35-76-86-77.ap-northeast-1.compute.amazonaws.com closed. .ssh $ ssh -i "sample-key.pem" ec2-user@ec2-35-76-86-77.ap-northeast-1.compute.amazonaws.com　#接続タイムアウトで失敗 ssh: connect to host ec2-35-76-86-77.ap-northeast-1.compute.amazonaws.com port 22: Operation timed out .ssh $ ssh -i "sample-key.pem" ec2-user@35.76.86.77 #接続 Last login: Fri Jan 7 10:11:02 2022 from p3014131-ipoe.ipoe.ocn.ne.jp __| __|_ ) _| ( / Amazon Linux 2 AMI ___|\___|___| https://aws.amazon.com/amazon-linux-2/ 6 package(s) needed for security, out of 16 available Run "sudo yum update" to apply all updates. [ec2-user@ip-172-31-32-183 ~]$ curl 127.0.0.1 #アクセス確認 <html> <head><title>404 Not Found</title></head> <body> <center><h1>404 Not Found</h1></center> <hr><center>nginx/1.20.0</center> </body> </html> [ec2-user@ip-172-31-32-183 ~]$ sudo su - #ルートユーザーに変更 最終ログイン: 2022/01/07 (金) 10:11:07 UTC日時 pts/0 [root@ip-172-31-32-183 ~]# cd /var/www/laravel-zaikokanri/backend/storage/logs #logの場所まで移動 [root@ip-172-31-32-183 logs]# ls #laravel.logの確認 [root@ip-172-31-32-183 logs]# #存在してない 再起動でもダメそうですね。。。 ここでメンターに相談。 キャッシュクリアやパーミッション、リンク等を一つずつ調査してもいいけど、laravelのプロジェクトを再デプロイしてしまった方が早いかもしれないとアドバイス頂きました！ ということで、laravelプロジェクトの再デプロイを進めていきます。 初めは、え？またインスタンスとか作り直すの？と思ったのですが、そんなことはする必要はなく、プロジェクトディレクトリを際クローンするだけなのでもう一踏ん張り頑張りましょう！ 再デプロイ 1.laravelプロジェクトをクローン 先ずは既存プロジェクトをコピー用で用意したディレクトリに移動させ、その後にgithubからプロジェクトをクローンしてきます。 ※ここで既存プロジェクトは必要ないから削除しようとしてしまうところですが、新規でクローンしてきたプロジェクトのDB周りの設定を行う際に、既存プロジェクトのコードがみれた方が便利なので、既存プロジェクトは削除せず移動させるようにしましょう。 [root@ip-172-31-32-183 www]# mkdir copy-laravel-zaikokanri #既存プロジェクトの移動先を作成 [root@ip-172-31-32-183 www]# ls #作成されたか確認 cgi-bin copy-laravel-zaikokanri html laravel-zaikokanri [root@ip-172-31-32-183 www]# mv -v laravel-zaikokanri/ copy-laravel-zaikokanri/ #既存プロジェクトを移動 -vオプションで移動過程が表示されます。 ‘laravel-zaikokanri/’ -> ‘copy-laravel-zaikokanri/laravel-zaikokanri’ [root@ip-172-31-32-183 www]# ls #ちゃんと移動できたか確認 cgi-bin copy-laravel-zaikokanri html [root@ip-172-31-32-183 www]# cd copy-laravel-zaikokanri [root@ip-172-31-32-183 copy-laravel-zaikokanri]# ls laravel-zaikokanri [root@ip-172-31-32-183 copy-laravel-zaikokanri]# cd ../ #プロジェクトクローン先に移動 [root@ip-172-31-32-183 www]# git clone https://github.com/?????/?????.git #githubからプロジェクトをクローン Cloning into 'laravel-zaikokanri'... remote: Enumerating objects: 2073, done. remote: Counting objects: 100% (2073/2073), done. remote: Compressing objects: 100% (773/773), done. remote: Total 2073 (delta 1471), reused 1823 (delta 1259), pack-reused 0 Receiving objects: 100% (2073/2073), 963.78 KiB | 6.06 MiB/s, done. Resolving deltas: 100% (1471/1471), done. これでクローンが完了しました。 これだけではDB関係の設定ができてないのでアプリは起動できません。 2.DB設定 ①.env作成 .env.exampleをコピーして.envを作成します。 [root@ip-172-31-32-183 backend]# cp .env.example .env ②アプリケーションキーの作成 アプリケーションキーを作成しますが、このまま実行してもエラーになりますが、 composerをインストールすれば解決できます！ [root@ip-172-31-32-183 backend]# php artisan key:generate PHP Warning: require(/var/www/laravel-zaikokanri/backend/vendor/autoload.php): failed to open stream: No such file or directory in /var/www/laravel-zaikokanri/backend/artisan on line 18 PHP Fatal error: require(): Failed opening required '/var/www/laravel-zaikokanri/backend/vendor/autoload.php' (include_path='.:/usr/share/pear:/usr/share/php') in /var/www/laravel-zaikokanri/backend/artisan on line 18 [root@ip-172-31-32-183 backend]# composer install Package manifest generated successfully. 80 packages you are using are looking for funding. Use the `composer fund` command to find out more! [root@ip-172-31-32-183 backend]# php artisan key:generate #キー作成 Application key set successfully. [root@ip-172-31-45-44 backend]# cat .env #キーの確認 APP_NAME=Laravel APP_ENV=local APP_KEY=??????????????????????????= #ここで問題なく設定されてますね！ APP_DEBUG=true APP_URL=http://localhost ③.env、database.phpの設定 ・.envの設定 #各RDSの設定内容を入力 DB_CONNECTION=mysql DB_HOST=database-1.??????????.ap-northeast-1.rds.amazonaws.com DB_PORT=3306 DB_DATABASE=laravel_zaiko DB_USERNAME=admin DB_PASSWORD=????? #マスターパスワード ・/config/database.phpの設定 env()で囲んである箇所は.envの内容を読み込むようになっていますが、第二引数に直接書き込んでも大丈夫です。 また、RDSに登録したDBの内容はコンソールのRDS画面でDBを選択すれば確認ができます。 'default' => env('DB_CONNECTION', 'mysql'), 'mysql' => [ 'driver' => 'mysql', 'url' => env('DATABASE_URL'), 'host' => env('DB_HOST', 'database-1.???????????.ap-northeast-1.rds.amazonaws.com'), 'port' => env('DB_PORT', '3306'), 'database' => env('DB_DATABASE', 'laravel_zaiko'), 'username' => env('DB_USERNAME', 'admin'), 'password' => env('DB_PASSWORD', '??????'), 'unix_socket' => env('DB_SOCKET', ''), 'charset' => 'utf8mb4', 'collation' => 'utf8mb4_unicode_ci', 'prefix' => '', 'prefix_indexes' => true, 'strict' => true, 'engine' => null, 'options' => extension_loaded('pdo_mysql') ? array_filter([ PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'), ]) : [], ], 設定が完了したらmigrateしてDBが作成されているか確認しましょう。 前回一度migrateしてるので、今回はリフレッシュします。 [root@ip-172-31-45-44 backend]# php artisan migrate:refresh Migration table created successfully. ・DBが作成されているか確認 #mysqlログインコマンド $ mysql -h database-1.????????.ap-northeast-1.rds.amazonaws.com -P 3306 -u admin -p また、ログインコマンド実行後にパスワードの入力を求められますが、そちらは自身で設定したマスターパスワードになります。 ※もしマスターパスワードを忘れた場合はこちらの手順で簡単にパスワードを変更できます。 [ec2-user@ip-172-31-45-44 ~]$ mysql -h database-1.????????.ap-northeast-1.rds.amazonaws.com -P 3306 -u admin -p Enter password: Welcome to the MariaDB monitor. Commands end with ; or \g. Your MySQL connection id is 24 Server version: 8.0.23 Source distribution Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others. Type 'help;' or '\h' for help. Type '\c' to clear the current input statement. MySQL [(none)]> show databases; #DB確認 +--------------------+ | Database | +--------------------+ | information_schema | | laravel_zaiko | | mysql | | performance_schema | | sys | +--------------------+ 5 rows in set (0.00 sec) 無事作成できてますね！ 3.アプリ起動確認 ここで、アプリへアクセスしてみると下記のようにエラーが発生します。 laravel failed to open stream: Permission denied これは、権限の問題でログが書き込みできないというエラーになります。 storageディレクトリの権限を変更してあげましょう。 これで問題なくアプリが起動するようになるかと思います。 [root@ip-172-31-32-183 backend]# chmod -R 777 storage [root@ip-172-31-32-183 backend]# client_loop: send disconnect: Broken pipe 再度アプリへアクセスしてみると、今度は無事に起動できました！ 4.シンボリックリンク作成 では、最後にシンボリックリンクの作成やS3バケットの設定など、アプリ動作に必要な準備をしていきます！ [root@ip-172-31-45-44 backend]# php artisan storage:link The [/var/www/laravel-zaikokanri/backend/public/storage] link has been connected to [/var/www/laravel-zaikokanri/backend/storage/app/public]. The links have been created. 5.S3バケットの設定 画像アップロード機能を使えるようにする為に.envへS3の設定を追加していきます。 [root@ip-172-31-45-44 backend]# vi .env AWS_ACCESS_KEY_ID=??????????????? AWS_SECRET_ACCESS_KEY=???????????????? AWS_DEFAULT_REGION=ap-northeast-1 AWS_BUCKET=zaikokanri 設定内容が入力できたら、.envの修正内容を反映させる為にキャッシュをクリアします。 [root@ip-172-31-32-183 backend]# php artisan cache:clear Application cache cleared! 6.ログインアカウント作成 もし、管理者やダミーユーザーなどのユーザーアカウントをシードに用意してる場合は、シードを実行しておきましょう！ [root@ip-172-31-45-44 backend]# php artisan db:seed --class=UserSeeder Database seeding completed successfully. 最後に これでEC2インスタンスの複製と再デプロイは終了になります！ 結構長くなってしまいましたが、是非少しでも参考になればと思います！

はじめに 今年のQiita記事の投稿数が5しかないという結果を受けてなんとか5を6にしてやろうと書いた記事です。 最近、Laravel8, Vue3, Typescript, Vuetify でアプリを作成したので備忘録として残します。 手順 1. Laravel アプリの作成 curl -s "https://laravel.build/laravel-vue3-typescript-vuetify" | bash docker-compose.ymlを整理 コンテナのビルドに時間かけるの嫌だったので、とりあえずlaravelのコンテナだけにしました。 docker-compose.yml # For more information: https://laravel.com/docs/sail version: "3" services: laravel.test: build: context: ./vendor/laravel/sail/runtimes/8.1 dockerfile: Dockerfile args: WWWGROUP: "${WWWGROUP}" image: sail-8.1/app extra_hosts: - "host.docker.internal:host-gateway" ports: - "${APP_PORT:-80}:80" environment: WWWUSER: "${WWWUSER}" LARAVEL_SAIL: 1 XDEBUG_MODE: "${SAIL_XDEBUG_MODE:-off}" XDEBUG_CONFIG: "${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}" volumes: - ".:/var/www/html" networks: - sail # depends_on: # - mysql # - redis # - meilisearch # - selenium # mysql: # image: 'mysql/mysql-server:8.0' # ports: # - '${FORWARD_DB_PORT:-3306}:3306' # environment: # MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}' # MYSQL_ROOT_HOST: "%" # MYSQL_DATABASE: '${DB_DATABASE}' # MYSQL_USER: '${DB_USERNAME}' # MYSQL_PASSWORD: '${DB_PASSWORD}' # MYSQL_ALLOW_EMPTY_PASSWORD: 1 # volumes: # - 'sailmysql:/var/lib/mysql' # networks: # - sail # healthcheck: # test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"] # retries: 3 # timeout: 5s # redis: # image: 'redis:alpine' # ports: # - '${FORWARD_REDIS_PORT:-6379}:6379' # volumes: # - 'sailredis:/data' # networks: # - sail # healthcheck: # test: ["CMD", "redis-cli", "ping"] # retries: 3 # timeout: 5s # meilisearch: # image: 'getmeili/meilisearch:latest' # platform: linux/x86_64 # ports: # - '${FORWARD_MEILISEARCH_PORT:-7700}:7700' # volumes: # - 'sailmeilisearch:/data.ms' # networks: # - sail # healthcheck: # test: ["CMD", "wget", "--no-verbose", "--spider", "http://localhost:7700/health"] # retries: 3 # timeout: 5s # mailhog: # image: 'mailhog/mailhog:latest' # ports: # - '${FORWARD_MAILHOG_PORT:-1025}:1025' # - '${FORWARD_MAILHOG_DASHBOARD_PORT:-8025}:8025' # networks: # - sail # selenium: # image: 'selenium/standalone-chrome' # volumes: # - '/dev/shm:/dev/shm' # networks: # - sail networks: sail: driver: bridge # volumes: # sailmysql: # driver: local # sailredis: # driver: local # sailmeilisearch: # driver: local Sailを使ってローカルで立ち上げ もし何かエラーでたら、こちらご覧ください。 ./vendor/bin/sail up Vue3系の設定 インストール ./vendor/bin/sail npm install vue@next vue-loader@next @vue/compiler-sfc webpack.mix.js の編集 webpack.mix.js const mix = require("laravel-mix"); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel applications. By default, we are compiling the CSS | file for the application as well as bundling up all the JS files. | */ mix.js("resources/js/app.js", "public/js") .postCss("resources/css/app.css", "public/css", [ // ]) .vue(); //追記 コンポーネントの作成 app.blade.php の作成 app.blade.php <!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"></div> </body> </html> resources/js/components/App.vue <template> <div>{{ message }}</div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComponent({ setup() { const message = "Hello World"; return { message }; } }); </script> ルーティング追加 routes/web.php Route::get('/app', function () { return view('app'); }); ビルド ./vendor/bin/sail npm run dev とりあえず Vue3は導入できました。 Typescript インストール ./vendor/bin/sail npm install typescript ts-loader @types/webpack-env -D app.js を app.tsにファイル名変更 それと同時に、webpack.mix.jsも変更 webpack.mix.js const mix = require('laravel-mix'); mix.ts('resources/js/app.ts', 'public/js') //mix.jsをmix.tsに、app.jsをapp.tsに変更 .postCss('resources/css/app.css', 'public/css', [ // ]).vue(); mix.ts に変更できてなかったら、ビルドした際にこんなエラー出るのできちんと変更しましょう。 Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /var/www/html/resources/js/components/App.vue: Unexpected token, expected "," tsconfig.json作成 tsconfig.json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "typeRoots": ["./resources/js/@types"], "lib": ["esnext", "dom", "dom.iterable", "scripthost"] }, "include": [ "resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.vue" ], "exclude": ["node_modules"] } @types以下の作成 resources/js/@types/shims-vue.d.ts declare module "*.vue" { import {defineComponent} from "vue"; const component: ReturnType<typeof defineComponent>; export default component; } App.vue 変更 App.vue <template> <div>{{ message }}</div> </template> <script lang='ts'> //変更 import { defineComponent, ref } from "vue"; //変更 export default defineComponent({ setup() { const message = ref<string>("Hello World"); //変更 return { message }; } }); </script> Vuetify の導入 sail npm install vuetify@next -D app.tsの変更 resources/js/app.ts import "vuetify/styles"; import { createApp } from "vue"; import { createVuetify } from "vuetify"; import * as components from "vuetify/lib/components"; import * as directives from "vuetify/lib/directives"; import App from "./components/App.vue"; const app = createApp(App); const vuetify = createVuetify({ components, directives }); app.use(vuetify); app.mount("#app"); App.vueの変更 resources/js/components/App.vue <template> <v-app> <v-card> <v-card-title>{{ message }}</v-card-title> </v-card> </v-app> </template> <script lang="ts"> import { defineComponent, ref } from "vue"; export default defineComponent({ setup() { const message = ref<string>("Hello World"); return { message, }; }, }); </script> tsconfig.json tsconfig.json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": "./", "typeRoots": ["resources/js/@types"], "types": ["vuetify"], ← これを追記 "lib": ["esnext", "dom", "dom.iterable", "scripthost"] }, "include": [ "resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.vue" ], "exclude": ["node_modules"] } sail npm run dev これでいけるはず レポジトリも載せておきます。 おわりに 僕はこれにvue-router を加えて開発しました。 次は nuxt3 x Vuetify3 x Typescript でやってみたいですね。 間違ってるところとか、これ通りにできなければ教えてください。 参考記事

概要 本記事は、PHPフレームワークLaravel入門 第2版で学習している中の疑問・つまづきの備忘録です。 今回はLaravelでDBを利用する際の設定ファイルについてまとめます。 なお、PHPフレームワークLaravel入門 第2版ではSQLiteを利用していますが、MySQLに読み替えて同じことを行なっています。 設定ファイルはどれを使えばいいのか？ LaravelにはDBを利用する際に使用する、設定に関するファイルが複数あります。 しかし、結局どれを使えばいいのか迷ったので調べてみました。 .envファイル このファイルには環境変数が定義されています。 DBに関する設定はデフォルトで以下の通りです。 DB_CONNECTION=mysql DB_HOST=mysql DB_PORT=3306 DB_DATABASE=[プロジェクト名] DB_USERNAME=sail DB_PASSWORD=password 基本的に設定を変更するにはここを書き換えるといいようです。 後述のdatabase.phpでは、env()関数を使用して.envファイルで設定された環境変数を取得しています。 また、以下の通り.envファイルをGitHub等で管理してはいけません。 アプリケーションを使用する開発者/サーバごとに異なる環境設定が必要になる可能性があるため、.envファイルをアプリケーションのソース管理にコミットしないでください。さらに、機密性の高い資格情報が公開されるため、侵入者がソース管理リポジトリにアクセスした場合のセキュリティリスクになります。 Laravel 8.x 設定 ちなみに、デフォルトで.gitignoreファイル内でGitのソース管理対象から外すよう設定されています。 #.gitignoreファイル /node_modules /public/hot /public/storage /storage/*.key /vendor .env ##########ここに設定されている .env.backup .phpunit.result.cache docker-compose.override.yml Homestead.json Homestead.yaml npm-debug.log yarn-error.log /.idea /.vscode では、.envの設定項目や設定値をチーム内で共有したい場合はどうすれば良いのか？ .env.exampleファイルを利用しましょう。 .env.exampleファイル このファイルに、共有したい設定を記載します。 ただし、本番環境で使用するような設定は記載すべきではないでしょう。 デフォルトでは以下のような設定値になっています。 DB_HOSTやDB_DATABASEの設定項目が.envと異なります。 自分自身を指すIPアドレスである、127.0.0.1が設定されるなど仮に外部に漏れても危険ではない値が設定されているようです。 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD= チームで開発している場合は、アプリケーションに.env.exampleファイルを含め続けることをお勧めします。サンプル設定ファイルにプレースホルダー値を配置することにより、チームの他の開発者は、アプリケーションを実行するために必要な環境変数を明確に確認できます。 Laravel 8.x 設定 database.phpファイル こちらがDBの設定ファイルです。 デフォルトでは、ほとんどの項目でenv('.envの設定項目名', 'デフォルト値')関数を用いて環境変数を取得しています。 したがって、.envの内容を書き換えるとenv()関数で取得される値も変わります。 database.php //MySQLの設定のみ抜粋 'mysql' => [ 'driver' => 'mysql', 'url' => env('DATABASE_URL'), 'host' => env('DB_HOST', '127.0.0.1'), 'port' => env('DB_PORT', '3306'), 'database' => env('DB_DATABASE', 'forge'), 'username' => env('DB_USERNAME', 'forge'), 'password' => env('DB_PASSWORD', ''), 'unix_socket' => env('DB_SOCKET', ''), 'charset' => 'utf8mb4', 'collation' => 'utf8mb4_unicode_ci', 'prefix' => '', 'prefix_indexes' => true, 'strict' => true, 'engine' => null, 'options' => extension_loaded('pdo_mysql') ? array_filter([ PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'), ]) : [], Laravelのデータベースサービスの設定は、アプリケーションのconfig/database.php設定ファイルにあります。このファイルは、全データベース接続を定義し、デフォルトで使用する接続を指定できます。このファイル内のほとんどの設定オプションは、アプリケーションの環境変数の値によって決まります。Laravelがサポートしているデータベースシステムのほとんどの設定例をこのファイルに用意しています。 Laravel 8.x データベース：準備 まとめ .env 環境変数を定義する。env()関数を使用するとこのファイルの設定値を取得できる。 また、セキュリティリスクとなるため.envファイルをGitHub等で管理してはいけない。 .env.example チーム開発時に、アプリケーションを実行するために必要な環境変数を共有するために使用。 database.php DBの設定ファイル。 デフォルトでは多くの項目で、env()関数を使用して.envファイルから環境変数を取得している。 参考文献 PHPフレームワークLaravel入門 第2版 Laravel 8.x 設定 Laravel 8.x データベース：準備