面談記録管理アプリ開発:LaravelアプリをConoha VPSにデプロイ!
はじめに
いよいよ、サーバーを借りてデプロイ作業に入っていきます!
実際に、行ったデプロイ作業の手順と解説を書いていきます!
VPSサーバーをレンタル
まずは、VPSサーバーをレンタルしていきます。
今回は、ConohaVPSを利用していきます。
以下の記事を参考にして、作業を進めていきます。
今回採用したセッティングは以下の通り。
項目 | |
---|---|
サービス | VPS |
イメージタイプ | Rocky Linux |
OSバージョン | 9.4(x86_64) |
料金タイプ | 6ヶ月 |
プラン | 1GB |
rootパスワード | ※任意 |
ネームタグ | ※デフォルトのものを使用 |
ドメインの登録
次に、ドメインの登録を行っていきます。
ConohaVPS内でドメインを購入することもできますが、私はムームードメインでドメインを取得したので、そちらを使っていきます。
ConohaVPS内で、ドメインを取得したい方は、以下のページなどを参考にしてみてください。
ユーザー設定
いつもroot
アカウントで入るのはまずいので、操作するアカウントを作っていきます。
以下の記事を参考にしながら、作業を進めました。
ユーザー作成
まずは、以下のコマンドを用いてlocaladmin
というユーザーを作っていきます。
adduser localadmin
パスワード設定
続いて、パスワードを設定していきます。
passwd localadmin
New password:
Retype new password:
そして、localadmin
がsudo
コマンドを使えるようにします。
usermod -aG wheel localadmin
getent group wheel
ここで、一旦ログアウトして、localadmin
でログインします。
logout
webサーバー/DBサーバーのインストール
続いて、webサーバーとDBサーバーのセットアップを行っていきます。
今回は、開発環境でXAMP環境を使っていたので、apache
とMariaDB
を採用しています。
セットアップの前に、デフォルトの環境を最新の状態にするためアップデートを行います。
sudo dnf update
アップデートが終わったら、apache
とMariaDB
をインストールしていきます。
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のインストール
まず、apache
のssl
通信をするためのモジュールをインストールします。
インストールには以下のコマンドを用います。
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証明書を発行してくれるツールを使います。
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
公式サイトのやり方に則って以下のコマンドを実行していきます。
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
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
以下のサイトなどを参考に、修正箇所を見つけていきました。
.env
ファイルにreverb
に関する設定をしていないことに気づき急いで修正!
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