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

この記事からわかること

  • Gitを使ってデプロイする方法
  • Laravel×Vue.jsのプロジェクトの場合
  • Xserverにデプロイする場合の注意点

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

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

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

叶えたいこと

環境や使うアプリ

手順

  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のファイル群が全てアップロードされました。

GitHubにアップロードされたLaravelプロジェクト

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

これでプロジェクトを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設定の公式ドキュメント

Xサーバー-top

「アカウント」>「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つしておきます。

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

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

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

    Xサーバー-top

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

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

    XサーバーからPHPのバージョンを切り替える

    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通りの作成方法

    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

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

    $ ls -l
    合計 4
    -rw----r-- 1 XXXXXXXX members 2633  2月 24 21:18 index.html
    lrwxrwxrwx 1 XXXXXXXX members   42  2月 24 21:36 public -> /home/XXXXXXXX/ドメイン/プロジェクト名/public
    $ 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 * .[^\.]* ../

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

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

    searchbox

    スポンサー

    ProFile

    ame

    趣味:読書,プログラミング学習,サイト制作,ブログ

    IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
    今はCMSを使わずこのサイトを完全自作でサイト運営中〜

    New Article

    index