自分だけのクイズを作成しよう - Quipha
スポンサーリンク

【エックスサーバー】Laravelで作成したWebアプリを公開

Laravel

当サイトではアフィリエイト広告を利用しています。

スポンサーリンク

はじめに

今回はエックスサーバーでLaravelの環境を構築し、Webアプリを公開する手順をまとめました。

エックスサーバーはレンタルサーバーですが、SSH接続しコマンドの実行もでき、Laravelが稼働する環境を作成することができます。
月額費用も固定で、コスパもよく、Webアプリケーションを公開する環境としてはオススメです。

エックスサーバーの新規申込方法については以下の記事を参考にしてください。

エックスサーバーへの申し込みは以下からできます。

エックスサーバーへの新規申し込みは、無料期間がありますので満足いくかどうか事前に確認できます。
まずは申し込んで試してみましょう。


また、Laravelの環境を構築するにあたって、エックスサーバーへSSH接続する必要があります。
以下の記事を参考に、設定を行ってください。

Windows
Mac

余談ですが、Herokuを使ったアプリの公開もできます。
以下の記事を参考にしてください。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

スポンサーリンク

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

環境

  • エックスサーバー
  • Windows 11 / 10 or macOS Monterey (M1)
  • Laravel Framework 8 / 9 / 10
  • PHP 8.0 / 8.1
  • MariaDB 10.5
  • Composer version 2.6.4
  • nodebrew 1.2.0
  • node v16.20.2
  • npm 8.19.4

クライアントの作業は、WindowsでもMacでも同様にできます。
2023/10/05 Laravel10のインストールを確認しました。

バージョン確認

エックスサーバーにSSHで接続します。
まずはデフォルトでインストールされている各種バージョンを確認しましょう。

PHP

コマンドで実行した際のPHPのバージョンですが古いです。
後ほど新しいPHPコマンドが使えるように対応します。

$ 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

あくまでPHPをコマンド実行した場合のバージョンです。
サーバーで実行されるPHPは7か8で、サーバーパネルから選択できます。

Composer

Composerは古いバージョンがインストールされていました。
こちらも新しいバージョンが使えるように対応します。

$ composer -V
Composer version 1.10.22 2021-04-27 13:10:45

NPM

NPM(Node.js)はインストールされていませんでした。

Laravel環境構築

それではエックスサーバーにLaravel環境を構築していきます。

PHPのバージョンアップ

コマンドで実行できるPHPのバージョンアップを行います。

サーバーパネルの「サーバー情報」より、コマンドパスの一覧を確認することができます。

PHPの一覧を確認しました。シンボリックリンクが貼られています。

$ ls -la /usr/bin/php*
-rwxr-xr-x 1 root root 4618080  4月  1  2020 /usr/bin/php
-rwxr-xr-x 1 root root 4596960  4月  1  2020 /usr/bin/php-cgi
lrwxrwxrwx 1 root root      26  9月 27 17:59 /usr/bin/php-fcgi5.1 -> /opt/php-5.1.6/bin/php-cgi
lrwxrwxrwx 1 root root      26  9月 27 17:59 /usr/bin/php-fcgi5.3 -> /opt/php-5.3.3/bin/php-cgi
lrwxrwxrwx 1 root root      27  9月 27 17:59 /usr/bin/php-fcgi5.4 -> /opt/php-5.4.16/bin/php-cgi
lrwxrwxrwx 1 root root      27  9月 27 17:59 /usr/bin/php-fcgi5.5 -> /opt/php-5.5.38/bin/php-cgi
lrwxrwxrwx 1 root root      32  9月 27 17:59 /usr/bin/php-fcgi5.6 -> /opt/php-5.6.40-webp/bin/php-cgi
lrwxrwxrwx 1 root root      32  9月 27 17:59 /usr/bin/php-fcgi7.0 -> /opt/php-7.0.33-webp/bin/php-cgi
lrwxrwxrwx 1 root root      32  9月 27 17:59 /usr/bin/php-fcgi7.1 -> /opt/php-7.1.33-webp/bin/php-cgi
lrwxrwxrwx 1 root root      29 10月 29 15:55 /usr/bin/php-fcgi7.2 -> /opt/php-7.2.34-2/bin/php-cgi
lrwxrwxrwx 1 root root      27 10月 29 15:55 /usr/bin/php-fcgi7.3 -> /opt/php-7.3.31/bin/php-cgi
lrwxrwxrwx 1 root root      27 10月 29 15:55 /usr/bin/php-fcgi7.4 -> /opt/php-7.4.25/bin/php-cgi
lrwxrwxrwx 1 root root      27 10月 29 15:55 /usr/bin/php-fcgi8.0 -> /opt/php-8.0.12/bin/php-cgi
lrwxrwxrwx 1 root root      22  9月 27 17:59 /usr/bin/php5.1 -> /opt/php-5.1.6/bin/php
lrwxrwxrwx 1 root root      22  9月 27 17:59 /usr/bin/php5.3 -> /opt/php-5.3.3/bin/php
lrwxrwxrwx 1 root root      23  9月 27 17:59 /usr/bin/php5.4 -> /opt/php-5.4.16/bin/php
lrwxrwxrwx 1 root root      23  9月 27 17:59 /usr/bin/php5.5 -> /opt/php-5.5.38/bin/php
lrwxrwxrwx 1 root root      28  9月 27 17:59 /usr/bin/php5.6 -> /opt/php-5.6.40-webp/bin/php
lrwxrwxrwx 1 root root      32  9月 27 17:59 /usr/bin/php5.6-cgi -> /opt/php-5.6.40-webp/bin/php-cgi
lrwxrwxrwx 1 root root      28  9月 27 17:59 /usr/bin/php7.0 -> /opt/php-7.0.33-webp/bin/php
lrwxrwxrwx 1 root root      32  9月 27 17:59 /usr/bin/php7.0-cgi -> /opt/php-7.0.33-webp/bin/php-cgi
lrwxrwxrwx 1 root root      28  9月 27 17:59 /usr/bin/php7.1 -> /opt/php-7.1.33-webp/bin/php
lrwxrwxrwx 1 root root      32  9月 27 17:59 /usr/bin/php7.1-cgi -> /opt/php-7.1.33-webp/bin/php-cgi
lrwxrwxrwx 1 root root      25 10月 29 15:55 /usr/bin/php7.2 -> /opt/php-7.2.34-2/bin/php
lrwxrwxrwx 1 root root      29 10月 29 15:55 /usr/bin/php7.2-cgi -> /opt/php-7.2.34-2/bin/php-cgi
lrwxrwxrwx 1 root root      23 10月 29 15:55 /usr/bin/php7.3 -> /opt/php-7.3.31/bin/php
lrwxrwxrwx 1 root root      27 10月 29 15:55 /usr/bin/php7.3-cgi -> /opt/php-7.3.31/bin/php-cgi
lrwxrwxrwx 1 root root      23 10月 29 15:55 /usr/bin/php7.4 -> /opt/php-7.4.25/bin/php
lrwxrwxrwx 1 root root      27 10月 29 15:55 /usr/bin/php7.4-cgi -> /opt/php-7.4.25/bin/php-cgi
lrwxrwxrwx 1 root root      23 10月 29 15:55 /usr/bin/php8.0 -> /opt/php-8.0.12/bin/php
lrwxrwxrwx 1 root root      27 10月 29 15:55 /usr/bin/php8.0-cgi -> /opt/php-8.0.12/bin/php-cgi
-rwxr-xr-x 1 root root    4760  4月  1  2020 /usr/bin/phpize

新しいバージョンのPHPコマンドを使えるようにします。
今回は最新のPHP8を使用します。

エックスサーバーの推奨は、現時点でPHP8.1.22となっていました。
後ほどComposerを使用してインストールを行うため、サーバーパネルのPHPのバージョンと合わせる必要があります。

Laravel9の要件はPHP8.0以上であり、Laravel10はPHP8.1以上になっています。
PHP7系ですとエラーになりますので、注意が必要です。

サーバーパネルのPHPのバージョンをPHP8.1.22に変更しました。

8.1系の最新を指定します。

以下のコマンドを実行し、シンボリックリンクを貼ります。

$ mkdir $HOME/bin
$ ln -s /usr/bin/php8.1 $HOME/bin/php

.bash_profileを編集します。

$ vi ~/.bash_profile

以下の行を変更し、保存します。

PATH=$PATH:$HOME/bin
↓以下に変更
PATH=$HOME/bin:$PATH

.bash_profileを再読み込みします。

$ source ~/.bash_profile

PHPのバージョンを確認しましょう。
PHP8が使用できるようになりました。

$ php -v
PHP 8.1.22 (cli) (built: Aug 15 2023 11:02:44) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.22, Copyright (c) Zend Technologies

Composerのバージョンアップ

デフォルトで1系のComposerがインストールされていますが、実際にLaravelプロジェクトを作成してみると、以下の警告が表示されました。

Warning from https://repo.packagist.org: Support for Composer 1 is deprecated and some packages will not be available. You should upgrade to Composer 2. See https://blog.packagist.com/deprecating-composer-1-support/

一応、Laravelプロジェクトの新規作成はできたものの、2系にバージョンアップしましょう。

Composer 2系はパフォーマンスの向上もされており、インストール時の速度も速いです。

Composerのダウンロードページを開きます。

Composer
A Dependency Manager for PHP

Command-line installationのコマンドを実行します。

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e21205b207c3ff031906575712edab6f13eb0b361f2085f1f1237b7126d785e826a450292b6cfd1d64d92e6563bbde02') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

バージョンアップなどでハッシュ値が変わる可能性がありますので、コマンドはサイトの方をご確認ください。

composer.pharファイルが作成されますので、binフォルダに移動しました。

$ mv composer.phar $HOME/bin/composer

.bash_profileを再読み込みします。

$ source ~/.bash_profile

Composerのバージョンを確認しましょう。
2系が使用できるようになりました。

$ composer -V
Composer version 2.6.4 2023-09-29 10:54:46

Node.jsのインストール

Node.jsのインストールを行います。

nodebrewのインストール

Node.jsを管理するためのツールである、nodebrewをインストールします。

以下のコマンドでnodebrewをインストールします。

$ wget git.io/nodebrew
$ perl nodebrew setup

インストール完了後、以下のメッセージが表示されました。

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

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

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

.bash_profileを編集します。

$ vi ~/.bash_profile

以下の行を変更し、保存します。

PATH=$HOME/bin:$PATH
↓以下に変更
PATH=$HOME/.nodebrew/current/bin:$HOME/bin:$PATH

.bash_profileを再読み込みします。

$ source ~/.bash_profile

nodebrewのバージョンを確認しましょう。

$ nodebrew -v
nodebrew 1.2.0

Node.jsをインストール

Node.jsをインストールします。

$ nodebrew install stable

現状、stable(安定板)をインストールすると、v20.8.0がインストールされました。

Nodeの実行時に以下のようなエラーが発生する場合があります。

node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)

エラーが発生するため、今回は以下のコマンドでバージョンを指定してインストールしました。

$ nodebrew install v16.20.2

ちなみにインストール可能なバージョン一覧は、以下のコマンドで確認できます。

$ nodebrew ls-remote

エラーが発生する場合は、任意のバージョンをインストールします。

インストールされたNode.jsの一覧を確認します。

$ nodebrew list
v16.20.2
v20.8.0

今回は上記のバージョンがインストールされましたので、以下のコマンドで有効にします。

$ nodebrew use v16.20.2

これでNode.jsがインストールされましたので、nodeとnpmのバージョンを確認します。

$ node -v
v16.20.2

$ npm -v
8.19.4
スポンサーリンク

Laravelプロジェクトの作成

プロジェクト作成

エックスサーバー上で新規のLaravelプロジェクトを作成してみます。
ホームの直下に適当なディレクトリを作成し、新規でLaravelのサンプルプロジェクトを作成します。

$ mkdir laravel-project
$ cd laravel-project/
$ composer create-project laravel/laravel sample-project --prefer-dist

「sample-project」部分はプロジェクト名ですので、任意で指定してください。

Composerで管理しているパッケージもインストールされますので、composer installは不要です。

Laravelのバージョンを確認しましょう。

$ cd sample-project/
$ php artisan -V
Laravel Framework 10.26.2

設定ファイルの変更

プロジェクト直下の.envファイルを適宜修正します。(一部抜粋)

..
APP_ENV=production
APP_DEBUG=false
APP_URL=http://初期ドメイン

本番の公開の場合、Laravelの設定ファイルを必ず本番向けへ変更します。
(デバッグ画面など出さないように注意)

公開ディレクトリの設定

Laravelプロジェクト直下のpublicフォルダを、公開フォルダに配置します。
シンボリックリンクを貼りますが、以下は例です。

ln -s $HOME/laravel-project/sample-project/public $HOME/xxx/public_html/laravel

各自の環境に合わせて変更してください。

ブラウザから以下のURLにアクセスしてみましょう。

http://エックスサーバー初期ドメイン/laravel/

Laravelの起動画面が表示されました。

httpsでアクセスするには、エックスサーバーのサーバーパネルの「SSL設定」を行う必要があります。
無料でSSLが使用できますので、Webアプリケーションを公開する場合は必ず設定しましょう。

Nodeパッケージのインストールとビルド

プロジェクト直下で以下のコマンドを実行し、NPMパッケージをインストールします。

$ npm install

インストール時にNPMの新しいバージョンがあるとのお知らせが表示されますが、ここでは無視します。

npm notice 
npm notice New major version of npm available! 8.19.4 -> 10.2.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.0
npm notice Run npm install -g npm@10.2.0 to update!
npm notice 

以下のコマンドでトランスパイルを行います。(JS/CSSをビルド)

最新のLaravelはViteに置き換わっておりますので、それぞれ本番環境とし以下を指定しました。

Viteの場合
$ npm run build

Mixの場合
$ npm run prod

プロジェクト直下のpublicフォルダにjs/cssが出力されます。

Viteの場合
./public/build/assets/app.xxx.css
./public/build/assets/app.xxx.js
./public/build/manifest.json

Mixの場合
./public/css/app.css
./public/js/app.js
./public/mix-manifest.json

Viteについては以下の記事にもまとめました。

データベースの設定

データベースへ接続してみましょう。

エックサーバーの最新サーバーでは、MySQLではなくMariaDBとなっています。

エックスサーバーのサーバーパネルの「MySQL設定」を開きます。

MariaDBのバージョンは10.5.xで、接続先はlocalhostになります。

「MySQL追加」を開き、データーベースを追加します。
データーベース名は任意で指定します。

文字コードはEUC-JP、UTF-8、Shift_JIS、Binaryから選択できますが、「UTF-8」を選択しましょう。

「MySQLユーザ追加」を開き、データベースにアクセスするユーザを追加します。
ユーザIDとパスワードは任意で指定します。

「MySQL一覧」を開き、作成したデータベースにユーザを設定します。
追加ボタンをクリックします。

Laravelのプロジェクトの直下にある、.envファイルを以下のように編集します。

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=作成したデータベース名
DB_USERNAME=設定したユーザ名
DB_PASSWORD=設定したパスワード

以下のコマンドを実行します。
.envのAPP_ENVを「production」にしていたため、以下の確認メッセージが表示されますが、「yes」を入力します。

$ php artisan migrate
**************************************
*     Application In Production!     *
**************************************

 Do you really wish to run this command? (yes/no) [no]:
 > 

開発環境とは違い、本番環境では誤操作防止のために確認メッセージが表示されます。

以下のようなメッセージが表示されれば、正常に実行完了です。

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (4.82ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (27.93ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (3.85ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (26.28ms)

phpMyAdminを開き、テーブルが作成されていることを確認しましょう。

参考

さくらのレンタルサーバーの例も参考にしてください。

ConoHa WINGの例も参考にしてください。

さいごに

Laravelで作成したWebアプリケーションを、エックスサーバーで構築し公開する手順をまとめました。
最初の構築は少し手間ですが、レンタルサーバーでも構築することができ、運用も楽です。
是非試してみてください。

エックスサーバーへの申し込みは以下からできます。

エックスサーバーへの新規申し込みは、無料期間がありますので満足いくかどうか事前に確認できます。
まずは申し込んで試してみましょう。


他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

\オススメ/

コメント