🙆

面談記録管理アプリ開発:LaravelアプリをConoha VPSにデプロイ!

2025/01/17に公開

はじめに

いよいよ、サーバーを借りてデプロイ作業に入っていきます!

実際に、行ったデプロイ作業の手順と解説を書いていきます!

VPSサーバーをレンタル

まずは、VPSサーバーをレンタルしていきます。
今回は、ConohaVPSを利用していきます。

以下の記事を参考にして、作業を進めていきます。
https://support.conoha.jp/v/study-02/#01

今回採用したセッティングは以下の通り。

項目
サービス VPS
イメージタイプ Rocky Linux
OSバージョン 9.4(x86_64)
料金タイプ 6ヶ月
プラン 1GB
rootパスワード ※任意
ネームタグ ※デフォルトのものを使用

ドメインの登録

次に、ドメインの登録を行っていきます。
ConohaVPS内でドメインを購入することもできますが、私はムームードメインでドメインを取得したので、そちらを使っていきます。

ConohaVPS内で、ドメインを取得したい方は、以下のページなどを参考にしてみてください。
https://support.conoha.jp/v/domainwizard-v/

ユーザー設定

いつもrootアカウントで入るのはまずいので、操作するアカウントを作っていきます。
以下の記事を参考にしながら、作業を進めました。
https://qiita.com/ChairoHack/items/06a2e1357b646acb41c7

ユーザー作成

まずは、以下のコマンドを用いてlocaladminというユーザーを作っていきます。

adduser localadmin

パスワード設定

続いて、パスワードを設定していきます。

passwd localadmin
New password:
Retype new password:

そして、localadminsudoコマンドを使えるようにします。

usermod -aG wheel localadmin
getent group wheel  

ここで、一旦ログアウトして、localadminでログインします。

logout

webサーバー/DBサーバーのインストール

続いて、webサーバーとDBサーバーのセットアップを行っていきます。

今回は、開発環境でXAMP環境を使っていたので、apacheMariaDBを採用しています。

セットアップの前に、デフォルトの環境を最新の状態にするためアップデートを行います。

sudo dnf update

アップデートが終わったら、apacheMariaDBをインストールしていきます。

sudo dnf install -y httpd
sudo systemctl start httpd
sudo dnf install -y mariadb-server
sudo systemctl start mariadb

インストールと起動が終わったら、PHPをイントールしていきます
laravel11を用いて開発しているので、PHP8.2以上をインストールしたいです。

今回のVPS環境では8.2が用意できそうなので、PHP8.2をインストールしていきます

sudo dnf -y module install php:8.2
sudo systemctl restart httpd

SSL設定

続いて、ssl通信を行うための設定を行っていきます。

mod_sslのインストール

まず、apachessl通信をするためのモジュールをインストールします。
https://httpd.apache.org/docs/current/mod/mod_ssl.html

インストールには以下のコマンドを用います。

sudo dnf install -y mod_ssl
sudo systemctl restart httpd

ドメインの設定

次に、予め登録したドメインをapache側に設定していきます。

sudo nano /etc/httpd/conf/httpd.conf
# 以下の箇所を編集
ServerAdmin root@yourdomain.com
ServerName yourdomain.com
# その後apacheを再起動
sudo systemctl restart httpd

SSL証明書の設定

SSL通信を行うためのSSL証明書を発行するための設定を行います。

SSL証明書発行ツールのインストール

まず、SSL証明書を発行してくれるツールのインストールを行います。
今回は、certbotという無料かつ自動的にSSL証明書を発行してくれるツールを使います。
https://certbot.eff.org/

sudo dnf install certbot python3-certbot-apache
#SSLの反映
sudo certbot --apache -d yourdomain.com
#Apache再起動
sudo systemctl restart httpd

しかし、以下のようなエラーがでてきました。

Unable to find a virtual host listening on port 80 which is currently needed for Certbot to prove to the CA that you control your domain. Please add a virtual host for port 80.

どうやらバーチャルホストなるものを設定しないといけないみたいです。

sudo nano /etc/httpd/conf/httpd_conf
#以下の箇所を修正
Listen 80
<VirtualHost *:80>
    ServerAdmin root@yourdomain.com
    DocumentRoot "/var/www/html"
    ServerName yourdomain.com
</VirtualHost>
Certbot failed to authenticate some domains (authenticator: apache). The Certificate Authority reported these problems:
  Domain: yourdomain.com
  Type:   dns
  Detail: no valid A records found for yourdomain.com; no valid AAAA records found for yourdomain.com

AレコードがないらしいのでConohaVPSの設定画面からDNSタブをクリックします。

そして、紐づけたドメインの編集マークをクリックして、以下のようにAレコードを追加します。

しばらく時間をおいて、再度コマンドを実行すると無事実行できました。

#SSLの反映
sudo certbot --apache -d yourdomain.com
#Apache再起動
sudo systemctl restart httpd

SSLの自動更新設定

#証明書の更新
sudo certbot renew
#自動更新のための設定
sudo nano /etc/crontab
#末尾に以下を追記(毎月更新されるように設定)
0 0 1 * * root /usr/bin/certbot renew

これで、SSL証明書発行の設定が終わりました!

Laravelプロジェクトのインストール

次に、Laravelのインストール作業を行います。

gitのインストール

githubにアップロードしているレポジトリを持っていきたいので、gitをインストールします。

sudo dnf install git

Composerのインストール

laravelをインストールするために、PHPのパッケージマネージャーであるComposerをインストールしていきます。

Composer公式サイトのやり方に則って以下のコマンドを実行していきます。
https://getcomposer.org/download/

sudo php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
sudo php -r "if (hash_file('sha384', 'composer-setup.php') === 'dac665fdc30fdd8ec78b38b9800061b4150413ff2e3b6f88543c636f7cd84f6db9189d43a81e5503cda447da73c7e5b6') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
sudo php composer-setup.php
sudo php -r "unlink('composer-setup.php');"
#グローバルコマンドとして利用できるようにする
sudo mv ./composer.phar /usr/bin/composer
#インストールされたか確認
sudo composer --version

nodejsのインストール

フロント側のパッケージマネージャーであるnpmをインストールするためにnodejsをインストールします。
Viteというフロントエンドのビルドツールを使用するにはnodejsバージョン18以上を必要とするので、バージョンを指定してインストールします。

sudo dnf module install nodejs:18

レポジトリをダウンロード

レポジトリからlaravelプロジェクトをダウンロードしていきます。

cd /var
sudo git clone https://github.com/username/project-name.git

URLにアクセスしたときに参照されるディレクトリをダウンロードしたlarvelプロジェクト内のpublicディレクトリにします。

sudo nano /etc/httpd/conf/httpd.conf
#該当箇所を以下のように編集
DocumentRoot /var/project-name/public

ssl設定ファイルに対しても同様の設定行います。

sudo nano /etc/httpd/conf/httpd-le-ssl.conf
#該当箇所を以下のように編集
ServerAdmin root@yourdomain.com
DocumentRoot /var/project-name/public
ServerName yourdomain.com

Laravelのセットアップ

.envファイルの編集

続いて、laravelのセットアップ作業を行います。
まずは、環境設定ファイル.envファイルの編集を行っていきます。

cd /var/project-name/
sudo nano /var/project-name/.env.example
.env.example
APP_NAME=AppName    # アプリの名称
APP_ENV=production  # 本番環境の場合productionを設定
APP_KEY=            # 後ほどphp artisan key:generateで設定(ここでは空白)
APP_DEBUG=false     # 本番環境ではDebugは実施しない
APP_URL=https://yourdomain.com # ドメインを設定

LOG_CHANNEL=stack
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=localhost       # 今回はアプリサーバとDBサーバが同じなのでlocalhost
DB_PORT=3306
DB_DATABASE=test-db     # データベース名
DB_USERNAME=laravel     # MySQLのユーザー名
DB_PASSWORD=password    # 上記ユーザー名でのパス

.env.example.envとしてコピーします。

sudo cp .env.example .env

各種ライブラリのインストール

laravelで用いている各種ライブラリのインストールを行います。
まずはバックエンド側から

sudo composer install

次に、フロントエンド側

sudo npm install
sudo npm run build

DBのマイグレーション

以下のコマンドを用いて、DBのマイグレーションを行います。

sudo php artisan migrate

しかし、以下のようなエラーが出ました。

could not find driver (Connection; mysql, SQL: select table_name as name...

どうも必要なモジュールが不足していることによるエラーみたいです。
必要なモジュールをインストールします。

sudo dnf install php-mysqlnd

php.iniを編集して、モジュールを適用していきます。

sudo nano /etc/php.ini
#該当箇所を編集
extension=pdo_mysql

そして、apacheを再起動します。

sudo systemctl restart httpd

再度マイグレーションを実行してみます。

sudo php artisan migrate

またもエラーが...

SQLSTATE[HY000] [1045] Access denided for user 'laravel'@'localhost'...

どうも.envで設定したユーザーでSQLにアクセスできないみたいです。

MariaDBアクセスして、DBにアクセスするユーザーを設定していきます!

sudo mysql -u root -p
#パスワード入れる
MariaDB [(none)]>

以下は、mariaDBでの実施コマンドです。

#.envで設定したユーザーの作成
MariaDB [(none)]> create user laravel@localhost identified by 'password';
#以下のようなメッセージか帰ってくればOK
Query OK, 0 rows affected (0.023 sec)
#.envで設定したDBを作成
MariaDB [(none)]> create database `test-db`;
#DBを指定
MariaDB [(none)]> use test-db;
#指定したDBを操作できるようにっ権限を付与
MariaDB [(none)]> GRANT ALL PRIVILEGES ON * TO 'laravel'@'localhost';
FLUSH PRIVILEGES;
#試しに作成したユーザーで入ってみる
sudo mysql -u laravel -p

再度マイグレーション実行

sudo php artisan migrate

無事成功!!やったぁ!!!

テストページしか表示されない!!!

ここまでの設定でページにアクセスできるはずなので、https://yourdomain.comにアクセスします。

しかし、apacheのテストページしか表示ませんでした。。。
しかもhttps通信として認識されてない!

色々と調べて、apacheの設定を見直していきます!

sudo nano /etc/httpd/conf/httpd.conf
#該当箇所を以下のように修正
Listen 80
<VirtualHost *:80>
    ServerAdmin root@yourdomain.com
    DocumentRoot "/var/project-name/public"
    ServerName yourdomain.com
    #ここを追記↓
    Redirect permanent / https://yourdomain.com

    ### 省略 ###
</VirtualHost>
# Further relax access to the default document root:
<Directory "/var/project-name"> #←ここのパスをプロジェクトディレクトリを指定
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

80番ポートのバーチャルホスト設定と該当ディレクトリのアクセス許可設定を行いました。

これで、プロジェクトファイルにアクセスできるようになり、httpリクエストをしたとしてもhttpsにリダイレクトするようになったはずです!

これで、再度https://yourdomain.comにアクセスしましたが、結果は変わらず。。。

色々調べた結果https通信用の設定ファイルをいじる必要があるみたいです。

sudo nano /etc/httpd/conf/httpd-le-ssl.conf
#該当箇所を以下のように修正
<VirtualHost *:443>
    ServerAdmin root@yourdomain.com
    DocumentRoot "/var/project-name/public"
    ServerName yourdomain.com

    Include /etc/letsencrypt/options-ssl-apache.conf
    #ファイルパスを正しい形に変更↓
    SSLCertificateFile /etc/letsencrypt/live/yourdomain.com/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/yourdomain.com/privkey.pem
</VirtualHost>

これで再度アクセス!
今度は、failed to open stream: Permission deniedというエラー画面が表示されました。。。

これが出たということは、ページへのアクセスはひとまずできてるみたいです。

エラーメッセージから察するに該当ディレクトリへの権限がないみたいなので、
指摘されたディレクトリの中身に権限を付与します。

sudo chmod -R 777 /var/project-name/storage
sudo php artisan storage:link

念の為、ストレージのパスをリンクさせておきます。

そして、https://yourdmain.comにアクセス!

ログインページが無事表示されました!

WebSocketが機能してない!

無事ログインできるようになったので、コンソールから直接ユーザーデータを挿入して、アカウントを作成しログインしました。

試しに、適当な面談記録を作ってチャット機能をテストしようとしましたが、メッセージが送信できないし、リアルタイムにメッセージが反映されてない。。。
ChromeのF12キーを押して、ネットワークの状態やコンソールの情報を確認します。

WebSocket connection to 'wss://localhost:8080/...' failed

以下のサイトなどを参考に、修正箇所を見つけていきました。
https://github.com/laravel/reverb/issues/107

.envファイルにreverbに関する設定をしていないことに気づき急いで修正!

.env
REVERB_APP_ID=your_id
REVERB_APP_KEY=your_app_key
REVERB_APP_SECRET=your_app_secret
#ここを修正
REVERB_HOST="yourdomain.com"
REVERB_PORT=8080
#追記↓
REVERB_SERVER_PORT=8081
#httpsに修正
REVERB_SCHEME=https

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

REVERB_PORTで受け取ったメッセージをREVERB_SERVER_PORTに流しています。
逆に、サーバー内で内部的にreverbサーバーへ情報を送信する場合は、REVERB_SERVER_PORTからREVERB_PORTへ情報が流れていきます。

2つのポートに分ける意義を勉強不足のためよく理解できていないのですが、
おそらく、新規で送信されるメッセージとサーバー側から送信されるレスポンスなどの処理をポート分けることで混雑を回避しているのではないかと思います。
(間違っていたらすいません。。。)

laravel側のセティングが終わったら、apache側の設定をしていきます。

sudo nano /etc/httpd/conf/httpd.conf
#8080を追記
Listen 80
Listen 8080
sudo nano /etc/httpd/conf/httpd-le-ssl.conf
<IfModule ssl_mod.c>
<VirtualHost *:8080>
    ServerName yourdomain.com
    ServerAdmin root@yourdomain.com
    DocumentRoot "/var/project-name"

    <Directory /var/project-name>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        allow from all
        Require all granted
    </Directory>

    ProxyPreserveHost on
    <IfModule mod_proxy.c>
        <IfModule mod_proxy_wstunnel.c>
            RewriteEngine On
            RewriteCond %{HTTP:Upgrade} =websocket [NC]
            RewriteCond %{HTTP:Connection} upgrade$ [NC]
            RewriteRule ^/app(.*)$ ws://localhost:8081/app$1 [P,L]

            ProxyPass /app ws://localhost:8081/app
            ProxyPassReverse /app ws://localhost:8081/app
        </IfModule>
        RewriteCond %{REQUEST_URI} ^/app [NC]
        RewriteRule ^/app(.*)$ http://localhost:8081/app$1 [P,L]
        
        ProxyPass /app http://localhost:8081/app
        ProxyPassReverse /app http://localhost:8081/app
    </IfModule>

    Include /etc/letsencrypt/options-ssl-apache.conf
    SSLCertificateFile /etc/letsencrypt/live/yourdomain.com/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/yourdomain.com/privkey.pem
</VirtualHost>
<IfModule>

apacheをリスタートします。

sudo systemctl restart httpd

その後、reverbサーバーを立ち上げます。

sudo php artisan reverb:start

問題なくチャット機能が使えるようになりました!

おわりに

ついに、デプロイすることができました!!

発見したバグや機能改善は継続的に行っていこうと思います。

ではでは!

Discussion