xserverVPSでlaravel(11系)プロジェクトをデプロイする

sshでサーバーにアクセス

ssh -i ~/.ssh/id_rsa user@ipアドレス

必要なパッケージをインストールする

sudo apt update
sudo apt install nginx
sudo apt install php-fpm php-mbstring php-xml php-mysql
sudo apt install mysql-server
sudo apt install composer

Nginx設定ファイルの作成

sudo vim /etc/nginx/sites-available/your_laravel_project

server {
    listen 443 ssl http2;  # SSL用にポート443をリッスン
    server_name example.com;
    root /var/www/html/your_laravel_project/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php index.html index.htm;

    charset utf-8;

    ssl_certificate /etc/nginx/ssl/certificate.crt;        # ダウンロードしたSSL証明書
    ssl_certificate_key /etc/nginx/ssl/private.key;         # ダウンロードした秘密鍵
    ssl_trusted_certificate /etc/nginx/ssl/intermediate.crt; # ダウンロードした中間証明書

    # SSLセキュリティ設定(推奨)
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384';
    ssl_dhparam /etc/nginx/ssl/dhparam.pem;  # Diffie-Hellmanパラメータ(生成済み)

    location / {
        # basic認証
        auth_basic "Restricted Access";
        auth_basic_user_file /etc/nginx/.htpasswd;

        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.3-fpm.sock; # PHPのバージョンに応じて変更
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    # CORS設定を追加
    location ~* \.(eot|ttf|woff|woff2|css|js)$ {
        add_header 'Access-Control-Allow-Origin' 'https://example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Origin, Authorization, Accept, Content-Type';
        add_header 'Access-Control-Allow-Credentials' 'true';
    }

    location ~ /\.ht {
        deny all;
    }

    # エラーログ
    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
}

# HTTPからHTTPSへのリダイレクト設定(オプション)
server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

設定ファイルをsites-enabledにシンボリックリンクします

sudo ln -s /etc/nginx/sites-available/your_laravel_project /etc/nginx/sites-enabled/

Nginx再起動

sudo systemctl restart nginx

ソースコードをデプロイする

ローカルプロジェクトをXserverVPSへアップロードする

rsync -avz –exclude ‘vendor’ –exclude ‘.env’ ./laravel_project/ username@your_vps_ip:/var/www/your_laravel_project/

※デプロイ時、Permission deniedエラーが出たら所有権、パーミッションの変更を行う

sudo chown -R username:username /var/www/html/your_laravel_project
sudo chmod -R 755 /var/www/html/your_laravel_project

Composerを使って依存関係をインストール

cd /var/www/your_laravel_project
composer install –optimize-autoloader –no-dev

権限の設定

sudo chown -R www-data:www-data /var/www/your_laravel_project
sudo chmod -R 755 /var/www/your_laravel_project
sudo chmod -R 775 /var/www/your_laravel_project/storage
sudo chmod -R 775 /var/www/your_laravel_project/bootstrap/cache

.envファイルの設定

サーバー上で.envファイルを正しく設定し、データベースの接続情報やAPP_KEYを設定します

APP_NAME=your-app-name
APP_ENV=production
APP_KEY=php artisan key:generateで生成
APP_DEBUG=false
APP_TIMEZONE=Asia/Tokyo
APP_URL=https://example.com

php artisan key:generate

キャッシュクリア

php artisan config:cache
php artisan route:cache
php artisan view:cache

DNSの設定

XserverVPSのDNS設定に移動してAレコードを追加します

ホスト名種別内容TTL優先度
example.comA123.45.67.8903600

※設定が反映されるまで最大48時間程度かかる

ログ確認方法

Nginxログ

エラーログ: /var/log/nginx/error.log

アクセスログ: /var/log/nginx/access.log

sudo tail -f /var/log/nginx/error.log

laravelログ

sudo tail -f /path-to-your-project/storage/logs/laravel.log

CORS問題

リソースの取得元がhttpsとhttp入り混じってるとCORS問題に遭遇する

config/cors.phpファイルを作成したり

php artisan config:publish cors

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['https://example.com'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

Nginxの設定ファイルにCORSの設定を追加したり

    # CORS設定を追加
    location ~* \.(eot|ttf|woff|woff2|css|js)$ {
        add_header 'Access-Control-Allow-Origin' 'https://example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Origin, Authorization, Accept, Content-Type';
        add_header 'Access-Control-Allow-Credentials' 'true';
    }

publicディレクトリの中にhotファイルがあれば、削除する

cors.phpファイルを作成したり、nginxの設定にcors関連の設定を追加しても問題解決できなかったので、最後にhotファイルを削除したらあっさり解決しました。

こちらを参考しました。

Laravel Viteでnpm run buildを行っても変更が反映されない原因と対策
Laravel Viteでnpm run buildを行っても、レイアウトが崩れたまま、Tailwind CSS等の変更が反映されない場合があります。この場合、npm run devを止めた状態で、publicディレクトリの中に「hot」フ

コメント

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