yamata.programmer.blog

HSPに向けた情報を発信中！

【MAMP×Laravel】制作物をXSERVERにアップロードする方法【詳細に解説】

Laravel terminal xserver

今回の記事を読んで欲しい方

  • MAMPとLaravelで作った制作物を公開したい方
  • XSERVERを使っている方

今回はXSERVERに作った制作物を公開する方法ついて書いていこうと思います。

今回の説明は前回以前に書いた記事のXserverの契約で、初期ドメイン （xs●●.xsrv.jp）がある前提での記事となります。

Macで、FileZillaのアプリケーションをを使っています。

現在のLaravelの最新バージョンが8なので、Larave7以前でもインストールは可能のようです。

www.yamata-pgblog.com

 

MySQLの設定

XSERVER のサーバパネルからMySQLの設定が可能です。

ローカル環境のPHPMyAdminから、テーブルをエクスポートします。

エクスポートしたいテーブルをクリックし、画面上部にあるエクスポートのタブをクリックします。

f:id:yamata214:20210308120437p:plain

エクスポート方法で詳細をクリックし、出力方法として出力をファイルに保存するをクリックします。

f:id:yamata214:20210308120740p:plain

その後、一番下にある実行をクリックし、「テーブル名.sql」ファイルがダウンロードされます。

次にXserverのサーバパネルからデータベースを作成します。

サーバパネルからMySQL設定をクリックし、MySQL設定をクリックし、データベース名を決めて作成します。

f:id:yamata214:20210308121129p:plain

MySQLユーザの設定も必要になりますので、MySQLユーザ追加から作成しましょう。

パスワードは忘れないようにしましょう。

f:id:yamata214:20210308121405p:plain

どちらも設定したら、アクセス未所有権ユーザから作成したユーザを選択し、アクセス所有権ユーザに移します。

f:id:yamata214:20210308121813p:plain

その後、サーバパネルからPHPMyAdminをクリックして移動します。

ユーザ名とパスワードが必要になるので、先ほど設定したユーザ名とパスワードを入れて下さい。

ログインできたら、画面上部のインポートタブをクリックし、アップロードファイルで先ほどダウンロードした「テーブル名.sql」を選択します。

その後、画面一番下にある実行をクリックすれば完了です。

f:id:yamata214:20210308122230p:plain

MySQLの設定は以上です。

SSH設定

XserverでのSSH設定

まずはXserverのサーバーパネルへログインします。

その後、SSH設定をクリックします。

f:id:yamata214:20210308094303p:plain

SSH設定がOFFになっていたらONにします。

確認画面が出てくるので、OKを押して設定完了しましょう。

f:id:yamata214:20210308094533p:plain

その後、公開鍵認証用鍵ペアの生成のタブをクリックし、パスフレーズを入力します。

このパスフレーズは忘れないようにして下さい。

生成が完了すると、ダウンロードフォルダに「サーバ名.key」の名前のファイルがダウンロードされます。

ダウンロードされたファイルはダウンロードフォルダに入れたままで大丈夫です。

f:id:yamata214:20210308094817p:plain

MacでのSSH設定

次にMacのSSH設定を行います。

もし無ければ、フォルダを作って下さい。

mkdir ~/.ssh

続いて、先ほどダウンロードしたサーバ名.keyのファイルを、作成したsshディレクトリに移動します。

mv ~/Downloads/xs●●.key ~/.ssh/

次にパーミッションの設定を行います。

パーミッションは、簡単にいうとサーバのアクセス件の設定です。

sshには700（ディレクトリの所有者以外は読み書き実行が不可）、鍵には600（ディレクトリの所有者以外の読み書き不可）の設定をします。

chmod 700 ~/.ssh
chmod 600 ~/.ssh/xs●●.key

あとはSSHコマンドを実行し、サーバにアクセスします。

ssh -l xs●● -i ~/.ssh/●●.key ホスト名 -p 10022

ホスト名はサーバ情報画面から確認できます。

f:id:yamata214:20210308104003p:plain

 

PHPのバージョンアップ

Laravel8を使うためにはPHPのバージョンが7以上である必要があります。

なので、PHPのバージョンを確認します。

出てきたバージョンが7以上でなければ、次にお進み下さい。

7以上であれば飛ばしていただいて構いません。

PHP -v

PHPのバージョン切り替えはサーバパネルから出来ます。

画面下の方の真ん中あたりにあるPHP Ver. 切り替えをクリックします。

f:id:yamata214:20210308105509p:plain

PHPのバージョンの7以上を選択し、変更するをクリックして確認して確定させます。

f:id:yamata214:20210308105716p:plain

ターミナルへ戻り、/home環境にbinディレクトリを作成します。

mkdir /home/bin

作成したディレクトリにシンボリックリンクを作成します。

シンボリックリンクは、簡単にいうとショートカットのようなものです。

ln -s /opt/php-7.4.13/bin/php /home/bin/php

次にbash_profileを開き、環境設定を変更します。

vi ~/.bash_profile

iキーを押し、insertモードにして、以下の箇所を編集します。

PATH=$PATH:$HOME/bin
// ↓に書き換え
PATH=$HOME/bin:$PATH

変更が完了したら、キーボード左上の「esc」キーを押し（insertモード終了）、「:wq」を入力して変更を確定します（変更して保存）。 

その後、編集したしたコードを実行し、PHPのバージョンを再度確認しましょう。

変わっていたらOKです。

source ~/.bash_profile
PHP -v

composerのインストール

Laravelを使うにはcomposerが必要です。

composerはPHPのパッケージ管理システムです。

composerをローカル環境でインストールしてLaravelをローカル環境で制作してアップロードしても、サーバにはcomposerはありません。僕はここで、インストールされているだろうと過信して躓いたのでご注意下さい。

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

// インストールされたか確認します
composer -V

Laravelプロジェクトのデプロイ

GitHubに、ご自身のプロジェクトがコミットされている前提で話をします。

GitHubのご自身のプロジェクトのURLまで行き、Codeをクリックして、ご自身のプロジェクトのURLをコピーします。

f:id:yamata214:20210308114817p:plain

その後、ターミナルで初期ドメインの直下に移動します。

cd xs●●.xsrv.jp

その後、git cloneコマンドを実行して、プロジェクトを複製します。

git clone 先ほどコピーしたURL

次に、Laravelをインストールするので、複製されたディレクトリへ移動し、composerをインストールします。

cd laravelのプロジェクト名
// その後
composer install

 .envファイルの設定

GitHubから複製されたプロジェクトには、.envファイルがなく、.env.exampleファイルが代わりに存在します。

なので、このファイルをコピーし、その後編集します。

cp .env.example .env
// コピーしたら
vi .env

編集する箇所は以下の通りです。

APP_NAME=Laravel // 何でもOK、Laravelは初期設定です

APP_ENV=production // local（開発環境）かproduction(本番環境)を入れる

APP_KEY= // そのまま空欄でOK（以下のアプリケーションキーの設定参照）

APP_DEBUG=true // そのまま 

APP_URL= // http://localhostから https://[ドメイン名] に変更


LOG_CHANNEL=stack

LOG_LEVEL=debug


DB_CONNECTION=mysql 

DB_HOST= // 変更（詳細は下記）

DB_PORT=3306

DB_DATABASE= // MySQL設定で作成したデータベース名

DB_USERNAME= // MySQL設定で作成したユーザ名

DB_PASSWORD= // MySQL設定で作成したパスワード

以下省略

DB_HOSTに設定する項目は以下の画像の箇所を参照ください。

サーバパネルのMySQL設定から行けます。

f:id:yamata214:20210308123916p:plain

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

.envファイルのAPP_KEYを追加します。

ここを追加しないとエラーになるようなのでご注意下さい。

ターミナルからLaravelプロジェクトまで移動して以下のコマンドを実行します。

php artisan key:generate

先程の.envファイルを見ると乱数の文字列が追加されているはずです。

シンボリックリンクの作成

僕が躓いた一番のポイントです。

サーバに公開するためには、ドメイン名/public_html/pubicの中を参照させないといけません。

なので、このドメインにアクセスした時に、Laravelプロジェクトを参照させるようにシンボリックリンクを作成します。

コマンドは以下です。

ln -s /home/サーバID/ドメイン名/laravelプロジェクト名/public/ /home/サーバID/ドメイン名/public_html/public

絶対パスで指定してますが、相対パスで指定してもOKです。

サーバIDはサーバパネルトップページの右上、ドメイン名はサーバパネルトップページの上部左側から行けるドメイン設定から確認できます。

.htaccessの設定

ここもシンボリックリンクの作成と同様に躓きました。

500エラーの原因はたいていこの.htaccessの設定ミスなので、気をつけましょう。

サーバパネルの.htaccess編集から行えます。

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteBase /

RewriteRule ^index\.php$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

</IfModule mod_rewrite.c>

以上で設定は終了です。

https://【ドメイン名】/【ルート情報のアドレス】で、トップページや制作したwebアプリが表示できました。

f:id:yamata214:20210308131457p:plain

大変だけど慣れれば簡単

いかがでしたでしょうか。

.htaccessが設定したことがなかったのと、作ったwebアプリをサーバに公開したことがなくて大変でしたが、1回出来てしまえば慣れると思います。

色々ググって進めていましたが、人によってはNode.jsやnodebrewをインストールしている方もいらっしゃったみたいです。

僕は使わなかったので今回は紹介しておりませんが、この記事が参考になれば幸いです。