LaravelをXserverにデプロイする流れ - ウェブカツでプログラミング学習中 -

Laravel+Vue.js


こんにちは、Soyです。

3月5日からウェブカツにてプログラミングを学んでいます。最近では、ウェブカツの外で調べ物をしながらプログラミングをすることの方が多くなってきました。

f:id:soybelln:20190906181257j:plain
プログラミング学習サービス「ウェブカツ!!」より

この2割の部分に足を突っ込み始めたわけですね。

ここを自力で走れるかどうかが、プログラミングを仕事にできるかどうかの違いにつながっていくのだと思います。

今回のブログは、この残り2割のほんの一部にあたるデプロイ作業についてのメモです。対象は、「Laravelで作ったプログラムをローカル(Apache)から本番(Xserver )へ移す流れ」です。細かな手順はのせていませんが、この流れを知っていれば「手順解説系」のブログも理解しやすいと思います。作業内容はプログラミングに使用する言語・フレームワーク、また本番用サーバーの種類によって異なりますのでご注意ください。

前提:Xserverのサーバーを契約済み、ドメインを取得済み、ドメインをXserverに紐付け済み

プログラムをGitで管理する

よくわからないんですけど(いきなり)、gitは主に共同開発の場面で、誰が何を編集したのか、編集する前のファイルはどんな状態だったか、何がいつ変更されたかといった情報を共有するために使用されます。

個人開発でプログラミングするだけであれば不要かな?と避けていたのですが、Laravelを本番サーバーに上げるためには必要なようでした。

gitは通常CUIで操作するのですが、ウェブカツのプログラミング講座でも紹介されているSourcetreeというツールを利用するとGUI操作が可能です。*1 混同されがちなGitHubというサービスは、gitで管理したプロジェクトのコードを保存しておいてくれる場所です。コードを保存してくれるサービスはGitHubだけでなく、他にもBitbucketやGitLabというものがあります。

一連の流れとしては、

  1. 対象のフォルダをSourcetreeのローカルリポジトリに紐づける
  2. GitHubに新規登録する
  3. GitHubにリポジトリを作成する
  4. SourcetreeとGitHubを連携させる
  5. SourcetreeのローカルリポジトリからGitHubのリポジトリへプッシュする
  6. GitHubのリポジトリをXserverへクローンする

という感じです。「クローンする」というのがXserverへファイルをアップロードするという意味になります。次のXserverに関する手順の中で実行します。

*1 CUIはキーボードでコマンドを打つ画面、GUIは普段私たちが見ているマウスで操作できる画面

.gitignoreの存在

ここで注意しなければならないのが、GitHubを無料で使う場合はソースコードが公開されるという点です。私はやっちまいました。なんだかゴチャゴチャといじくりまわしている間に、XserverのDBのユーザー名やパスワードを記載したファイルごとアップロードしてしまったのです。

このような事象を避けるために、.gitignoreを利用しましょう。

プロジェクトをgitで管理し始めると、プロジェクト内に.gitignoreというファイルが自動で作成されます。ここに、gitで管理すべきでないファイルを指定することができます。

余談:GitHubに翻弄される

「うわぁ!マイシークレットインフォメーションがパブリッシュされたぁ!!」と慌てた私。待て待て、と自分を落ち着かせ、GitHub上のファイルを書き換えることに。

しかし、......書き換える前の情報!!残ってる!!!

そりゃそうだよね〜そういうやつだからね〜(๑ • ₃ • σ)σ

一度gitで管理し始めたファイルを管理から外すには、「git rm ファイル名」という呪文があります。が、これはignoreされるようになっても履歴には残ります。そのため、他人が中身を見ようと思えば見ることができます。一度プッシュしたファイルを根本から削除するにはgit管理からディレクトリごと外してリポジトリ作り直すしかないのかなぁ...。と思っていたら見つけました↓ 今度実験してみよう。

help.github.com

XserverにSSH接続する

また新しいの出てきた〜。SSH接続ってなに?

SSH接続とは、外部のコンピュータにリモート接続をし、コマンドで操作することを指します。つまり今回の場合だと、Xserverが管理しているサーバーを自分のパソコンから操作するということです。

  1. XserverのSSH設定をONにする
  2. XserverのSSH設定で鍵を作成し、パスフレーズを登録する
  3. ターミナルからsshコマンドでXserverのサーバーに接続する
  4. パスフレーズを聞かれるので2.で登録したものを答える

とてもわかりやすかった記事をご紹介します。

tofusystem.work

接続の際に、ssh サーバーID@sv〇〇〇〇.xserver.jp -p 10022 なんていちいち打つのを避けるために、簡単に省略できる方法もあります。

qiita.com

Xserverにファイルをアップロードする

GitHubのリモートリポジトリをXserverへクローンするという部分です。まず、ターミナルで操作するディレクトリがどこなのかわかっている必要があります。Xserverはファイルマネージャーという管理ページがあるので、ここでディレクトリ構造を把握しましょう。

メインドメイン(main.com)の場合もサブドメイン(sub.main.com)の場合も、main.com/の直下にプロジェクトのフォルダをクローンします。public_htmlと同じ階層です。

ターミナルでmain.comまで移動し、「git clone リモートリポジトリのURL laravel」と打つと、main.com配下にlaravelというフォルダが作成され、そこにデータがアップロードされます。

アップロードができたら、プロジェクトのセットアップを行います。セットアップ内容は主に4つです。

  1. .envファイルをコピペでもう1つ作成し、書き換え
  2. セキュリティに使用されるキーの生成
  3. シンボリックリンクの作成
  4. .htaccessの書き換え

Laravelでプロジェクトを作り始めるときに、まず.envファイルのDB設定を行いますね。コピペした.envファイルのここを本番環境用に書き換えます。元の.envファイルは別の名前にして置いておきます。

あ、そうだ!大事なことを忘れていました。XserverのphpMyAdminでデータベースを作成しておかなければいけません。これをしておけば、あとはマイグレーションでテーブルが簡単に作れます。

.envファイルのAPP_KEYの欄が空白になっていると思います。これは、暗号化やパスワードリセット時などに必要となってくるキーだそうです。「php artisan key:generate」でキーを生成しましょう。

最後に、laravelのpublicとmain.com/public_htmlのpublicをリンクさせるため、シンボリックリンクを作成します。main.com/public_htmlに移動し、

ln -s ~/laravel/public ./public

と打てばOKです。

サブドメインの場合は、まずサブドメインを取得した時に自動で作成されるディレクトリの名前を別のものに変更します。例えば、sub.main.comというサブドメインの場合、main.com/public_html/subというディレクトリができていると思います。このsubをsub_2としておきましょう。そして、

ln -s ~/laravel/public ~/main.com/public_html/sub

と打ちます。subディレクトリの名前がsubのままだと、リンクが作成できません。

最後に、.htaccessを書き換えてすべてのリクエストがpublic_htmlのpublicとリンクしているlaravel/publicを通して処理されるようにします(...)。ただし、サブドメインの場合はこの処理は不要です。

以上で、main.comまたはsub.main.comにアクセスするとアプリが表示されると思います。お疲れ様でした!

追記:そういえばVueをproductionモード(本番モード)にする手順を忘れてました。本番環境で一通りテストして、動かせることを確認したらnpm run productionしておきましょう。

余談だけど重要なこと:unix_socketの罠

.envファイルのDB情報を正しいものに書き換えているにも関わらず、Xserverにデプロイしたプロジェクトではログインができませんでした。エラー内容は「access denied for user 'ユーザー名'@'localhost'」というもの。

ユーザー名はXserverのユーザー名なのに、なぜlocalhostのままなの?どこの設定が間違っているの?

Laravel部では、config/database.phpのunix_socketを設定していたかと思います。本番環境に移してから、私もここを本番用に書き換えました。しかし、正解はなんと「削除」!!

とりあえずここに金言貼っておきますね。

ウェブカツの優秀な先輩が手を差し伸べてくれる。私は感謝しかありません。私もこんな風にサラっと誰かを手助けしたぁ〜〜い!!

感想:FW + デプロイ......プログラミングに疲れた

今回、JavaScript部上級とLaravelの練習でTodoアプリを作成しました。プログラミングってむずかしいーー!知らない単語や概念がたくさん出てきて、それをひとつひとつ調べるだけで時間がかかります。そして、わからないなりに仮説を立て実行し、毎回打ちのめされるんです(笑)。

Webサービス部あたりまでは「プログラミングたのしー!!」だったのですが、今は重石をつけて歩いているみたいに苦しいですね〜。そして最後にデプロイという何気に実は大変な作業...。ここ最近の私は弱音ばっかり吐いているような気がします(笑)。情けない!

そろそろ卒業試験です。必ず最後までやり遂げます!!!

 

今回のブログを書いてみて、「わかりやすく説明する」ってむずかしいんだなぁと改めて思いました。間違いとかあったら教えてね!

 

プログラミングスクールなら「ウェブカツ!!」

webukatu.com

 

練習で作ったTodoアプリはこちら(コンセプトは後付けです笑)

soybelln.net