さくらインターネットのレンタルサーバーでLaravelを使う

2021年3月25日 16:10

Laravelでコーディングを始めるときに、あれ？どうするんだっけ？と本を開いたり、Webを漁ったりと情報集めしていくのがメンドイのでまとめました。ということで、あくまで自分の覚書です！なので説明が多々省かれています！ただ、同じようなニーズをお持ちの方は少なからずいると思うので、適宜参考にしていただければ幸いです。

0.前提

開発環境は、windows10
作成するプロジェクトは、demo
さくらインターネットアカウントは、sakura
Laravelをプロジェクトを置くルートフォルダは、home/sakura
として、記載します。

フロントエンドには、Vue3を
CSSには、Tailwindcssを使用します。

1.Laravel環境構築

環境を構築するフォルダに移動した後、

composer create-project "laravel/Laravel" demo

このコマンドだと最新バージョンのLaravelがインストールされるが、Laravelのバージョンを指定したい場合は、

composer create-project "laravel/Laravel=[バージョン]" demo

とする。バージョンには、ワイルドカード(*)が使用可能
例えば、laravel/Laravel=5.*とか。

2.Laravelのルート（公開フォルダ）とさくらインターネットのルート（公開フォルダ）の不整合を解消する

さくらインターネットのルート（公開フォルダ）は、/home/sakura/www
一方、Laravelのルート（公開フォルダ）は、/home/sakura/demo/public
公開フォルダに不整合がある状態なので、エラーになる。
これを解消するため、以下の作業を実施する。
1. public内のファイルの移動
2. publicにリンクする

2-1. public内のファイルの移動

Laravelのルート（demo/public）に保存されている全ファイルを、さくらインターネットでのルート（www/demo/）に移動します。
ファイルの移動によりパスが変更になるため、index.phpに記載されているパスを移動先に変更しておく。
参考

2-2. publicにリンクする

ルートの不整合を解消するため、publicにリンクを通す。

linuxの書式

ln -s [実体ファイル] [シンボリックリンク]
ln -s /home/sakura/www/demo /home/sakura/demo/public

Windowsの書式

mklink /D [シンボリックリンク] [実体ファイル]
mklink /D c:\sakura\demo\public c:\sakura\www\demo

参考サイト

2-3. publicからstorageにリンクを通す

画像等の保存先のstorageフォルダにpublicからアクセス出来るようリンクを通します。こうすることで、asset('storage/◯◯◯')で画像データ等にアクセスが可能になります。
書式は、2-2のOSごとの書式で、シンボリックリンクが「sakura/www/demo/storage」、実体ファイルが「saukra/demo/storage/app/public/」になります。

3.動作確認

https://sakura.sakura.ne.jp/demo/
にアクセスしてLaravelの初期画面を確認する。

4.環境変数を編集

作成したプロジェクトのルートにある.envに記載されている環境変数を編集する。
.env → ローカルでのデバッグ用
.env.prod → リリース用

サーバーによって読み込むenvファイルを切り換える
通常は、.envファイルを読み込むため、bootstrap/app.phpに下記のコードを追加し動作しているサーバーによってenvファイルを読み替える。
また、.htaccessにサーバー環境変数APP_ENVを定義するやり方もあるけど、.htaccessはあまり触りたくないので、コードで切り換える。

/**
* 読み込むenvファイルを切り換える
*/
switch ($_SERVER['SERVER_NAME'] ?? 'localhost') {
   case [サーバー1]:
       $app->loadEnvironmentFrom('.env.prod');
   break;
}

4.3rdパーティーのライブラリを追加する

必要な3rdパーティーのライブラリを追加していきます。基本的に使っているLINE SDKと、使ったことあるTwitterOAuthの例は以下の通り。

LINE SDKの場合

composer require linecorp/line-bot-sdk

TwitterOAuthの場合

composer require abraham/twitteroauth

LINE SDKを導入しようとするとsocketエクステンションがないよと怒られるので、こちらの方法でsocketエクステンションの有効化を行います。

5. 最低限の日本語化設定？

日本語化しようと調査したことはないので、日本語化についてはよく知らない。ここに記載しているのは最低限の日本語化する際の設定かも。

config/app.php
'timezone' => 'UTC'  ------------> 'timezone' => 'Asia/Tokyo'
'locale' => 'en' ------------> 'locale' => 'jp'

6. Vue3を使えるようにする

基本的な流れは、ココを参照すればOK!!

モジュール更新に使用するnpmの取説

◯パッケージのバージョンを調べる

npm show ［パッケージ名］ versions

◯現在インストールしているパッケージのバージョン一覧（1階層まで）

npm list --depth=0

◯現在インストールしているパッケージに最新版が存在するか確認

npm outdated

◯ncuでインストールしているパッケージの最新版を調べる
ncuのインストールと実行

> npm install -g npm-check-updates
> ncu

実行すると^2.0.0 → ^3.0.5といった形で最新バージョンを知らせてくれる

◯ncuを活用して新しいバージョンに更新する

ncu -u [パッケージ名]　←---指定したパッケージのみ
ncu -u　←--------------------全パッケージ対象

これにより、package.jsonが更新されるので、

 npm update もしくは npm install

実行する

7. Tailwindcssを使えるようにする

流れは、ココを参照する！

この記事が気に入ったらサポートをしてみませんか？