Laravel10×Docker×Vite環境でXserverにデプロイする

環境

• Laravel10 sail
• PHP8.2
• Docker

はじめに

突然ですがローカル環境で作成したものをデプロイしてサーバー上で確認できたら感激しますよね？
僕は毎回感動します。特に最初にデプロイできた時は人生の三番目くらい感動しました。
なんでこんなに感動するのかを考えた時、自分で作成した物＋ややこしいデプロイ作業を終えたという達成感が一気に感じれるからだと思います。
ただ初心者の方に、あのややこしすぎるデプロイ作業で苦しんでほしくないという気持ちでいっぱいですのでこの記事を書こうと思いました。
とても長くなると思いますが、順番通りにしていただければデプロイできますので安心してください！

準備するもの

Xserverとの契約
https://www.xserver.ne.jp/price/price_domain.php
ドメイン取得後１０日間は無料で使用できるので安心してください！

流れ

• Xserverの設定
• Gitの設定
• SSH上での環境設定
• SSHとGitの接続
• Laravelを使用するための設定

Xserverの設定

サーバー管理を押すと

こちらの画面で色々設定していきます。

PHPのバージョン設定

PHP Ver設定を押して作成したドメイン名を押すと現在のバージョンが表示されます。現在の推奨が8.1.22ですのでこのままにしておきます。

データベース設定

この部分は大事な設定になりますので必ずメモを取ってください。(全部の作業でとったほうがいいけど...)
MySQL設定を押すと

MySQL追加を押してデータベース名を任意の名前でつけて作成。
続いてMySQLユーザ追加を押して、任意のユーザーID,PWを作成。
最後にMySQL一覧でアクセス権所有ユーザーに先ほど作成したユーザーを追加して完了

SSL設定

SSL設定を押していただき、ドメインを選択しSSLをonに変更してください。三十分ほどで適応します的な文言が出てくると思います。

SSH設定

SSH設定を押すと

SSH設定からonにチェックし、設定するを押します。
続いて、公開鍵認証用鍵ペアの生成を押し、パスフレーズを作成。
任意の値で大丈夫です。(メモ必須)

そうするとサーバーID.keyファイルがダウンロードされます。

Gitの設定

とりあえず自分が作成したリポジトリにローカル環境で作成したLaravelファイルをPushできたらゴールです。
色々なPush方法がありますが、ターミナル(コマンドプロント)でPushするのが一番簡単だと僕は思います。
下記サイト参考に進めてください。
https://prog-8.com/docs/git-env

SSH上での環境設定

ここまで大変だったと思いますが、もう一踏ん張り頑張りましょう！
デスクトップ上で、適当に作業ディレクトリを作成します。
続いてターミナルで作業ディレクトリに移動し作業をしていきます。
.sshファイルを作成します。

作業ディレクトリ

mkdir .ssh

続いてSSH設定完了後にダウンロードされた"サーバーID.key"を.sshファイルの中に入れます。
パーミッションの設定をします

作業ディレクトリ

chmod 700 .ssh
chmod 600 .ssh/サーバーID.key

サーバーID.keyの名前をid_rsaに変換します

作業ディレクトリ

mv .ssh/サーバーID.key .ssh/id_rsa

XserverにSSH接続する

それではターミナルからXserverに接続します

作業ディレクトリ

cd .ssh

.ssh

ssh -l サーバーID -i id_rsa サーバーID.xsrv.jp -p 10022

パスフレーズを入力しろ的な文言が出てきますので、"公開鍵認証用鍵ペアの生成"をした際のパスフレーズを入力しエンターしてください。
コマンドラインの左側がサーバーIDに切り替わったら成功です。

SSHでの環境設定

僕も最初は耳を疑いました。ローカル環境でnodeやcomposerの環境構築が終わり、もうやらなくて済むと思っていたのにSSH上でもまたnodeたちの設定をしなければいけないことに、、、
正直絶望しました。よく挫けなかったと自分を褒め称えてます。
それでは環境構築始めていきましょう！

PHPのバージョン設定

XserverのPHPバージョンに合わせていきます。
まずHOME直下にbinディレクトリを作成していきます

サーバーID

mkdir $HOME/bin

使用可能なPHPバージョンを調べます。

サーバーID

find /opt/php-*/bin -type f -name 'php'

Xserverに一番近いバージョンに合わせます。今回僕の環境では8.1.22でしたのでこちらを指定します

サーバーID

ln -s /opt/php-8.1.22/bin/php $HOME/bin/php

間違えて指定しまった場合下記コマンドで消してください。

サーバーID

unlink $HOME/bin/php

次にbinディレクトリにパスを通します。

サーバーID

vi ~/.bash_profile

bash_profileを開いたら下記を修正してください

.bash_profile

   //変更前
-  PATH=$PATH:$HOME/bin
   //変更後
+  PATH=$HOME/bin:$PATH

変更した内容を反映させます。

source ~/.bash_profile

反映できたかどうか確認します

サーバーID

php -v

無事指定したバージョンが表示されれば完了です。

Composerのバージョンを上げる

Xserverでは元々Composerがインストールされているのですが、v1系となっており、v2系じゃないとエラーが起きてしまいます。なのでv２系にアップグレードしましょう
まず公式サイト上部に記載されている４つのコマンドを全て実行します。
https://getcomposer.org/download/
続いてbin内にcomposerに移動します

サーバーID

mkdir -p $HOME/bin
mv composer.phar $HOME/bin/composer

設定画面を開きます。

サーバーID

vi ~/.bashrc

開いたらパスを追記します

.bashrc

+  export PATH=$HOME/bin:$PATH

保存したら設定内容を反映します

サーバーID

source ~/.bashrc

ここまでできたら最後に反映されているかどうか確認

サーバーID

composer -v

無事2以上のバージョンが表示されれば完了です。

Node.jsをインストール

まずnodebrewをインストールしていきます。

サーバーID

wget git.io/nodebrew

次にnodebrewを使えるようにします

サーバーID

perl nodebrew setup

セットアップが完了したらログが表示されるので.bash_profileにパスを通します。
次にbinディレクトリにパスを通します。

サーバーID

vi ~/.bash_profile

.bash_profile

+  echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

変更した内容を反映させます。

サーバーID

source ~/.bash_profile

下記コマンドでバージョンが表示されれば完了です。

サーバーID

nodebrew -v

続いてnodebrewを使用してnode.jsをインストールします。
ここで注意なのが、最新のものだったり古いものをインストールしてしまうと場合によってはエラーになってしまいます。僕の環境ではv17.6.0がスムーズに動作しましたのでこちらをインストールします。

サーバーID

nodebrew install v17.6.0

続いてインストールしたnodeを設定します

サーバーID

nodebrew use v17.6.0

下記コマンドで設定したバージョンが表示されれば環境構築完了です。

サーバーID

node -v

SSHとGitの接続

sshで鍵を発行し、gitにアップロードしたリポジトリと接続します。
色々と何か聞いてきますが脳死で空欄のままエンターでいいです。

サーバーID

ssh-keygen -t rsa -b 4096

鍵が発行されたらコピーします。

サーバーID

cat $HOME/.ssh/id_rsa.pub

下記文章が出てきますのでssh-rsa~xserver.jpまでコピーします。

続いてアップロードしたgitリポジトリに設定します。
settingsのDeploy Keysを押して、add deploy keyを押したら下記画面が表示されるのでKey欄に先ほどコピーした鍵をペーストします。(Titleは適当な名前でいいです。)

設定できたら接続完了です。

SSHにGitでアップロードしたファイルを保存

それでは保存先のファイルに移り保存します。

サーバーID

cd (サーバーID).xsrv.jp
git clone (httpsかsshのurl)

クローンできたかlsコマンドでファイル名を確認してください。

Laravelを使用するための設定

venderファイルと.envファイルを作成していきます。

サーバーID

cd ~/(サーバーID).xsrv.jp/gitで保存したファイル
composer install
cp .env.example .env

下記コマンドでAPP_KEYを更新します

gitで保存したファイル

php artisan key:generate

ついでにViteが使えるようにnpmもインストールします

gitで保存したファイル

npm install

.envファイルを一部修正します。

gitで保存したファイル

vi .env

.env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://ドメイン名 //追記

LOG_CHANNEL=stack
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=Xserverのサーバーパネルの「MySQL設定」の画面下に記載 //追記
DB_PORT=3306
DB_DATABASE=作成したデータベース名 //追記
DB_USERNAME=作成したユーザー名 //追記
DB_PASSWORD=作成したパスワード //追記

DBはXserverで設定したユーザー名などを入れましょう
もしPusherやメール設定している方はここで修正してください

続いてマイグレーションを実行します

gitで保存したファイル

php artisan migrate:refresh --seed

ここでエラーが起こるかたは.envに設定しているDBの値が間違っています。
それではViteも起動しましょう！

gitで保存したファイル

npm run build

シンボルリックリンクを作成

サーバーID

ln -s /home/サーバーID/(サーバーID).xsrv.jp/gitで保存したファイル/public /home/サーバーID/(サーバーID).xsrv.jp/public_html

次にstorageにシンボリックリンクを貼りましょう。

サーバーID

cd $HOME/サーバーID/(サーバーID).xsrv.jp/gitで保存したファイル
php artisan storage:link

最後に.htaccessを編集
.htaccessに移動/編集

サーバーID

cd $HOME/サーバーID/(サーバーID).xsrv.jp/public_html
vi .htaccess

下記を追加

.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)$ public/$1 [QSA,L]
</IfModule>

保存したらURLにアクセスしてみましょう！
Https://(サーバーID).xsrv.jp
無事作成したページが閲覧できたら終了です！お疲れ様でした！
といってもまだ完璧にはできていません、、
storageでシンボリックリンクを通したのですが、権限修正をしていないので、storageに保存した画像が読み込まれない状態になっています。権限の修正方法は次の投稿で書きますのでぜひみてください。とりあえずデプロイおめでとうございます！