【初心者向け】Laravel Docker AWS(EC2) Webアプリ(PHP)を0から簡単にデプロイする方法③EC2編

エンジニア

概要

何度もいいますが、知らない単語が出た瞬間ググってください!!!!!

①の全体像編がこちらにあるのでこちらを一読してからだと理解がスムーズかと!!!

https://sg-report.com/laravel-docker-awsec2-web1/
②のDocker環境構築編もあるのでこちらでデプロイするアプリを作成してます

https://sg-report.com/laravel-docker-awsec2-web2/
今回で作成するは具体的にいうと赤いとこ

以上が完成すると、世の中にアプリを公開することができます!

つまり 特定のURLを叩くと誰でも作成したWebアプリを動かせる状態 ⇦目指すはここ

AWSのEC2インスタンスを利用してデプロイを行うための流れ

AWS?EC2インスタンス?とはなんですか??
AWS EC2インスタンスとは、Amazonが提供している仮想サーバー構築サービスです。。。。難しいですかね。
ざっくり言うと
よくサーバーってなんかでかい四角い箱のイメージですが、AWSのEC2インスタンスはそれをクラウド上に作れる!!
(EC2インスタンスとは OSを載せた仮想サーバーです)
まあ概念的なものはおいといて手を動かしましょう。

上の図を完成させるための流れを説明します。

①AWSにアカウントを作成する。
②EC2インスタンスを作成する
③EC2インスタンスにSSHでアクセス
④EC2インスタンス(Ubuntu)に必要なアプリケーションをインストール
⑤GitHubからプロジェクト(ソースコード)をPULL
⑥Laravelをインストールしてのトップ画面を表示
⑦データベースと接続
⑧URLを叩いてアクセス!!

上の7つ行えば完了です!
さあやっていきましょう!

①AWSにアカウントを作成する

さて、AWSのアカウントを作成するのですが、、、
以下公式
https://aws.amazon.com/jp/register-flow/
わかりやすそうな動画つきのサイト
https://blog.serverworks.co.jp/tech/2020/07/17/hajimeteno_aws_account/
今回はAWSのEC2インスタンスというサービスを使うので、1年間は基本的にお金がかかりません!
利用サービスによっては一部料金をとられたりしますのでご注意ください。
https://www.fenet.jp/aws/column/aws-beginner/197/
上記を参考に設定してもらえればお金はかからないことがわかります。
以上の操作でアカウントが作成し、TOP画面にきたら右上がこちらは東京(日本)にしてあることを必ず確認してください!
ヨーロッパ等になっていたらかならずタップして アジアパシフィック「東京」 にするようにお願いします。

②EC2インスタンスを作成する

1,サービスをタップし、EC2をタップ。

2,インスタンスをタップ


3,EC2インスタンス一覧が表示されたらインスタンスを起動をタップ

4,今回は Ubuntu Server 20.04 LTS (HVM), SSD Volume Type – ami-059b6d3840b03d6dd (64 ビット x86)

を使いますのでこれを選択。(無料枠対象でUbuntuを使います。)

5,インスタンスタイプの設定。ここでインスタンスの容量を設定。今回は無料枠で行うので無料枠のt2.microを使います。

そして次のステップ:インスタンスの詳細の設定をタップ
(ここからの設定はあとで変更できるので確認と作成でもいいですが、先に設定しちゃいましょう!!)

6,詳細にネットワークの設定をできますが、今回はこちらデフォルト(そのまま)で次のステップ:ストレージの追加をタップ

7,こちらでストレージサイズをいじれますが、今回はこちらもデフォルト(そのまま)で次のステップ:タグの追加をタップ

8,タグを追加できますが、今回は追加せずそのままで次のステップ:セキュリティグループの設定をタップ

9,セキュリティグループを設定します。

新しいセキュリティグループを作成する。にしてグループ名説明は自分でわかるように設定。
ルールの追加をタップして
タイプは以下のように追加してください。
※SSHの部分のポート範囲をマイIPしていますが、こちらは自分IPを使って接続しますよーの意味です。
そのため、自分のIPがコロコロ変わるWifi回線を使っている方は利用するたびにSSHのポート範囲を変えなければいけませんのでご注意!!
もし不安でしたら今回はテストですので SSHのソースを 任意の場所 にして 0.0.0.0/0, ::/0 で良いと思います。
入力し終わったら確認と作成をタップ!

10,作成の確認画面がでますが、そのまま「起動」ボタンを押しましょう!

11,キーファイルを作成します。まずはプルダウンを 新しいキーペアの作成 

キーペア名は任意ですが「HelloLaravel」とします
次にキーペアのダウンロードをタップ
 ダウンロードされた「HelloLaravel.pem」をデスクトップにおいておきます。鍵の場所は必ずわかるようにしておいてください。
 ※このダウンロードされたキーファイルはその名も通り、このインスタンスの中に入るための鍵なので無くさないように大切に保存しましょう。
 今回はデスクトップにおきますが、本当は/.sshフォルダの中にあるとよいですね!
鍵ファイルをダウンロードできたら、インスタンスの作成 をタップ!

12,これでインスタンスを作成できたので インスタンスの表示で開くなど3のインスタンス一覧まで戻りましょう。

そして、インスタンスが作成してから動かせるようになるまで少し時間がかかるので少々おまちください。
数分たったらこんな風になっていればOKです!
ステータスチェックが2/2になっていることを確認してください!

これでインスタンスの作成が完了です!!

③EC2インスタンスにSSHでアクセス

1,ターミナル(端末)を開いて、権限を変更し、SSHでアクセスする。

ターミナルを開き、ホームディレクトリ(最初の階層)で
先ほど保存した、鍵ファイルの権限を変えます(これをしないと接続できません)

//鍵ファイルの権限を読み取りもできるように変更
~ chmod 600 ~/Desktop/HelloLaravel.pem
//鍵ファイルで作成したインスタンスにSSHでログイン
~ ssh -i ~/Desktop/HelloLaravel.pem ubuntu@(EC2インスタンスのパブリックIPアドレス)

※(EC2インスタンスのパブリックIPアドレス)これは↓の赤枠の部分に書いてある数字です。赤枠の左の部分の四角いマークをタップすればコピーできます

↓こうなっていたらアクセス完了です!

ubuntu@ip-自分のIP:~$ 

④EC2インスタンス(Ubuntu)に必要なアプリケーションをインストール

1,php7.4をインストール

//パッケージの更新
ubuntu@ip-自分のIP:~$ sudo apt-get update
//PHP PPA Repositoryを追加
ubuntu@ip-自分のIP:~$ sudo apt -y install software-properties-common
ubuntu@ip-自分のIP:~$ sudo add-apt-repository ppa:ondrej/php
ubuntu@ip-自分のIP:~$ sudo apt-get update
//PHPインストール
ubuntu@ip-自分のIP:~$ sudo apt -y install php7.4
//バージョン確認
ubuntu@ip-自分のIP:~$ php -v
PHP 7.4.16 (cli) (built: Mar  5 2021 07:54:38) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.16, Copyright (c), by Zend Technologies


2,MySQL 8.0をインストール

//パッケージの更新
ubuntu@ip-自分のIP:~$ sudo apt update
//mysqlインストール
ubuntu@ip-自分のIP:~$ sudo apt install -y mysql-server
//mysqlを動かす
ubuntu@ip-自分のIP:~$ sudo service mysql start
//バージョン確認
ubuntu@ip-自分のIP:~$ sudo mysql -u root -e'select version();'
+-------------------------+
| version()               |
+-------------------------+
| 8.0.23-0ubuntu0.20.04.1 |
+-------------------------+


3,nginx1.18をインストール

//パッケージの更新
ubuntu@ip-自分のIP:~$ sudo apt update
//nginxをインストール
ubuntu@ip-自分のIP:~$ sudo apt install -y nginx
//場所を確認
ubuntu@ip-自分のIP:~$ sudo which nginx
/usr/sbin/nginx
//バージョン確認
ubuntu@ip-自分のIP:~$ nginx -v
nginx version: nginx/1.18.0 (Ubuntu)

nginxが動いているのかの確認

ubuntu@ip-自分のIP:~$ sudo service nginx start
ubuntu@ip-自分のIP:~$ sudo service nginx status
● nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset:>
   //↓がactiveになってたらOK。
     Active: active (running) since Sun 2021-04-11 06:44:04 UTC; 1s ago
       Docs: man:nginx(8)
・・・・・・
//Failになっていたらポートが占領されていたりするので
ubuntu@ip-自分のIP:~$ sudo lsof -i:80
//確認して一度占領ポートを全部消す。数字は↑で確認した番号
ubuntu@ip-自分のIP:~$ sudo kill 23930 23933 23934 23935 23936 23937 25159

http://(EC2インスタンスのパブリックIPアドレス)/index
をgoogleでアクセス!notfoundでnginxが動いていることを確認


※番外 HTMLファイルをテストで表示

ubuntu@ip-自分のIP:/var/www$ ls
html
ubuntu@ip-自分のIP:/var/www$ cd html/
ubuntu@ip-自分のIP:/var/www/html$ vi test.html

↓test.htmlを作成

<html>
        <body>HTMLTEST</body>
</html>

http://(EC2インスタンスのパブリックIPアドレス)/test.html
をgoogleでアクセス!
HTMLTESTが表示されていたらnginxでHTMLが表示できていることを確認できる。

⑤php7.4-fpmをインストールする

ubuntu@ip-自分のIP:~$ sudo apt update
//php-fpmをインストール
ubuntu@ip-自分のIP:~$ sudo apt install php7.4-fpm
//バージョンを確認
ubuntu@ip-自分のIP:~$ php-fpm7.4 -v
PHP 7.4.16 (fpm-fcgi) (built: Mar  5 2021 07:54:38)
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.16, Copyright (c), by Zend Technologies

⑥GitHubからプロジェクト(ソースコード)をクローン

ubuntu@ip-自分のIP:/var/www$ sudo git clone https://github.com/K-SG/DockerLaravelTestProject.git
Cloning into 'DockerLaravelTestProject'...
remote: Enumerating objects: 164, done.
remote: Counting objects: 100% (164/164), done.
remote: Compressing objects: 100% (119/119), done.
remote: Total 164 (delta 25), reused 157 (delta 18), pack-reused 0
Receiving objects: 100% (164/164), 72.99 KiB | 7.30 MiB/s, done.
Resolving deltas: 100% (25/25), done.
//確認
ubuntu@ip-自分のIP:/var/www$ ls
DockerLaravelTestProject  html
//プロジェクトの権限をwww-dataに変更
ubuntu@ip-自分のIP:/var/www$ sudo chown -R www-data:www-data DockerLaravelTestProject/
ubuntu@ip-172-31-35-119:/var/www$ ls -al
total 16
drwxr-xr-x  4 root     root     4096 Apr 18 06:04 .
drwxr-xr-x 14 root     root     4096 Apr 18 05:51 ..
drwxr-xr-x  5 www-data www-data 4096 Apr 18 06:04 DockerLaravelTestProject
drwxr-xr-x  2 root     root     4096 Apr 18 06:12 html

⑦nginxの設定を変えて、phpファイルが表示できることを確認

1,nginxの設定ファイルを変える

ubuntu@ip-自分のIP:/var/www$ cd /etc/nginx/sites-enabled/
ubuntu@ip-自分のIP:/etc/nginx/sites-enabled$ sudo vi default

以下に変更する。

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;

        root /var/www/DockerLaravelTestProject/backend/public;

        # Add index.php to the list if you are using PHP
     
        index index.html index.htm index.nginx-debian.html index.php;

        server_name _;
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                # try_files $uri $uri/ =404;
                try_files $uri $uri/ /index.php?$query_string;
        }

        # pass PHP scripts to FastCGI server
        #
        location ~ \.php$ {
                include snippets/fastcgi-php.conf;
        #
        #       # With php-fpm (or other unix sockets):
                fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        #       # With php-cgi (or other tcp sockets):
        #       fastcgi_pass 127.0.0.1:9000;
                fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
                fastcgi_split_path_info ^(.+\.php)(.*)$;
                fastcgi_param PATH_INFO $fastcgi_path_info;
                include fastcgi_params;
        }

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #       deny all;
        #}
}


※設定ファイルを変更(↑のように)、サーバーがうまく動作していない場合はnginxを必ず再起動

ubuntu@ip-自分のIP:~$ sudo service nginx stop
ubuntu@ip-自分のIP:~$ sudo service nginx start
//状態を確認
ubuntu@ip-自分のIP:~$ sudo service nginx status

2,プロジェクトにPHPファイルを作って接続を確認する。

//プロジェクトの中のpublicまで移動
ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject/backend/public$ ls
favicon.ico  index.php  robots.txt  web.config
ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject/backend/public$ sudo vi phpinfo.php

↓で保存phpinfo.phpを作成

<?php
phpinfo();
?>

http://(EC2インスタンスのパブリックIPアドレス)/phpinfo.php
をgoogleでアクセス!
PHPの情報が表示されていたらnginxでPHPのファイルがが表示できていることを確認できる。


3,現状足りていないPHPに必要なものをインストール

ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject/backend$ sudo apt install php7.4-mbstring php-xml php-json

⑧LaravelをインストールしてWelcome画面表示する

1,Laravelをインストール

//コンポーザーをインストール。(ここでエラーが出る場合、PHPに必要なものが入っていないのでググってインストールしよう!)
ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject/backend$ sudo composer install
//composer install 時は .env 環境変数ファイルは作成されないので、 .env.example を元にコピーして作成します
ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject/backend$ sudo cp .env.example .env
ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject/backend$ cd ../
//backend以下の権限がないため権限を変更する
ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject$ sudo chmod 777 -R backend/
ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject$ cd backend/
//アプリケーションキーを生成する
ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject/backend$ php artisan key:generate
Application key set successfully.
//APP_KEY=base64:bfeLkhwqXIFbGtwhaJOp0TpfHTJD3Q+SRi7lVwB・・・・となっていることを確認。

2,welcome画面を表示する

http://(EC2インスタンスのパブリックIPアドレス)
をgoogleでアクセス!

↑のようなものが表示されたらOK!!

⑨データベースを作成する

※【ギリ初心者向け】Laravel Docker AWS(EC2) Webアプリ(PHP)を0から簡単にデプロイする方法(無料) ②で作成した合わせるのでファイルをみながらすすめます。

1,mysqlにログインしてユーザーを作成する。

ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject/backend$ sudo mysql -u root -p
//PWを求められますがrootユーザーはMACに入るときのPW を入力
Enter password: 
・・・・・・
//mysqlに入れたことを確認
mysql>


2,プロジェクトの.envファイルをみながらユーザー、DBを作成する!

その前にプロジェクトの.envファイルのDBの部分をみる

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=sg_db
DB_USERNAME=sg
DB_PASSWORD=sg
//sgというdbユーザーを作成。PWはsg
mysql> create user 'sg'@'localhost' identified by 'sg';
Query OK, 0 rows affected (0.01 sec)
//databaseを作る権限をsgユーザーに付与する
mysql> GRANT ALL ON sg_db.* TO 'sg'@'localhost';
Query OK, 0 rows affected (0.00 sec)
//mysqlからでる
mysql> exit;
Bye
ubuntu@ip-自分のIP:~$ sudo mysql -u sg -p
//PWはさっき設定したsg
Enter password: 
//データベースを作成する
mysql> create database sg_db;
Query OK, 1 row affected (0.01 sec)w
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| sg_db              |
+--------------------+
//抜ける
mysql> exit;
Bye

3,テーブルを作るためにマイグレーションを実行する!

まずはマイグレーションを実行するために、mysqlに接続できるように設定を変更する。
※マイグレーションがうまくいかなかったら都度ググりましょう!結構うまくいかないパターンはあります。。キャッシュがたまっていたり。。。

ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject/backend$ sudo vi .env
//DBの部分を↓に変更。HOSTはlocalhost
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=sg_db
DB_USERNAME=sg
DB_PASSWORD=sg
ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject/backend$ sudo php artisan migrate
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (65.08ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (55.04ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (59.14ms)
Migrating: 2021_01_03_090902_create_people_table
Migrated:  2021_01_03_090902_create_people_table (31.46ms)
//マイグレーションできたらデータベースの中にテーブルが作られていることを確認すると良い
//この流れでSeederも入れてしまおう。
ubuntu@ip-自分のIP:/var/www/DockerLaravelTestProject/backend$ php artisan db:seed
Seeding: Database\Seeders\PeopleTableSeeder
Seeded:  Database\Seeders\PeopleTableSeeder (11.62ms)
Database seeding completed successfully.


4,アプリを表示して接続を確認!

http://(EC2インスタンスのパブリックIPアドレス)/hello

これにて終了です。

お疲れ様でした。

これでLaravelアプリをEC2にデプロイすることができました!!ここのDBとかをmysqlworkbenchとかで管理できたら良いですね!!
それでは良いWebアプリ制作ライフを!!

エンジニア
シェアする
SGをフォローする
管理人
SG
SG

普通すぎた多趣味社会人

普通の人たちがちょっとお得な情報や
人生がちょっとだけ幸せになるような情報をお届けします

SGをフォローする
SGブログ

コメント

タイトルとURLをコピーしました