Laravel7.0+Vue.js をXserver に構築 ~windows or MacOS or Xserver~

2020年7月23日

※この記事は自分の備忘録の為に書いているので記載する情報に誤りがある場合があります。

はじめに

Xserrver でLaravel+Vue.js のプロジェクトをGitで管理する。
Vue.js でフォーム入力画面を作成して、登録した情報をLaravelの管理画面から編集できる
複数人でプロジェクトを管理する練習の為2台のパソコンから操作する。
Xserver内にはリモートリポジトリを設定してプッシュされれば自動でデプロイする。
ローカルではWindowsとMacにて作業リポジトリを設定する。
※ハマった箇所
今回Laravelのプロジェクトを作成するため、環境構築にすごく時間がかかった。
Laravel では composer を使って依存しているライブラリをインストールできる為、各環境にcomposerをインストールする必要があり、またVuejsを使うにあたり npm のインストールも必要になってくる。これらは、ググった通りにしてもすんなりうまくいかず、バージョンや環境によって手間がかかった。

Laravel + Vuejsのプロジェクトの作成

環境の準備

公開サーバーとローカル環境でバージョンを合わせ、ライブラリをインストールする。
PHP7 + MySQL + npm + comporser
npm はローカルと公開サーバーのどちらにもインストールする。
Laravel はプロジェクトの初期インストールは公開サーバーでも行う。
その為、composer もインストールしておく。
Laravelインストール後
ignoreするもの
.env は設定ファイルで、最初に設定しておき同期はしない
comporser.json や comporser.lock も同期しない
node_module も同期しない
※Gitのリポジトリをクローンする場合、.env はクローンされない。
 その為、Laravel+Vuejsのプロジェクトを動作させるには作業環境に予めcomposer + npmを
 インストールする必要がある。

ローカルPCに環境を準備

■PHP環境
XAMPPの初期設定について
⇒別途記事参照:日本語化、エラーログ出力、PHPのデバッグについて

[Windows の場合]

1. Comporserをインストール

以下で、Composer-Setup.exe  をクリックしてインストール
https://getcomposer.org/download/

composer.json があれば共有する際に、composer install とするだけでインストールできる
※composer installしたライブラリ群は「vendor」に格納される
    はじめてダウンロードした際は vendorディレクトリが作成される

プロジェクトを作成したい場所まで移動

※ダウンロードは数十分かかる
コマンドの説明: git にある、laravel/laravel階層下を –prefer-distにてzipでダウンロードする
ダウンロード後app01というディレクトを作成して、中にLaravelのプロジェクトを作成する。
※Laravelのドキュメントルートはpublicなので以下のように修正

2. npmをインストール

https://nodejs.org/ja/からボタンでダウンロードするだけ
windows power shell で実行する

3. laravel/uiをインストール

MacOS ( Catalina ) の場合

まずMacで環境を構築するにはMac版のXAMPPをインストールすればよいのですが、今回は諸事情により仮想環境を作って作成した
※windows でも以下の方法で可能

Vagrant + VirtualBoxにてLaravel用の仮想環境を構築してそこにリモートリポジトリをクローンする事にする

1. 仮想環境構築ツール(Vagrant + VirtulBoxをインストールする)

Vagrant or VirtulBox 公式ホームページにてそれぞれダウンロードしてインストール

2. Homestead (ホームステード)をインストール

 Homestead とは Laravelが公式に提供しているLaravelが動作する環境を簡単に構築できるツール
 ターミナルを起動して、vagarnt box を追加します

  Enter your choice でお使いの仮想ソフトウェアを聞かれた場合、virtual boxを選択

3. Homestead のダウンロード

 ダウンロードするディレクトリを作成してそこにHomesteadファイルをダウンロード
cd  /User/ユーザー名/homedir/  に移動して、

4. Homestead.yaml ファイルの作成と編集

cd  /User/ユーザー名/homedir/Homestead  に移動して、

を実行すると、 Homestead.yaml が作成される

※このファイルにローカル上のディレクトリと仮想環境上のディレクトリを共有するパスを記入する
folders:
 - map: /Users/ユーザー名/作業フォルダ
 ※ローカル上で作業フォルダにしたいディレクトを指定する
      to:   /home/vagrant/code/
 ※最初はto にはフォルダの記載はしない
 ※仮想環境上でcomposeで creatしてからフォルダ名を追記してから  

sites:  
 - map はローカル上で使いたいドメイン名
  to は仮想環境上のドキュメントルート※laravel のドキュメントルートを指定する
databases:
 作成したいデータベース名を記載 

※後程laravelファイルをダウンロード後に設定するyaml 

5. Vagarant(起動・再起動・修正)

上記の手順が完了したらVagrant を起動する

うまく起動できなかった場合、homestead.rb ファイルを開きBox名を変更する
homestead-7 となっているところを一括置換で homestead-eijilab のように置換て再度実行する
問題なく起動ができたらvagrant ssh で接続する

接続できたら cd code で移動する
ここから新規でLaravel のファイルを作成したい場合は以下を実行する

※上記のコマンドの最後にフォルダ名を指定すれば任意のフォルダにダウンロードされるのだが、自分の環境では mkdir の権限がないと怒られてしまったので 指定せずに実行した
指定しない場合laravel という名のディレクトリが作成される。ダウンロードが完了したら

して、ローカル上に先程ダウンロードしたlaravelファイルを共有したい作業ディレクトリを作成する
今回は先程上記で、yamlファイルに記載した locallaravel とする
yaml ファイルを修正した後、vagrant を再起動(ビルド)して再度接続する

の後、ローカルにもファイルが同期できていれば完了
yaml ファイルに記載したドメイン名をブラウザで実行してLaravelの画面が表示されれば完成
なお、ここまで完了すれば、仮想環境に既にMysqlがあるのでログインしてデータベースを作成
artisan コマンドで簡単な機能をすぐに作成することができる

※既存のLaravelのプロジェクトがあり、別途サーバーのリポジトリからクローンする場合は以下の通り
※今回はXserverにあるリモートリポジトリからSSH接続で git clone する
 ssh 接続は MacOS ターミナルからできており、.ssh/config にもホスト名の登録したものの何故か
 git clone ができなかった。ここでかなりの時間ハマり解決法は記事の後半で説明する

6. Macのhostファイルを修正(名前解決)
管理者権限で編集する

複数の場合は以下のように入力できる

修正後以下コマンドで自動で設定する

7. Nodejsをインストール

◇MacOSにnodejsをインストールする場合

◇仮想環境にnodejsをインストールする場合
nodejsのバージョン管理ツール『nvm』を使いバージョン指定してnodejsをインストールする

◇node.jsをバージョン指定してインストール

.vue ファイルを編集後以下コマンドにてコンパイル

Xserverに環境を準備

1.PHPバージョン
既存のバージョンだと低い場合があるので最新のバージョンにアップデートする

2.Comporser をインストール
Laravelを使うにあたり
サブドメインのディレクトリまで移動する

上記コマンド実行後 laravel ディレクトリが作成される

3.シンボリックリンクを作成

4.Vuejsを使うにあたり
nodejs をインストール
Xserver 上でパッケージをインストールする際の注意
nodebrewをインストールするのだが古いバージョンを使わないとnpm が使えないので注意
nodebrew のインストール後バージョ指定する

.vue ファイルを編集後以下コマンドにてコンパイル

ローカルPCと公開サーバーの連携方法

Laravelではartisanという自動で実行できるコマンドがあるので、これを利用してデータベースへのテーブル作成やテストデータ作成などを機能追加毎に行えるようにする。
◇初期の同期
ローカルで作成したファイルを更新
データベースのテーブルを自動で作成

※テストデータを自動で作成して挿入する方法(後程記載)

Laravelで作る機能について

まずは、慣れる為にLaravelの機能を一通り試す

初期設定

/.env …データベースの接続情報などを記載する
/config/app.php

日本語用のディレクトリ【ja】を作成 ※githubからクローン

ログイン機能の作成

artisan コマンドでログイン機能と新規ユーザー登録機能が一発で作成できる
以下コマンドで /resources/views/auth を作成

以下コマンドで必要な機能を作成

【Auth】
以下コマンドでテーブル作成する。
新たにマイグレーションファイルを追加した場合は以下のように :refresh を付ける
※artisan コマンドを実行する場合はルートまで移動する

viewファイルを編集して日本語化
/resources/views/auth/  配下のファイル

上記の設定が終わり新規ユーザーを作成して

◇モデル(model)の作成

Laravelで新規機能を作成する際にテーブルを使う場合は、まずモデルとmigrationファイルを作成する。
以下のコマンドでモデルとマイグレーションファイルを作成する

◇作成されたモデルファイルに追記

◇マイグレーションファイルの場所

作成されたマイグレーションファイルに必要なカラムを追加する

作成が完了したら以下コマンドを実行する

入力内容にエラーがなければデータベースにテーブルが作成される

コントローラ(controller)の作成

「–resourceオプションを付与」
よく使用するルーティングも同時に作成される
コントローラ名は「モデル名の複数形」+「Controller」とする.
コントローラファイルには画面上で行う主な処理である(登録・更新・削除)などの処理を書く。
バリデーションエラーなどもここに書く。
以下コマンドにてコントローラファイルを作成する

/app001/app/Http/Controllers
RegistinfosController.phpが作成される
◇対象のモデルとAuthを利用宣言

ログイン制限をコンストラクタに定義
一覧表示の機能を追加

作成したコントローラーのルーティングを以下に追記する

ビュー(view)の作成

Laravelのviewはテンプレートエンジンbladeテンプレートを使用する
コントローラーからの変数を {{ $test }}で展開できる
ファイル名は *.blade.php の拡張子をつける
/resources/views 配下に設置する
※管理画面とフロント画面で分けるためフォルダ分けする
◇ログイン画面

◇フロント画面

◇管理画面

◇共通パーツの編集

asset の secure_asset に変更
※ローカル上で、httpsでも対応するようにする。

Vue.jsで作る機能について

フロント画面では申込情報のフォームを作成する。
1.申込入力画面 ⇒ 2.申込確認画面 ⇒ 3.申込完了画面
web.php  にルーティングの設定

<head>….</head> に、js とcss を読み込む

<body>….</body> に、<div id=”app”> …. </div>を記載

ルーターを入れ子にして画面移動してもデータが引き継がれるようにする

$route.meta.title は router.js に記載した meta title を読み込む 
bind:p_arr.sync=”p_arr” で “p_arr” を読み込めば、子要素も読み込める

データ保持用に変数を定義
p_arr を親に、r_info と sub_d を子に配列を定義
sub_d は電話番号や郵便番号の分割の為利用する
子要素には、親とデータを共有するpropsを定義

Gitを導入

今回Gitを導入してWindowsとMacから操作するのにかなり苦労してあらゆる箇所で躓いた
リポジトリがどこにあり、今何の操作をしたのか理解するのが難しかった
現段階ではGitの適切な使い方がわからない状態なので、今回は以下の通りにした

Xserver ⇒ リモートリポジトリ(ベアリポジトリ)、公開用リポジトリ
windows  ⇒ 作業用リポジトリ(※ここに追跡用リポジトリ?があるのか・・)
MacOS  ⇒ 作業用リポジトリ(※ここに追跡用リポジトリ?があるのか・・)

1. SSHキーの作成及び登録

windows のテラタームにて公開鍵と秘密鍵を作成
公開鍵をXserver のコントロールパネル上に登録
秘密鍵を各環境の.ssh フォルダに格納
◇config ファイルを作成

2. ssh-agentに鍵の登録

◇登録された鍵の確認

Gitを使う場合は初めにユーザー情報を設定する
Xserver or   Windows or Mac でも同じ作業をする

◇便利な機能(色分け)

◇設定した一覧を表示

3. リポジトリの作成
Xserverに公開用リポジトリとリモートリポジトリを作成
◇公開用リポジトリを作成

◇リモートリポジトリ(ベアリポジトリ)を作成

◇~/laravel/laravel.git/hooks に自動処理を定義

◇実行権限を変更

4. ローカル環境にリポジトリをクローンする
◇ローカルPCに作業用リポジトリを作成

作業用リポジトリを作成
リポジトリをクローンするディレクトリを新しく作成

sshで接続して作成した共有リポジトリのファイルをクローン
※windowsではsourcetree 上からクローンした

sourcetreeからXserverにあるリモートリポジトリをクローン

windowsからリモートリポジトリをクローンする方法

\Users\ユーザー名\.ssh
sshkeyを上記に格納する

※Xserverにsshで接続するには、Xserverで作ったsshkeyではうまく接続できなかったのでteratarmで作成したSSHkeyをXserverに登録
作成したSSHkeyは、sourcetreeの「ツール」から「SSHキーの作成インポート」から、loadから作成したKeyの秘密鍵を.sshに保存

◇クローンを作成

◇「新規/クローンを作成」

URL: ssh://eijilab@サーバー番号.xserver.jp:10022/home/eijilab/laravel/laravel.git
保存先のパス: C:\xampp\htdocs\app001

◇「クローン」ボタンを押してクローンを作成
※クローンが完了してプッシュができない場合は、Gitをアップデートする。

◇使い方

◇「ファイルステータス」
作業ファイルに修正があった場合は“作業ツリーのファイル”に表示される
ファイルをクリックを押すと差分が表示される
問題なければインデックスに追加する
インデックスに追加されたファイルが問題なければ画面下にコメントを追記してコミットボタンを押下

◇何度か作業していてハマったところ
リモートリポジトリ(ベアリポジトリ)に、コミットプッシュしたファイルが反映されていない。
ソースツリーからは今まで通りプッシュ出来ている様子。
そう思った理由:ローカル上でリポジトリを作り直して再度クローンしたところ、今までプッシュしていたファイルが反映されていた為。恐らくリモートリポジトリには反映されているが、そこから公開リポジトリに反映されていない様子

原因1:作業途中うまく反映されなかったので公開リポジトリにファイルを直接変更してしまった
原因2:comporser やVuejsのコンパイル関連の理解をしていない

対応策1:リモートリポジトリから、公開リポジトリに反映する方法を調査
対応策2:公開リポジトリ及びリモートリポジトリを作り直す

公開リポジトリは、リモートリポジトリから取得する
pull ↓

ローカルリポジトリからは、リモートリポジトリにアップロードする
commit ↑ ,  push ↑

laravel.git ディレクトリまで階層を移動して最新のリポートのブランチを確認

以下でプルした

以下のエラーがでた
Please make sure you have the correct access rights
and the repository exists.

エラー内容はSSHKeyに原因がある
なので、sourcetreeでSSHkeyを登録し直したところ
反映成功。

※障害
Gitでコンフリクトを起こした場合、変更箇所が
HEADで表示される。
それを修正する場合は公開サーバーのファイルを直接変更する事で解決する。

上記問題があってからまた、ファイルを修正したところ
変更が反映されなかった。

MacOSからリモートリポジトリをクローンする方法

今回上記でも記載したとおりMacではVagrantを使って環境を構築した、仮想環境上でgit clone しようとしたが権限やらの関係でうまくできなかった。

色々試したところ、共有しているディレクトリ上でgit cloneすることにした
共有しているローカルのディレクトリで以下を実行する ※.ssh/config に登録したHostを指定してgit clone を実行する

Laravelのプロジェクトをクローンする場合の注意事項

1.  『.env』ファイル だけ手動でコピーして作成する
Homesteadで作成したデータベースとユーザー名、パスワードを指定する

2. 『composer.json』 のライブラリをインストール
クローンした後のプロジェクト内の階層で以下を実行するとcomposer.jsonに記載のライブラリをインストールする

※Laravelのテーブル, AppKeyを作成   ※キャッシュもクリア

Vuejsのプロジェクトをクローンする場合の注意事項

node_modules のライブラリが足りない場合があるのでhomestead にログインした後に実行する
※npm run watch がエラーだった為 webpackもインストールする

おわりに

かなり雑になりましたが以上です。