Nuxt3とLaravel11 AWS環境

今回はコストだけを追求して、EC2インスタンスで環境を作ります。

1 osアップデート

sudo dnf update 

2 nginxセットアップ

sudo dnf install nginx
# インストール
$ sudo dnf install nginx

# バージョン確認
$ nginx -v
nginx version: nginx/1.24.0

# 自動起動設定
$ sudo systemctl enable nginx.service

# 起動
$ sudo systemctl start nginx.service

# 起動状態確認
$ sudo systemctl status nginx.service

# 動作確認
$ curl -s http://localhost | grep title

## 以下が表示されたらOK
<title>Welcome to nginx!</title>

3 PHPセットアップ

# phpと関連パッケージインストール
$ sudo dnf install  php-fpm php-mysqli php-json php php-devel

# バージョン確認
$ php -v
PHP 8.3.10 (cli) (built: Jul 30 2024 13:44:37) (NTS gcc x86_64)
Copyright (c) The PHP Group
Zend Engine v4.3.10, Copyright (c) Zend Technologies
    with Zend OPcache v8.3.10, Copyright (c), by Zend Technologies
$ php-fpm -v
PHP 8.3.10 (fpm-fcgi) (built: Jul 30 2024 13:44:37)
Copyright (c) The PHP Group
Zend Engine v4.3.10, Copyright (c) Zend Technologies
    with Zend OPcache v8.3.10, Copyright (c), by Zend Technologies

4 composer セットアップ

以下のページにあるコマンドを実行
https://getcomposer.org/download/

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'dac665fdc30fdd8ec78b38b9800061b4150413ff2e3b6f88543c636f7cd84f6db9189d43a81e5503cda447da73c7e5b6') { 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 --version

####5 mysqlセットアップ

sudo rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2023
sudo dnf install mysql-community-server

# MySQL自動起動設定
$ sudo systemctl enable mysqld.service

# MySQL起動
$ sudo systemctl start mysqld.service

# MySQL起動確認
$ sudo systemctl status mysqld.service


$ sudo grep 'temporary password' /var/log/mysqld.log

# root@localhostの後に記述されているのが初期パスワード
20xx-xx-xxThh:mm:ss.750138Z 6 [Note] [MY-010454] [Server] A temporary password is generated for root@localhost: {パスワード情報}

# パスワード入力時は上で確認したパスワードを入力
$ mysql -u root -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.35

Copyright (c) 2000, 2023, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

DB作成
$ mysql -u root -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 12
Server version: 8.0.35 MySQL Community Server - GPL

Copyright (c) 2000, 2023, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.01 sec)

mysql> create database laravel_db;
Query OK, 1 row affected (0.01 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| laravel_db         |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)

6 nodeセットアップ

curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
sudo yum install -y nodejs

7 gitセットアップ

sudo dnf install git -y

8 フォルダ権限変更、実行権限変更

$ sudo chown ec2-user:nginx /var/www
$ sudo chmod 2775 /var/www
$ sudo usermod -a -G nginx ec2-user

# /var/wwwフォルダは以下の権限になる
drwxrwsr-x.  4 ec2-user nginx    xx Nov  x dd:mm www

9 git clone

まずはgithubにSSH接続を可能にする
https://qiita.com/shizuma/items/2b2f873a0034839e47ce

$ cd /var/www/
$ git clone https://github.com/xxxx/{アプリ名}.git

10 Laravelセットアップ

sudo chown -R nginx:nginx /var/www/html/studymanagement/back
sudo chmod -R 775 /var/www/html/studymanagement/back/storage /var/www/html/studymanagement/back/bootstrap/cache

composer install --optimize-autoloader --no-dev
composer update

 cp .env.example .env

 DB_HOST=127.0.0.1

 php artisan key:generate

envファイルを修正
 nano .env

 php artisan migrate

 sudo chmod -R 777 storage

11 Nuxt3セットアップ

nuxtのディレクトリーに移動
npm install
npm run build

12 Nginxセットアップ

cd /etc/nginx/

nano default.conf

c2-user@ip-10-0-0-21 nginx]$ cat default.conf 
server {
    listen 80;
    server_name _;  # 必要に応じてサーバー名を設定してください

    # Laravelの設定
    location /api/ {
        root /var/www/html/studymanagement/back/public;
        index index.php;
        try_files $uri $uri/ /index.php?$query_string;

        # PHP-FPMへの設定
        location ~ \.php$ {
            include fastcgi_params;
            fastcgi_pass unix:/var/run/php-fpm.sock;  # PHP-FPMのソケットパスを確認してください
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            fastcgi_param HTTP_HOST $host;
            fastcgi_param HTTP_X_REAL_IP $remote_addr;
            fastcgi_param HTTP_X_FORWARDED_FOR $proxy_add_x_forwarded_for;
        }
    }

    # Nuxtの設定
    location / {
        root /var/www/html/studymanagement/nuxt;
        try_files $uri $uri/ @nuxt;

        location @nuxt {
            proxy_pass http://127.0.0.1:3000;  # Nuxtアプリケーションが動作しているアドレスとポート
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }

    # 静的ファイルのキャッシュ設定（必要に応じて調整）
    location ~* \.(jpg|jpeg|gif|css|png|js|ico|svg)$ {
        expires 30d;
        access_log off;
    }
}