VPSでホームページを公開する

Laravelなどのフレームワークなどを使用してホームページを公開したいときにはVPSと契約する必要があります。

VPSと契約する

当サイトはよく聞く名前で安心なのと料金が安いという理由でさくらのVPSを使用しています。

さくらのVPSを使用する場合は当サイトはOSをUbuntu、SSHキーを「GitHub.comから取得してインストールする」にして使用しています。
GitHubでのSSHキーの追加方法がわからない方はこちらを参考にしてください。
※さくらサーバーのSSH接続時のユーザー名は選択したOS名になるので忘れないようにしてください。
例)Ubuntuで契約時はubuntuとなります

その後、契約している会社のサーバーのページに行き、サーバーの電源を入れます。
その時にサーバーのIPアドレスも確認してください。

ssh接続

ssh -l ユーザー名 IPアドレス

の形式で入力することでサーバーに接続することができます。
接続中のインストールなどは自分のPCではなく接続しているサーバーにインストールされます。

アップデートと必要なパッケージのインストール

sudo apt update
sudo apt upgrade -y
sudo apt install git curl unzip software-properties-common -y

Ondrejのリポジトリを追加

sudo add-apt-repository ppa:ondrej/php
sudo apt update

PHPのインストール

下の例ではPHP8.2をインストールしています。

sudo apt install php8.2 php8.2-cli php8.2-common php8.2-mbstring php8.2-gd php8.2-mysql php8.2-xml php8.2-curl php8.2-zip -y
sudo apt install php8.2-fpm

Composerのインストール

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer
php -r "unlink('composer-setup.php');"

スワップファイルの作成

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

MySQLのインストール

sudo apt install mysql-server -y

mysqlのユーザー、データベースの作成

sudo mysql -u root -p
CREATE DATABASE データベース名;
CREATE USER 'ユーザー名'@'localhost' IDENTIFIED BY 'パスワード';
GRANT ALL PRIVILEGES ON *.* TO 'ユーザー名'@'localhost' WITH GRANT OPTION;
FLUSH PRIVILEGES;
EXIT;

Nginxのインストール

sudo apt install nginx -y

Nginxの設定ファイルを編集

sudo rm /etc/nginx/sites-available/default
sudo nano /etc/nginx/sites-available/default

開かれたファイルに以下のように書き込み、ctrl+O、Enter、ctrl+Xと順に押し、保存してファイルを閉じてください。

server {
    listen 80;
    server_name IPアドレスもしくはドメイン名;

    root /var/www/アプリケーション名/public;
    index index.php index.html index.htm;

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

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

    location ~ /\.ht {
        deny all;
    }
}

以下コマンドを入力し、nginxに設定を適用させてください。

sudo systemctl stop apache2
sudo systemctl restart nginx
sudo systemctl start nginx
sudo systemctl reload nginx

GitHubのリポジトリをサーバーにコピーする

cd /var/www
sudo mkdir アプリケーション名
cd アプリケーション名
sudo git init
sudo git config --global --add safe.directory /var/www/アプリケーション名
sudo git remote add origin https://github.com/GitHubのユーザー名/GitHubのリポジトリ名.git
sudo git pull origin main

Laravelプロジェクトのディレクトリの所有者をユーザー名に変更

sudo adduser ユーザー名
sudo visudo

root ALL=(ALL:ALL) ALL

の場所を探して

ユーザー名 ALL=(ALL:ALL) ALL

に書き換え管理者権限を作成したユーザーに変更してください。

sudo su - ユーザー名

Laravelのenvファイルの作成と設定

sudo chown ユーザー名:ユーザー名 /var/www/アプリケーション名/.env
sudo cp /var/www/example-app/.env.example /var/www/アプリケーション名/.env
nano /var/www/アプリケーション名/.env

データベースの設定を探し、以下のように書き換えてください

DB_CONNECTION=mysql
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=データベース名
DB_USERNAME=mysqlのユーザー名
DB_PASSWORD=mysqlのパスワード

アプリケーションにcomposerのインストール

cd /var/www/アプリケーション名
sudo chown -R ユーザー名:ユーザー名 /var/www/example-app
composer install

Laravelのキー生成

cd /var/www/example-app
php artisan key:generate

データベースのマイグレーション（テーブル作成）

php artisan migrate

アプリケーションのキャッシュクリア、権限の設定

mkdir -p /var/www/アプリケーション名/storage/logs
mkdir -p /var/www/アプリケーション名/bootstrap/cache
sudo chown -R ユーザー名:ユーザー名 /var/www/アプリケーション名/storage /var/www/example-app/bootstrap/cache
sudo chmod -R 775 /var/www/アプリケーション名/storage /var/www/アプリケーション名/bootstrap/cache

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

Node.js、npmのインストール

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

Viteのインストール、ビルドを実行

cd /var/www/example-app
npm install vite
npm run build