かあスレッド

skonishi1125.icon

関連記事

----------------------------------------

23.11.4ローカルで表示されるまでの流れ

mac

code:txt

cd ~/Desktop/Laravel_kirThread/local/laravel_kirthread/backend

# mainブランチ更新して

docker compose up -d

windows

code:txt

ssh-add ~/.ssh/github

cd private/laravel_kirthread/backend/

docker compose up -d

wslで見てるファイルが、どのエクスプローラーであるかを確認する

----------------------------------------

migrateが実行できない

RuntimeException : Changing columns for table "posts" requires Doctrine DBAL. Please install the doctrine/dbal package.

と言われたので、packageを入れる

composerが入ってなかったのでいれた

package入れて実行したら違うエラーが出た

Symfony\Component\Debug\Exception\FatalThrowableError : Class 'Doctrine\DBAL\Driver\PDOMySql\Driver' not found

入れるDBALのバージョンが違うらしい

正しいの入れてもっかい

できた！

リアクションの仕様を改修する

技術負債をなんとか

まずはリアクションを格納するテーブルがあれば良い

やるからにはちゃんとしたい

reactionsテーブル

現状中間テーブル。まあこれはこれでいいか

reaction_iconsテーブル

id, name, url, description, 日付くらいでよさそう

一応論理削除も入れとく！

urlがないケースもある。👀とか。画像かどうかのフラグも作る

絵文字だった場合のvalueも作る。

画像でない場合、valueを挿入するというようなイメージ

やること

投稿ページの仕様も変える必要があるので、うまい感じに整える

posts.reactionカラム不要かもしれないので消す

リアクションの数の調整

投稿ページの仕様も変える必要があるので、うまい感じに整える

Modelを作ったが呼べない

Modelの方のネームスペースがおかしい可能性があるので、そこを直す

現状ユーザーとか色々持ってきてるけど使ってない （終わってる）

順序つけてリファクタリング対応していく

吹き出しのリアクション部分 ✅

ボタンのリアクション部分

元々の。reactions,　countsの中身

reactions = ついているreaction_icon_idの種類

counts = どのIDのリアクションが、いくつついているか。

https://scrapbox.io/files/640b172ed1db64001b86951e.png

今回の実装

ついているreaction_icon_idの種類は、countで取得できる

どのIDのリアクションがいくつついているかは、countで確認できる

https://scrapbox.io/files/640b17633a6d03001baae41d.png

クラスが違うのかもしれないので、見比べてチェックする。

簡易的にした方

既に青くなってるボタン

https://scrapbox.io/files/640db2fbd620e4001c28b6e5.png

古い実装（もと）

https://scrapbox.io/files/640db42ee6e8af001bf1617d.png

一緒だな〜強いていうならクラスの位置が違うくらい

白いボタン

https://scrapbox.io/files/640db34404eed6001b2aa620.png

もと

https://scrapbox.io/files/640db4d1f1ca02001cc29665.png

https://scrapbox.io/files/640db6780d4e64001b1cf1cc.png

絶対これこれこれこれこれ

add_reactionの不具合は消えたかも

リアクションを

外す→つける→外すの挙動をすると、外す→つけるー＞つけるの挙動になって、数が増える

１（はずす前）

https://scrapbox.io/files/640db976669d00001bd07f78.png

２（つける前）

https://scrapbox.io/files/640db98535ca82001b79ff5f.png

３（もう一度外す前

https://scrapbox.io/files/640db9afaa9f1e001c3ec22d.png

４（外そうと押したら、増えた）

https://scrapbox.io/files/640db9bedd5db4001c22a6a1.png

正しい挙動

https://scrapbox.io/files/640dba4aa897e3001c150ac5.png

今回

https://scrapbox.io/files/640dba769be128001c7030f4.png

jsが悪さしてそうだな

外す（EF)

つける（DF)

外す（EFのはずが、DFになっている）

code:js

} else if( t_find_className.length == 1 ) {

if (status == 0) {

// 誰かが押しているリアクションボタンを押した時

console.log('D');

e.target.classList.remove('disabled');

} else {

console.log('E');

e.target.classList.remove('disabled');

}

t_find_className.text(react + ' x ' + cnt);

t_find_className.toggleClass('add-reaction');

console.log('F');

if (cnt == 0) {

console.log('cntが0なのでremoveします。');

t_find_className.remove();

}

e.target.classList.remove('disabled');

t_find_className

なんかリアクションの欄のことがt

var t_find_className = t.find('.' + parts['className']);

status

0が理想だけど、それ以外になってるらしい

わかった

ベースのリアクションhtmlがそもそも1行目だけおかしかったらしい

それをコピペしててダメだった

ある程度直した。リアクションを追加するときの作業

DBに値を入れる

jsに追加する

code:js

// idを入れて

case 10:

// hasClassに複数形を入れて

var is_add = $(e.target).closest('.post-container').find('.reactions-button').hasClass('reactions-button thumbs_ups add-reaction');

if (is_add) {

}

var parts = {

// リアクションと複数形を入れて終わり

'reaction' : "👍",

'className' : "thumbs_ups",

}

reactionAjaxExec(data, e, table, parts);

ついでにPostControllerのインデントも直す

開発環境をDocker化する

とりあえず

PHPとapacheの入ったコンテナ

DBコンテナ

バインドさせる

code:yml

volumes:

- ./php.ini:/usr/local/etc/php/php.ini

- ./:/var/www/html/laravel_kirthread/

apache

code:conf

vim /etc/apache2/apache2.conf

<Directory />

Options FollowSymLinks

AllowOverride None

# Require all denied

Require all granted

</Directory>

<Directory /usr/share>

AllowOverride None

Require all granted

</Directory>

<Directory /var/www/html/laravel_kirthread>

Options Indexes FollowSymLinks

AllowOverride All

Require all granted

</Directory>

vim /etc/apache2/sites-available/000-default.conf

DocumentRoot /var/www/html/laravel_kirthread

これで見えるようにはなったけど...

apacheやめてnginxにする

した

参考

困ってる

phpの時だけfile not found

見えるようになったページについて

nginxのコンテナなのにapache2 debianのwelcomeページが見えてたんだが

どっからきてる

nginx側にコードを置くのではなく、php側に配置しなくてはいけない

nginx側の下記記述を消した

code:yml

volumes:

- .:/var/www/laravel_kirthread

nginxの404が出るようになった！

こうなった

https://scrapbox.io/files/644e8226b4c7ee001ca87944.png

理屈がわからなすぎる

とりあえず稼働までは持ってきた

https://scrapbox.io/files/644e84dfdd35d9001b8bc076.png

手順

app側でartisanコマンドは打つ

マイグレーション

code:txt

DB_CONNECTION=mysql

# DB_HOSTはコンテナ名

DB_HOST=db

# DB_PORTはdocker側のポートを指定する

DB_PORT=3306

DB_DATABASE=database

DB_USERNAME=db-user

DB_PASSWORD=db-pass

githubにある程度のものは載せた。

各種Dockerファイルについての理解

各ファイルの変更反映について

docker-compose.yml

イメージ(build)は変更の必要なし

コンテナは再構築の必要あり

Dockerfile

Dockerfile

WORKDIR

execした際のディレクトリ位置を決める。初期値を決めたければこれを弄れば良い

docker-compose.yml

データ保持領域の作成

この設定をしておくと、コンテナを消したときでもファイルとしてDBの情報が残る。

Dockerを導入することで、

PHPの更新がしたい→コンテナアップデートだけで良い

MySQLの更新がしたい→同様

Laravelの更新がしたい→ローカルのPHPコンテナで動くなら本番コンテナでも動くはず

となるから楽なのかもしれない

よくあるalpineというワードについて

docker imageの1つ

https://scrapbox.io/files/645487ee5e821e08017fd1d9.png

何も記入されていないのが公式のimage

後のタグはlinuxディストリビューションを示す。alpineとは要するにlinux系のOSの1つ

ちなみにphp:8.0-fpmのOSは以下

code:app

root@92e9422d877b:/var/www/laravel_kirthread# cat /etc/os-release

PRETTY_NAME="Debian GNU/Linux 11 (bullseye)"

NAME="Debian GNU/Linux"

VERSION_ID="11"

VERSION="11 (bullseye)"

VERSION_CODENAME=bullseye

ID=debian

Debian ブルズアイ(v11)を使っている

この辺も本番(centos8)と揃えた方が良いかなと思ったけど、macOSでコンテナをおいてwebアプリ起動とcentos8でコンテナをおいてwebアプリ起動の比較となりそこまで変わらないと思うのでまあ良い

PHPのバージョンを本番同等にする

php7.4を探してこよう

ドキュメントには8.0~くらいの最新のものしかないので古い記述を探したい

docker hubで検索をかければ良い

https://scrapbox.io/files/64548b6ae9ae5362129fad89.png

書き換えてコンソールテスト

code:app-kirthread

root@7b1edf18462e:/var/www/laravel_kirthread# php -v

PHP 7.4.33 (cli) (built: Nov 15 2022 06:05:55) ( NTS )

Copyright (c) The PHP Group

Zend Engine v3.4.0, Copyright (c) Zend Technologies

おお〜

https://scrapbox.io/files/64548d05cf98f3d9e5acc85a.png

MySQLのverも8.0にしよう

8.0.33でよさそう。

5.8のローカルボリュームをそのまま使えるのだろうか...

https://scrapbox.io/files/64548edf3eddbae8405488c7.png

動いてるかも

code:txt

docker compose exec db bash

-----

bash-4.4# mysql --version

mysql Ver 8.0.33 for Linux on x86_64 (MySQL Community Server - GPL)

---- sqlの確認でも大丈夫だった

bash-4.4# mysql -uroot -p

mysql> select version();

+-----------+

| version() |

+-----------+

| 8.0.33 |

+-----------+

1 row in set (0.00 sec)

---- ちゃんと入れている情報も出る

mysql> select * from users order by id desc limit 1\G

*************************** 1. row ***************************

id: 974

name: ?????

email: test@test.com

email_verified_at: NULL

password: $2y$10$3ZLqAJaLyEZZxd5HoztafOOCq3RyvTXVUwn4OxvSzbxv0iCPXHv5G

remember_token: NULL

icon: NULL

created_at: 2023-05-04 10:42:19

updated_at: 2023-05-04 10:42:19

1 row in set (0.00 sec)

tableplusでも接続できるし投稿もできる すごい

ステージング借りた

パスフレーズとかはいつもの使った

本番のコード反映をgitを介して行うようにする

鍵をvpsに配置する

code:txt

# mac

scp ~/.ssh/id_ecdsa root@118.27.1.110:~/.ssh/

# prod vps

ssh git@github.com

コードのclone

code:prod

git clone git@github.com:skonishi1125/laravel_kirthread.git

# storageファイルを今までのディレクトリから持ってくる

#

cp -r ~/kirThread/storage storage

composer update

composer updateの前にstorageファイルを調整しないと以下のエラーに遭遇する。

cp ~/kirThread/.env .env

tinkerで下記を打ち込み、DB接続テストをする。

DB::connection();

この後apacheのconfを調整してディレクトリを切り替えるので、コードの文字を少し変えておく

apacheをrestartした時に変わったことが分かるようにしておく

confの切り替え

code:httpd.conf

# /var/www/html/kirThread/public を以下に変える。

/var/www/html/laravel_kirthread/backend/public

code:httpd-le-ssl.conf

# 上と同じ。

/var/www/html/laravel_kirthread/backend/public

これだけだと500エラーに遭遇した。

httpd.conf

code:conf

# DocumentRoot: The directory out of which you will serve your

# documents. By default, all requests are taken from this directory, but

# symbolic links and aliases may be used to point to other locations.

#

DocumentRoot "/var/www/html/kirThread/public"

ここを変えるとおかしくなるっぽい。他の部分は変えても問題なかった。

code:public/index.php

// ここが動いていない。

$response = $kernel->handle(

//echo "naka";

$request = Illuminate\Http\Request::capture()

);

storageの下が読み込みにしていなかったことに気づいた

読めるようになった！！

ブログにしとく

プロフィール画面の作成

コマンド

code:txt

php artisan make:controller ProfileController --resource

# ファイル区切りするときはバックスラッシュではない

php artisan make:model Models/Profile -m

リアクション機能の改善

画像でもajaxにしたい

現在の仕組み

is_picture_iconがtrueの時

そうじゃない時

reactions.valueの値を表示させている(💕とかをそのままDBに挿入している)

現在の仕組み

DBに値を入れる

jsに追加する

結構冗長

直すの相当大変そう...

各場所の命名をする

吹き出しボタン: アイコンクリックで出てくる青無地の吹き出しのボタンのこと

青ボタン: 投稿下部のボタンのこと

リアクション範囲の取得

table 青ボタンのdiv要素のこと

post_id, user_id, reaction_id: 吹き出しの方のそれぞれのid

data

status ajaxで使う。

0 青ボタンがユーザーがまだ押していない

1 青ボタンがユーザーがすでに押している場合

リアクションごとのswitch文

is_add

青ボタン部分がユーザーが押しているかどうかを判定する。trueならstatusを1にする

parts

そのリアクションの名称などを付与する

reactionAjaxExec

新規実装する

増えたボタンについて

押されているものを押した場合

押されてないものを押した場合

classNameがundefinedである

24.8.22

24.8.25

やること

PHPとLaravelのバージョンを上げたので、Vueのバージョンを最新のものを使いたい。✅

画像リサイズしたすぎる

24.9.29

RPG制作中だが、ついでにリアクション関連の画像の調整をする

リアクション画像をstorageではなくpublicに置こう

アップした画像をリサイズしたい

導入する

composer require intervention/image

指定の通り書いてみて、エラー

code:txt

Imagick PHP extension must be installed to use this driver.

https://scrapbox.io/files/66f914622af729001d02044a.png

https://scrapbox.io/files/66f9151a28254d001cc57620.png

できたかな

他も文法エラーがあるのでちょいちょいドキュメントに沿って直していく

HEICもアップできるようにしたかったけど、ちょっと時間がかかりそうなので保留。

ローカルと本番のphp.iniをある程度合わせる

code:php

sudo scp ec2-user@100.0.0.0:/etc/php.ini .

# この内容をローカルのiniにもある程度転記する

# (backend/docker/php/php.ini). コンテナ再起動だけじゃ適用されないので注意

# コンテナ内の /usr/local/etc/php/php.ini でチェックできる

24.10.14 ログローテートする