Laravel で作成したプロジェクトをサクラレンタルサーバにデプロイする方法について記す。

事前に実装した Laravel のプロジェクトの最新情報を GitHub に push しておくこと！

ローカルからデプロイサーバへのログイン

GitHub 上のソースコードをサーバ上にデプロイするため，ローカル PC のターミナルでサーバを操作する必要がある．

sakuraサーバーを登録していると、「[さくらのレンタルサーバ] 仮登録完了のお知らせ」というタイトルで[email protected]からメールが届いており、以下のような情報が書いてある。これを使用するので保管しておく。

ターミナルで

ssh アカウント@サーバ名

と入力。一度このまま続けてもいいか確認が入るのでYesを選び、パスワードを聞かれるので、上記メールで届いたサーバーパスワードを入力する。

Welcome to FreeBSD! 
％

と表示されれば成功！

シェルの変更

初期設定のシェルが使いにくいので bash に変更したいが、権限によってできない場合もあるため以下の２パターンからどちらかを試す。

１、初期設定の変更を行う　

chsh -s /usr/local/bin/bash

パスワードを訊かれるのでログインパスワードを入れる。それ以降再度ログインした時に、初期設定がbashへと変わる。

※権限がない場合、この時点で「Permission denied」と表示されるので２を行う。

２、一時的に設定変更する。

/usr/local/bin/bash

これを押すことで、以下のように%から表示が変更されればbashになっている。

次に行うのは、デプロイサーバと GitHub の SSH 通信設定である。ここまででローカル PC からデプロイサーバを操作できるようになった．

続いて，サーバ上に GitHub のソースコードをデプロイするため，両者の間で通信できるように設定を行う．

sshキーの発行：

cd ~/.ssh
ssh-keygen

生成した公開鍵をクリップボードにコピーします。以下のコマンドを実行します。

cat ~/.ssh/id_rsa.pub

出力された公開鍵を全て選択してコピーします。

GitHubにSSHキーを登録する手順

1. GitHubにログイン

   • GitHubのウェブサイトにアクセスし、ログインします。

   • 右上のプロフィールアイコンをクリックし、「Settings」を選択します。

2. SSHキーの追加

   • 左側のメニューから「SSH and GPG keys」を選択します。

   • 「New SSH key」ボタンをクリックします。

3. SSHキーの情報を入力

   • Title: SSHキーの名前を入力します（例: "My Laptop"）。

   • Key: 先ほどコピーした公開鍵をペーストします。

4. SSHキーの追加

   • 「Add SSH key」ボタンをクリックして、SSHキーを追加します。

5. 確認

   • 追加が成功すると、SSHキーのリストに新しいキーが表示されます。

6. SSH接続の確認

   • GitHubにSSH接続ができるか確認するために、以下のコマンドを実行します。

ssh -T git@github.com

• 初めて接続する場合は、ホストの確認を求められることがあります。「yes」と入力してください。

• 正常に接続できれば、「Hi username! You've successfully authenticated, but GitHub does not provide shell access.」というメッセージが表示されます。

これで、GitHubにSSHキーを登録する手順は完了です。

GitHub 上のコードをサーバにデプロイする

ここまで下記を実施。

• ローカルPCとGitHub間の通信が可能

• ローカルPCとデプロイサーバ間の通信が可能

• デプロイサーバとGitHub間の通信が可能

通信環境が整ったので，デプロイサーバ上に GitHub のコードをデプロイする。

手順詳細

デプロイ用ディレクトリの作成

cd ~
mkdir bin
cd bin

composerのインストール

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php composer-setup.php

確認用：

composer --version

Composerの移動

mv composer.phar composer

パスを通すコマンドを実行:

• 次に、以下のコマンドを入力して実行します。このコマンドは、~/binディレクトリを環境変数PATHに追加します。

export PATH=$PATH:~/bin

• .bash_profileを開く:

• 次に、~/.bash_profileという設定ファイルを開きます。このファイルは、シェルが起動する際に読み込まれる設定を含んでいます。以下のコマンドを入力して実行します。

vi ~/.bash_profile

4. viエディタの使い方:

• viエディタが開いたら、以下の手順で操作します。

• コマンドモード: viを開いたときはコマンドモードです。このモードでは、コマンドを入力できます。

• インサートモードに切り替える: iキーを押すと、インサートモードに切り替わります。このモードでは、テキストを入力できます。

• テキストを追加: 次の行に以下の内容を追加します。

export PATH=$PATH:~/bin

• コマンドモードに戻る: エスケープキー（Esc）を押してコマンドモードに戻ります。

• ファイルを保存して終了:

:wq!

• と入力してEnterキーを押します。これでファイルが保存され、viが終了します。

• 設定を反映させる:

• .bash_profileを編集した後、設定を反映させるために以下のコマンドを実行します。

source ~/.bash_profile

説明: このコマンドは、.bash_profileの内容を再読み込みし、変更を有効にします。

Laravelの準備

cd ~
composer global require 'laravel/installer'

• 上記によって、Laravelのインストーラを正常にインストールし、依存関係依存関係もインストールが行われます。

GitHub 上のコードをデプロイ

GitHub から自分が作成したプロジェクトのファイルをダウンロードして project ディレクトリにコピーし，アプリケーションが動作するように設定を行う．
※リポジトリの URL は ssh の方を使用する．
※最後の project を忘れないこと！！

git clone <YOUR_REPOSITORY_URL> project

※初回は git clone コマンドでソースコードをダウンロードするが，2 回め以降（機能追加した場合など）は git pull コマンドで差分管理する．

デプロイしたディレクトリに移動し，必要なライブラリをインストールする。以下コードで実施。

cd project
composer update
composer install

データベース関連の準備

1. 設定ファイルの準備

サーバー上で以下のコマンドを実行して、設定ファイルを作成し、データベースの設定を記述します。

cp .env.example .env
vi .env

2. .env ファイルの編集

vi .envでファイルを開いた後、インサートモードにして以下の内容と合わせてデータベースの設定を追加記述します。具体的な情報は、さくらのコントロールパネルの「Web サイト / データ」→「データベース」で確認できます。

※Laravelを新しくインストールした際、デフォルトの.envファイルが生成されますが、データベースの設定は自動的には含まれません。これらの設定は、プロジェクトの要件に応じて手動で追加する必要があります。

DB_CONNECTION=mysql
DB_HOST=データベースサーバー（mysql57.hoge.sakura.ne.jp みたいなやつ）
DB_PORT=3306
DB_DATABASE=データベース名
DB_USERNAME=ユーザ名
DB_PASSWORD=DB作成時に決めたパスワード

3. viエディタの操作方法

viエディタの操作が不慣れな場合は、以下の手順に従って編集を行います。

4. マイグレーションの実行

データベースにテーブルを作成するために、以下のコマンドを実行します。

php artisan migrate:w

実行結果の例:

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.01 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.01 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (0 seconds)
Migrating: 2020_06_23_024905_create_tasks_table
Migrated:  2020_06_23_024905_create_tasks_table (0 seconds)

5. アプリケーションキーの生成

アプリケーションキーを生成するために、以下のコマンドを実行します。

php artisan key:generate

実行結果:

 INFO  Application key set successfully. 

次にシンボリックリンクの作成をします。

シンボリックリンクは、あるディレクトリやファイルを別の場所にあるかのように見せかける仕組みです。これにより、異なる場所にあるファイルやディレクトリを簡単に参照できるようになります。

今回の例では、project/public/ディレクトリをウェブサーバーのルートディレクトリとして設定するためにシンボリックリンクを使用します。さくらサーバのルートディレクトリを変更できない場合に便利です。

手順

1. wwwディレクトリに移動

   • まず、wwwディレクトリに移動します。これはウェブサーバーの公開ディレクトリです。

cd ~/www

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

   • 次に、project/public/ディレクトリへのシンボリックリンクを作成します。これにより、www/projectにアクセスすると、実際にはproject/public/が参照されるようになります。

ln -s ~/project/public/ project

ブラウザで確認を実施

1. ブラウザを開く

   • ブラウザ（Chrome、Firefox、Edgeなど）を開きます。

2. プロジェクトのURLにアクセス

3. さくらサーバのドメインにアクセスします。

http://<YOUR_DOMAIN>/project

を入力します。YOUR_DOMAINの部分は、さくらサーバのドメイン名に置き換えてください。

1. Laravelの画面が表示されるか確認

   • Laravelのウェルカムページが表示されれば、設定は成功です。このページが表示されることで、シンボリックリンクが正しく機能していることが確認できます。

JavaScript と CSS が動くようにする手順

現在、Laravelの画面は表示されるものの、ユーザー登録などの機能が動作しない原因は、さくらサーバ上でJavaScript（JS）やCSSのビルドが行われていないためです。さくらサーバではビルドに必要なNode.jsが用意されていないため、ローカル環境でビルドを行い、そのビルドファイルをGitHubにプッシュしてサーバで取得する必要があります。

ローカル環境での作業

※このタイミングで、ローカルに今回デプロイする予定のプロジェクトを用意しておく必要があります。なければ、クローンしてください。dockerも立ち上げてなければ立ち上げましょう。

1. サーバの立ち上げ

   • Laravel Sailを使用してローカルサーバを立ち上げます。

./vendor/bin/sail up -d

1. ビルドの実行

   • JavaScriptとCSSのビルドを行います。

./vendor/bin/sail npm run build

実行結果の例:

> build
> vite build

vite v4.0.3 building for production...
✓ 50 modules transformed.
public/build/manifest.json              0.26 kB
public/build/assets/app-f3e12a14.css   27.42 kB │ gzip:  5.45 kB
public/build/assets/app-619f552e.js   138.86 kB │ gzip: 50.96 kB

1. .gitignoreファイルの編集

   • ビルドしたファイルをGitHubにプッシュできるように、.gitignoreファイルを下記のように編集します。具体的には、/public/buildの行をコメントアウトします（行の先頭に#を追加します）。

/node_modules
# /public/build
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.env.production
.phpunit.result.cache
Homestead.json
Homestead.yaml
auth.json
npm-debug.log
yarn-error.log
/.fleet
/.idea
/.vscode

1. GitHubへのプッシュ

   • 変更をGitHubにプッシュします。

git add .
git commit -m "Include build files"
git push origin main

サーバ上での作業

1. サーバ側に移動

   • ターミナルでSSHを使ってサーバにログインした状況を用意。

2. プロジェクトディレクトリに移動

   • プロジェクトのディレクトリに移動します。

cd ~/project

1. GitHubからのプル

   • GitHubから最新の変更をプルします。

git pull origin main

これで、無事に表示されます！お疲れ様でした。

http://<YOUR_DOMAIN>/project

※ここまでできたら、./vendor/bin/sail downや、exitを活用して別の画面に移動しても大丈夫です！

最後に

筆者自身も駆け出しのため、もしより良い方法やその他アドバイスがあれば、コメントやSNS DMなどでぜひ教えてくださいませ。