• 2022/2/26
• 10分

【Git】Laravel×Vue.jsアプリをXserverにデプロイする方法！500エラー解決

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

「Laravel×Vue.js」で作成したWebアプリを「Xserver」にデプロイする際に色々と手間取ったので事細かくまとめていきたいと思います。

デプロイするまでにやるべき手順

叶えたいこと

• XserverにLaravel×Vue.jsプロジェクトをデプロイしたい
• メインドメインを使いたい
• Gitを使ってバージョン管理を適切に行いたい

環境や使うアプリ

• Mac(ターミナル)
• MAMP(ローカル環境)
• Xserver
• Laravel×Vue.js(以下プロジェクト呼び)
• Git
• GitHub
• FileZilla

手順

1. プロジェクトをGitHubにプッシュする
2. ターミナル操作によるSSH設定
3. PHPのバージョンを確認
4. nodebrew(Node.js)のインストール
5. composerのインストール
6. GitHubからプロジェクトをコピー
7. composerでvenderディレクトリ作成
8. .envファイルの作成
9. Laravelのセットアップ
10. シンボリックリンクを貼る
11. .htaccessの設置

今回はプロジェクトの適切なバージョン管理を行えるGitを使ってのデプロイ(Webアプリを利用できるようにすること)をしていきたいと思います。

エラーがたくさん出て詰んでしまった人はLaravelプロジェクトのGitを使わない(FTPソフトのみ)デプロイ方法も紹介していますので参考にしてください！

1.プロジェクトをGitHubにpushする

「 GitHub」にローカル環境で作成したプロジェクトをpushしていきます。以下のコマンドはプロジェクトディレクトリに移動した後に実行していきます。(MAMPを使用している場合のcdコマンドです。)

$ cd /Applications/MAMP/htdocs/プロジェクト名 

// 未導入に備えてインストール&確認コマンド
$ git --version
git version 2.30.1 (Apple Git-130)

// ユーザー設定
$ git config --global user.name "ユーザー名"
$ git config --global user.email "メールアドレス"

// ローカル初期化
$ git init

// ローカルとリモートの紐付け 
// リモートURL←GitHubよりリポジトリURL
$ git remote add origin リモートURL

// ディレクトリ内の全てのファイルをステージング
$ git add .
// コミット
$ git commit -m 'First commit'
// リモートリポジトリにpush
$ git push origin master

ここのコマンドの詳細はこちらの記事にまとめてあります。

これで対象のリモートリポジトリにLaravelのファイル群が全てアップロードされました。

全てと言いましたが以下の2つはpushコマンドではGitHubにアップロードされていないので注意してください。この2つは後ほど対処します。

• 「vender」ディレクトリ(ライブラリ系のファイル群)
• 「.env」ファイル(環境設定ファイル)

これでプロジェクトをGitHubにアップロードすることができました。この作業はファイルを更新するまでは最初の一回だけでOKです。

2.XServerにターミナルからSSH接続

続いて実際の本番環境(XServer)内に入り込んでいきます。ここからはターミナル(コマンドライン)を使っての作業です。

SSHとは「Secure Shell(セキュア シェル)」の略称でネットワークに接続されているPCを安全(セキュア)に遠隔操作できる機能のことです。

SSH設定でやること

1. SSHを使えるようにONにする
2. 公開鍵認証用鍵ペア(ID.key)を生成する
3. 「.ssh」 ディレクトリを作成
4. 中にID.keyを入れパーミションを変更

XServerでは「Xサーバーパネル」からSSH設定を変更します。公式ドキュメントが一番分かりやすいので見ながら設定してください。

SSH設定の公式ドキュメント

「アカウント」＞「SSH設定」から設定をONに、次に「公開鍵認証用鍵ペアの生成」にパスフレーズ(サーバーパスワード)を入力、「生成」をクリックするとファイル名：[サーバーID].keyと言うファイルがダウンロードされます。

完了したらファイル名([サーバーID].key)も格納場所(ダウンロードフォルダ)もいじらず一旦無視しておきます。

2.1.ターミナル操作によるSSH設定

次にターミナルを起動、カレントディレクトリは開いたままの状態で以下のコマンドを叩きます。

$ mkdir ~/.ssh

ディレクトリ(フォルダ)を作成するmkdirコマンドを使ってhomeの真下に「.ssh」フォルダを作成します。

$ mv ~/Downloads/サーバーID.key ~/.ssh/ 

先ほど生成したID.keyを「.ssh」フォルダの中にmvコマンドを使って移動させます。

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

続いてパーミション(アクセス権)を変更できるchmodコマンドを使います。引数の数字(0〜7で指定)が大きいほどアクセス権を緩く、少ないほど制限できます。

数字で指定する場合、3つ続けて指定することで左から所有者権限、グループ権限、その他のユーザに対しての権限を付与することができます。

今回は所有者のみに7(読込・書込・実行)と6(読込・書込)を付与して、操作できるようにしています。

これでSSH接続の準備は終了です。以下のコマンドを自分のサーバIDに置き換えながら実行してください。

$ ssh -l サーバーID -i ~/.ssh/サーバーID.key サーバーID.xsrv.jp -p 10022

初回接続のみこのようなレスポンスが出るかもしれません。

The authenticity of host '[サーバーID.xsrv.jp]:10022 ([XX.XXX.XXX.XX]:10022)' can't be established.
ED25519 key fingerprint is SHA256:**************************
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])?

日本語に訳すと「まだこの接続は信頼できません。暗号化キーは他に使われていません。接続を続行してもよろしいですか？」と表示されていますのでそのままyesと入力してEnterを押せば接続が開始されます。

パスワード入力を求められるので先ほどのパスフレーズ(サーバーパスワード)を入力して接続は完了です。

SSH接続を切断したい場合はexitコマンドで実行できます。ここではまだ切断せずに次のステップに進んでいきます。

[サーバID] $ exit

3.PHPのバージョンを確認

LaravelをXServerで使用できるようにするためにはPHPのバージョンが7以上でなければ動きません。XServerではPHPのバージョン確認を2つしておきます。

1. サーバーパネルから変更できるPHP
2. ターミナルから変更できるCLI用PHP

この2つはリンクしていないのでLaravelプロジェクトのPHPのバージョンを上げたい時は2箇所更新するのを忘れないでください。

3.1.PHPバージョンの確認＆更新

再度「Xサーバーパネル」にログインしたら「PHP」＞「PHP Ver切替」をクリックします。

ドメインを選択して現在設定されているPHPのバージョンを確認、7未満であれば、希望のバージョンをリストの中から選んで「変更」すればOKです。

3.2.CLI版PHPバージョンの確認＆更新

続いてCLI(コマンドラインインタフェース=ターミナルのこと)版のPHPのバージョンを確認していきます。SSH接続を解いてしまっていたら再度接続してください。

SSH接続が完了したらバージョンを確認できるphp -vコマンドを叩きます。

$ php -v
PHP 5.4.16 (cli) (built: Apr  1 2020 04:07:17) 
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2013 Zend Technologies
with Zend OPcache v7.0.5, Copyright (c) 1999-2015, by Zend Technologies

バージョンが7未満であれば以下の手順でバージョンを切り替えていきます。

PHPのバージョンを切り替える流れ

1. 変更できるバージョンを確認→変更
2. 変更したPHPを使えるように$HOME/bin/php内にシンボリックリンクを作成
3. 環境変数PATHを通す

まずはmkdirコマンドで「bin」ディレクトリを作成。

$ mkdir $HOME/bin

次に現在バージョン変更できるPHPのバージョンを確認します。

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

/opt/php-5.1.6/bin/php
/opt/php-5.3.3/bin/php
/opt/php-5.4.16/bin/php
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
/opt/php-7.4.3/bin/php
/opt/php-7.4.4/bin/php
/opt/php-7.4/bin/php
/opt/php-8.0.0/bin/php
/opt/php-8.0.1/bin/php
/opt/php-8.0.10/bin/php
/opt/php-8.0.12/bin/php
/opt/php-8.0.6/bin/php
/opt/php-8.0.7/bin/php
/opt/php-8.0/bin/php

サーバーパネルで設定したバージョンと同じ番号があることを確認したらファイルをリンクさせることができるInコマンドでシンボリックリンク(ファイルの詳細や内容は見えないただのリンク)を先ほどの「bin」ディレクトリの中に作成しておきます。PHPのバージョン部分は置き換えてください。

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

続いて環境変数PATHを通すため、ファイルの中身を変更できるVimを使って操作していきます。

viコマンドで指定したファイルが開きますので中身をそのまま変更します。

$ vi ~/.bash_profile

ファイルが開いたらiキーを押してインサートモード(挿入)にします。Backspaceで以下のコードを削除し、コピペでコードを貼り付け:wqと打ち込みvimを終了させます。sourceコマンドで設定を反映させましょう。

// ↓デフォルトであるこのコードを削除
PATH=$HOME/bin:$PATH

// ↓このコードに置き換える
PATH=$PATH:$HOME/bin

// 変更したら以下のコマンドをそのまま半角でそのまま入力し閉じる
:wq

// 設定を反映
$ source ~/.bash_profile

バージョンが変更できているか確認、問題なければ完了です。

$ php -v
PHP 8.0.12 (cli) (built: Oct 22 2021 18:35:15) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.12, Copyright (c) Zend Technologies

4.nodebrew(Node.js)のインストール

次は「Node.js」をインストールしていきます。Auth機能を使いたかったり、そもそもVue.jsを組み込むのであれば「Node.js」のnpmコマンドが必須になってきます。

Node.jsをインストールする前に管理ツールである「nodebrew」を組み込みます。これでNode.jsのバージョン管理が楽になります。

$ wget git.io/nodebrew

git.io (git.io) をDNSに問いあわせています..
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
100%[====================================>] 24,696      --.-K/s 時間 0.002s  

2022-02-24 19:03:12 (13.7 MB/s) - `nodebrew' へ保存完了 [24696/24696]

次にセットアップします。するとユーザーのホームディレクトリ配下の「.nodebrew」ディレクトリにインストールされ環境変数PATHを通してくださいと言われます。

$ perl nodebrew setup

Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

環境変数PATHを「.bash_profile」に通します。

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

変更した「.bash_profile」を反映させてnodebrewのインストールは完了です。

$ source ~/.bash_profile

一度正しくインストールできているか確認してみてください。

$ nodebrew -v

4.1.Node.jsのインストール

これでようやくNode.jsがインストールできます。以下のコマンドで「現在公式が一番推奨しているバージョンのNode.js」がインストールできます。

$ nodebrew install-binary stable

このままではまだ使えないので先ほどインストールしたバージョンのNode.jsを使えるようにします。そのためにまずはインストールされたバージョンを確認します。

$ nodebrew ls
v16.14.0
current: none

バージョンはv16.14.0、currentはnoneでOKです。このバージョンを使えるように有効かしていきます。

$ nodebrew use v16.14.0
use v16.14.0

最後に正しくインストールできているか確認して問題がなければ完了です。

$ node -v
v16.14.0

5.composerのインストール

composerはPHPパッケージ管理プログラムです。Laravelを使うには必要不可欠になってきます。また追加したライブラリなどの管理もできるのでインストールしておきます。

インストールは以下のコマンドを実行するだけです。

$ curl -sS https://getcomposer.org/installer | php

バージョンを確認して問題がなければ完了です。

$ composer -V

これでXServerに初めて接続した時のセットアップは完了です。ここからは実際に繰り返し行うことがある作業に移っていきます。

6.GitHubからプロジェクトをコピー

ここでようやく実際にGitHubにアップロードしているLaravelプロジェクトをXServerの中に落とし込みます。今回はメインドメインでアクセスした場合に表示させるように構築していきます。

XServer内のファイル

├── Home
│ ├── .ssh       ☜ここに作られてるよ
│ ├── .nodebrew  ☜ここに作られてるよ
│ ├── ドメインディレクトリ
│        ├── log
│        ├── mail
│        ├── ★Laravelプロジェクト ☜ここにコピー
│        └── public_html
│                ├── サブドメインディレクトリ
│                └── .user.ini
│                └── index.html

$ cd ドメイン

メインドメインの場合はLaravelプロジェクトを「public_html」と同階層に設置します。XServerでは「public_html」以下が公開範囲なので設定や不要なファイルを公開範囲内に設置しないためです。

カレントディレクトリを合わせたらGitHubからプロジェクトをコピーします。URLはご自身の「 GitHub」にあるリポジトリのURLを参照してください。

$ git clone https://github.com/USER/リポジトリ名

これでプロジェクトがXServerの中にコピーされました。しかしGitHubからコピーしたファイル群には「vender」ディレクトリ(ライブラリ系のファイル群)と「.env」ファイル(環境設定ファイル)の2つが除去されていますのでこの2つを作成していきます。

7.composerでvenderディレクトリ作成

ローカル環境の時にインストールしていたライブラリたちは「composer.json」というファイルに記録されています。このファイルは除去されずに残っているので以下のコマンドで「composer.json」に記録されているライブラリを自動インストールし、「vender」ディレクトリを自動生成してくれます。

$ composer install

8..envファイルの作成

続いて「.env」ファイルを作成していきます。このファイルはプロジェクトの環境設定(アプリ設定やメール設定、DB設定など)をしている重要なファイルです。

2通りの作成方法

• ローカルにある.envファイルをFTPソフトでアップロード
• ターミナルからVimを使って作成

FTPソフト(ファイル送信ソフト)を導入している方はローカルの.envファイルを本番用に修正し、直接サーバー内に送信してもOKです。

ターミナルから作成する場合はターミナル上でテキストエディタを展開できるVimを使って作成していきます。 カレントディレクトリはプロジェクトのまま以下のコマンドを実行します。

$ vim .env

カレントディレクトリ内に指定したファイルが存在しない場合は自動作成してくれるのでそのまま中身を記述していきます。ローカルの.envファイルを本番用に修正し、コピペで貼り付けます。

APP_NAME=公開するアプリ名
APP_ENV=production
APP_KEY=キー値
APP_DEBUG=false
APP_URL=公開用のURL

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=DBname
DB_USERNAME=DBユーザーネーム
DB_PASSWORD=DBパスワード
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

貼り付けたら保存して閉じるコマンドである:wqを入力すれば完了です。

:wq

9.Laravelのセットアップ

次にLaravelを本番環境で使えるようにセットアップしていきます。

アプリケーションキーの再設定

Laravelのセキュリティに使用されているキーを再設定します。

php artisan key:generate

以下のような表示が出た場合はyesで進んでください。

**************************************
*     Application In Production!     *
**************************************
Do you really wish to run this command? (yes/no) [no]:
> yes

マイグレーションとシーディング

データベース構造も作成しておきます。必要であればマイグレーションの前に「config」＞「database.php」の中のデータベース設定も変更しておいてください。

$ php artisan migrate
$ php artisan db:seed

キャッシュの削除

念の為、キャッシュも削除しておくと安心です。

$ php artisan config:clear
$ php artisan cache:clear

10.シンボリックリンクを貼る

現状のままだとドメインのみのURLでアクセスされた時「public_html」の中の「index.html」が表示されるのでこれを、「プロジェクト」＞「public」の中が表示されるようにするためにシンボリックリンクを作成します。

$ ln -s ~/ドメイン/プロジェクト名/public ~/ドメイン/public_html

その際に元々あった「public_html」は不要になりますが削除せずに名前だけ変更しておきます。

念の為、作成済みのシンボリックリンクを表示するコマンド(ls -l)と削除するコマンド(unlink)を載せておきます。削除するシンボリック名は青色になっている部分(今回はpublic_html)を指定します。

$ ls -l
合計 4
drwxr-xr-x 13 XXXXXXXX members 4096  1月 31 14:09 プロジェクト名
drwx--x--x  2 XXXXXXXX members  120  4月 30 14:36 _public_html // 元「public_html」
drwx------  2 XXXXXXXX members   10  1月 31 13:58 autoreply
drwx--x--x  2 XXXXXXXX members   10  1月 31 13:58 htpasswd
drwx--x--x  2 XXXXXXXX members   10  1月 31 13:58 log
drwx------  3 XXXXXXXX members   37  1月 31 13:58 mail
lrwxrwxrwx  1 XXXXXXXX members   53  4月 30 14:42 public_html -> /home/XXXXXXXX/ドメイン/プロジェクト名/public
drwx--x--x  2 XXXXXXXX members   10  1月 31 13:58 script
drwx--x--x  3 XXXXXXXX members   48  1月 31 13:58 xserver_php

$ unlink public

11..htaccessの設置

続いてメインドメインの「public_html」の中に「.htaccess」を設置します。どのようなURLでアクセスされてもプロジェクト名/publicにアクセスされるように設定しています。

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

「.env」ファイルと同じ手順で作成、設置してください。

これで全作業は完了です！お疲れ様でした！最後に私が実際起きたエラーと解決法を紹介しておきます。

npm run dev実行→sh: mix: コマンドが見つかりません

npmコマンドの中でもビルドするためのコマンドを実行すると以下のようなエラーが出ました。

エラー

$ npm run dev

> dev
> npm run development

> development
> mix

sh: mix: コマンドが見つかりません
npm notice 
npm notice New minor version of npm available! 8.3.1 -> 8.5.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.1
npm notice Run npm install -g npm@8.5.1 to update!

以下のコマンドを実行することで解決できました。

解決法

$ npm i --save-dev laravel-mix@latest && 
npm i --save-dev sass-loader@latest && 
npm i --save-dev postcss@latest && 
npm i --save-dev webpack@latest

Laravelが表示されない：コンソール500サーバーエラー

順調にデプロイできたと思えた私でしたがいざドメインにアクセスすると500サーバーエラーが発生しLaravelアプリが表示されませんでした。

最初はブラウザのデベロッパーツール(F12キーを押して表示)のコンソール部分に以下のようなエラーが出ていました。

エラー(コンソール画面)

Failed to load resource: the server responded with a status of 500 ()

「.env」ファイルのAPP_DEBUG=trueに編集しエラーが表示されるように設定しなおすと以下のようなエラーが表示されました。

エラー(webページ上)

Fatal error: Composer detected issues in your platform: Your Composer dependencies require a PHP version ">= 8.0.2". You are running  7.4.25 in /home/XserverUser/domain/vendor/composer/platform_check.php on line 24

解決法

このエラーは「3.1.サーバーパネルからPHPバージョンの確認＆更新」作業をし忘れていたために起きたエラーでした。バージョンを上げたら解決しました！

隠しファイル(.ファイル)を含めた全てのファイルを操作する

おまけで私はXServer内であれこれしLaravelプロジェクトディレクトリを丸々何度か移動させました。これはその時に中身の隠しファイルも含めた前ファイルを移動させる時のコマンドです。

// 隠しファイルを含めた全てのファイルを一階層上に上げるコマンド
$ mv * .[^\.]* ../

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。