Laravel12 + vueをxserverにデプロイする方法
自身のHPをWordPressからlaravelに移行してxserverにデプロイした際の備忘録。
環境
PC:mac air m2
フレームワーク:laravel/breeze/vue(認証系画面はオミット)
サーバ:xserver
Xserverにssh接続する
ssh接続方法は下記参照(私はmacのターミナルで入ってます)
CLI版のPHPバージョン変更
xserverではドメインでのPHP設定は管理画面でできるが、ssh接続時にcomposerのインストールなどに使うPHPとは別物なので、そっちは以下のCLI用のphpのバージョンアップが必要になる。
# 既存のphpリンク削除
rm ~/bin/php
# 新しいPHPにリンク作成
ln -s /usr/bin/php8.3 ~/bin/php
# 反映
source ~/.bash_profile
# 確認
php -v
作成したディレクトリのパスを通す
vi $HOME/.bash_profile
以下のパスを追加
PATH=$HOME/bin:$PATH
設定を保存
source ~/.bash_profile
プロジェクトの配置
プロジェクトのクローン
gitからプロジェクトをクローンして配置
ドメインルートに移動(public_htmlと同じ階層)
cd /home/{サーバID}/{ドメイン}/
※サブドメイン(サブドメイン.ドメインの形式選択時)の場合も上記のパス
※Xserverはpublic_htmlの中に入っているファイルがhttp://ドメイン名で閲覧できるようになります。
git clone リポジトリのURL
クローンしたプロジェクトがpublic_htmlと同じ階層に作成されればOK
※public_htmlの中ではないです
.envの編集
gitには.venderと.envが入ってないと思うのでそれぞれ作成
cd プロジェクトのディレクトリ
cp .env.example .env
.envをリリース用に編集
vi .env
編集する項目は以下
※事前にxserver管理画面でDBを作成しておく
APP_NAME={アプリ名}
APP_ENV=production
APP_DEBUG=false
APP_URL=http://ドメイン名(サイトを表示するURL)
LOG_LEVEL=error
#mysql使用時(各情報はxserverのサーバパネルのDB設定のDocで確認できます)
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=DB名
DB_USERNAME=ユーザ名
DB_PASSWORD=パスワード
#DB未使用の場合は以下を設定
SESSION_DRIVER=cookie
Composerのインストール
初期インストール時
Composerのセットアップスクリプトをダウンロード
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
セットアップスクリプトを使ってComposerをインストール
php composer-setup.php --install-dir=bin --filename=composer
インストールスクリプトを削除
php -r "unlink('composer-setup.php');"
export PATH="$PATH:$HOME/bin"
変更を有効にする
source ~/.bashrc
Composerのアップデート
下記でバージョン確認.
composer -V
composer --version
バージョンが古い場合は下記を実行
composer self-update
Node.jsのインストール
wget git.io/nodebrew perl nodebrew setup
パスを通すために**.bash_profile**を開く
vi $HOME/.bash_profile
nodebrewのパスを追記
PATH=$HOME/.nodebrew/current/bin:$HOME/bin:$PATH
保存
source ~/.bash_profile
Node.jsをインストール（バージョンは環境に合わせてください）
nodebrew install v16.17.0 nodebrew use v16.17.0
NodeJsの更新
現在の Node バージョン確認
node -v
利用可能なバージョンを一覧表示
nodebrew ls-remote
Node.jsをインストール（バージョンは環境に合わせてください）
nodebrew install v24.11.0
nodebrew use v24.11.0
Laravelプロジェクトのビルド
Composerの実行
composer install
NPMインストール
npm install && npm run build
npmが新しすぎる場合は以下で実行（おそらくLaravel11以降はこっち）
npm install --legacy-peer-deps && npm run build
APP_KEYを生成
php artisan key:generate
DB作成(DBを使う場合)
php artisan migrate
ストレージリンク作成
php artisan storage:link
シンボリックリンクの作成（ここが結構ミスやすいです）
Xserverでは、public_html ディレクトリが公開領域として用意されています。
ここに配置されたファイルは、ドメイン経由で外部から直接アクセス可能になります。
今回は Laravel プロジェクトの public を公開領域として使うため、
既存の public_html を削除してシンボリックリンクで置き換えます。
※ .htaccess を使う方法もありますが、ここでは採用しません。
まずはpublic_htmlのバックアップを取ります
ドメインディレクトリに移動
cd /home/サーバID/ドメイン名
コピーを作成
cp -r public_html public_html_bk
次に削除します
rm -rf public_html
そして Laravel プロジェクトの public にリンクを張ります：
ln -s /home/サーバID/ドメイン名/プロジェクトディレクトリ/public /home/サーバID/ドメイン名/public_html
※ln -s [リンク元] [リンク先] の順序に注意！
今回は public_html を Laravel の public へ「つなげる」イメージです。
サブドメインの場合
サブドメインの公開ディレクトリは下記のようになっています。
/home/サーバID/ドメイン名/public_html/サブドメイン名
※通常のドメインとの違いはサブドメイン自体が公開ディレクトリになっているところ
そのためシンボリックリンクを貼る際は下記のように一度このサブドメインディレクトリを消す必要があります。
cd /home/サーバID/ドメイン名/public_html
rm -rf サブドメイン名
シンボリックリンクを貼る
※実行する際は/home/サーバID/ドメイン名/public_htmlディレクトリ内で実行
ln -s ~/ドメイン名/laravelプロジェクト名/public サブドメイン名
サーバIDとかわからない場合はプロジェクトディレクトリにcdで移動してpwdコマンドを実行するとパスがとれます。
pwd
Discussion