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の設定
![スクリーンショット 2023-12-04 22.35.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3627919/8fcb28fb-6414-d41d-371c-9df3f5d2348d.png)


サーバー管理を押すと

![スクリーンショット 2023-12-04 22.44.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3627919/7ca69c3c-cfe3-0a67-8d74-b293305500f2.png)

こちらの画面で色々設定していきます。
#### PHPのバージョン設定
PHP Ver設定を押して作成したドメイン名を押すと現在のバージョンが表示されます。現在の推奨が8.1.22ですのでこのままにしておきます。
#### データベース設定
この部分は大事な設定になりますので必ずメモを取ってください。(全部の作業でとったほうがいいけど...)
MySQL設定を押すと
![スクリーンショット 2023-12-04 22.50.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3627919/dec909e0-5ea4-cc50-60cc-42f6705324e9.png)
MySQL追加を押してデータベース名を任意の名前でつけて作成。
続いてMySQLユーザ追加を押して、任意のユーザーID,PWを作成。
最後にMySQL一覧でアクセス権所有ユーザーに先ほど作成したユーザーを追加して完了

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

#### SSH設定
SSH設定を押すと
![スクリーンショット 2023-12-04 23.05.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3627919/7a2dac25-3ee7-8d99-cf83-3c58eaf5756f.png)
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を開いたら下記を修正してください
```diff:.bash_profile
   //変更前
-  PATH=$PATH:$HOME/bin
   //変更後
+  PATH=$HOME/bin:$PATH
```
変更した内容を反映させます。
```サーバーID
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
```
開いたらパスを追記します
```diff:.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
```
```diff:.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までコピーします。
![スクリーンショット 2023-12-06 23.50.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3627919/f6011d25-05cd-6c61-b697-1f0df91dff21.png)
続いてアップロードしたgitリポジトリに設定します。
settingsのDeploy Keysを押して、add deploy keyを押したら下記画面が表示されるのでKey欄に先ほどコピーした鍵をペーストします。(Titleは適当な名前でいいです。)
![スクリーンショット 2023-12-06 23.56.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3627919/3ef44c24-2c83-5ceb-5f7a-e5b7013b70e8.png)
設定できたら接続完了です。

#### 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に保存した画像が読み込まれない状態になっています。権限の修正方法は次の投稿で書きますのでぜひみてください。とりあえずデプロイおめでとうございます！