ReactとLaravelでポケモン図鑑を作って、Xserverにデプロイした時のコマンドまとめ
プロジェクト作成
curl -s https://laravel.build/pokemon | bash作成したプロジェクトのディレクトリに移動
Sail コマンドを使えるようにする
code ~/.bashrc
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'変更を反映
source ~/.bashrcsail を起動
sail uplocalhost に laravel が表示されるようになる
config/app.php を修正
'timezone' => env('APP_TIMEZONE', 'Asia/Tokyo'),
'locale' => env('APP_LOCALE', 'ja'),Laravel Breeze パッケージをインストール
sail composer require laravel/breeze --devLaravel Breeze を React-typescript でインストール
sail artisan breeze:install react --typescriptフロントエンドの依存関係をインストール
sail npm install && sail npm run devXserver に SSH 接続
サーバーパネルよりデータベースの作成、SSL化の設定をしておく
サーバーパネルの SSH 設定を ON にし、公開鍵認証用鍵ペアを生成する
生成した鍵をホームディレクトリの.ssh フォルダに移動
ターミナルも.ssh に移動
cd .ssh鍵のパーミッションを変更
chmod 700 .ssh
chmod 600 [サーバー ID].keyssh接続
ssh -l [サーバー ID] -i [サーバー ID].key [サーバー ID].xsrv.jp -p 10022鍵生成時に設定したパスフレーズを入力すると SSH 接続が完了
Xserver で laravel の環境構築
PHP
サーバーパネルで PHP のバージョンをプロジェクトと同じものに設定する
ターミナルで使用する PHP のバージョンもプロジェクトと同じものに設定する
ホームディレクトリ内にbinディレクトリを作成
mkdir $HOME/bin/usr/bin/php8.2 へのシンボリックリンクを $HOME/bin/php に作成(これにより、php コマンドを実行するときに、/usr/bin/php8.2 が使用されるようになる)
ln -s /usr/bin/php8.2 $HOME/bin/phpパスを変更して、phpコマンドがbinディレクトリのシンボリックリンクを最初に見つけられるようにする
code ~/.bash_profile
変更前 ⇒ PATH=$PATH:$HOME/bin
変更後 ⇒ PATH=$HOME/bin:$PATH変更内容を読み込む
source ~/.bash_profile指定したphpのバージョンが使用されているか確認
php -vコンポーザー
コンポーザー(PHPの依存管理ツール)のインストール A Dependency Manager for PHP
下記公式サイトのコマンドを実行
undefined
getcomposer.org
ダウンロードしたファイルをbinディレクトリに移動
mv composer.phar $HOME/bin/composer変更内容を読み込む
source ~/.bash_profileバージョンの確認
composer -vnode.js をインストール
wget git.io/nodebrew
perl nodebrew setupcode ~/.bash_profilebash ファイルに下記を追記し、nodeblrew のパスをとおす
export PATH=$HOME/.nodebrew/current/bin:$PATH変更内容を読み込む
source ~/.bash_profile最新版をインストールするとエラーが出るので、安定板をインストールする
nodebrew install v18.0.0
nodebrew use v18.0.0
node -vXserver より guthub に接続
SSH 接続したターミナルにて、下記のコマンドで鍵を生成
ssh-keygen -t rsa -b 4096出力先はデフォルトのまま(何も入力せずエンター)
パスフレーズを任意で入力
生成した鍵をターミナルに出力
cat $HOME/.ssh/id_rsa.pub出力された文字列をコピー
github のプロジェクト用リポジトリの setting、deploy key にペースト。Add Key ボタンをクリック
xserver のターミナルに戻る
プロジェクト用のディレクトリを作成し、github よりクローンする
mkdir pokemon-laravel-xserver
cd pokemon-laravel-xserver
git clone git@github.com:risu043/pokemon-laravel-github.gitプロジェクト直下のディレクトリでコンポーザーをインストール
cd pokemon-laravel-github
composer install.envファイルを作成しAPP_KEYを生成
cp .env.example .env
php artisan key:generate.env ファイルを修正
APP_ENV=production
APP_DEBUG=false
APP_URL=https://[ドメイン]データベース名、ユーザ名、パスも修正(サーバーパネルで設定したものに修正)
DBをlaravelのDBに移行させる
php artisan migrateプロジェクト直下でビルドを行う
npm install
npm run buildシンボリックリンク作成
ln -s $HOME/pokemon-laravel-xserver/pokemon-laravel-github/public $HOME/[ドメイン]/public_htmlプロジェクト直下でストレージのリンク作成
php artisan storage:linkpublic_html の.htaccess を修正(常時SSL化し、シンボリック先の公開フォルダが表示されるようにする)
RewriteEngine On
#ssl 通信
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
#シンボリックリンク
RewriteCond %{REQUEST_URI} !^/public/
RewriteRule ^(.*)$ public/$1 [QSA,L]完成!
