【Git】Laravel×Vue.jsアプリをXserverにデプロイする方法！500エラー解決
この記事からわかること
- Gitを使ってデプロイする方法
- Laravel×Vue.jsのプロジェクトの場合
- Xserverにデプロイする場合の注意点
index
[open]
＼ アプリをリリースしました ／
「Laravel×Vue.js」で作成したWebアプリを「Xserver」にデプロイする際に色々と手間取ったので事細かくまとめていきたいと思います。
デプロイするまでにやるべき手順
叶えたいこと
- XserverにLaravel×Vue.jsプロジェクトをデプロイしたい
- メインドメインを使いたい
- Gitを使ってバージョン管理を適切に行いたい
環境や使うアプリ
- Mac(ターミナル)
- MAMP(ローカル環境)
- Xserver
- Laravel×Vue.js(以下プロジェクト呼び)
- Git
- GitHub
- FileZilla
手順
- プロジェクトをGitHubにプッシュする
- ターミナル操作によるSSH設定
- PHPのバージョンを確認
- nodebrew(Node.js)のインストール
- composerのインストール
- GitHubからプロジェクトをコピー
- composerでvenderディレクトリ作成
- .envファイルの作成
- Laravelのセットアップ
- シンボリックリンクを貼る
- .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設定でやること
- SSHを使えるようにONにする
- 公開鍵認証用鍵ペア(ID.key)を生成する
- 「.ssh」 ディレクトリを作成
- 中にID.keyを入れパーミションを変更
XServerでは「Xサーバーパネル」から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のバージョンを確認」〜「5.composerのインストール」はXServerにSSHで接続後最初のみに行う設定です。2回目のデプロイ時は飛ばして読み進めてください。
3.PHPのバージョンを確認
LaravelをXServerで使用できるようにするためにはPHPのバージョンが7以上でなければ動きません。XServerではPHPのバージョン確認を2つしておきます。
- サーバーパネルから変更できるPHP
- ターミナルから変更できる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のバージョンを切り替える流れ
- 変更できるバージョンを確認→変更
- 変更したPHPを使えるように$HOME/bin/php内にシンボリックリンクを作成
- 環境変数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 Technologies4.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 -v4.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.05.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 install8..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を入力すれば完了です。
:wq9.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:clear10.シンボリックリンクを貼る
現状のままだとドメインのみの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 public11..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@latestLaravelが表示されない：コンソール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 * .[^\.]* ../まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
