aircolor memolog

Web制作・テクノロジー、たまに旅行記

React + Express + ベーシック認証で、manifest.jsonに401エラーが出たので対処したメモ

Create React appsでReactアプリを作成、yarn buildコマンドでbuildしたアプリに、expressとbasic-authを使い、ベーシック認証をかける仕組みを作ろうと思ったら、

GET http://localhost:3000/manifest.json 401 (Unauthorized)

というエラーが出た。faviconや他の静的ファイルはBasic認証を通しているので、何故？と思って調べたら、manifestファイルはCORSの設定をしないと、ベーシック認証が突破できない模様。
public/index.htmlのmanifest.jsonを読み込んでいる箇所を、以下のように書き換えることで回避ができた。crossoriginという属性が有るのは知っていたけど、こういうところで使うのかぁ、という共有。Reactって書いたけどcrossorigin にしか言及してなくってすんません。

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" crossorigin="use-credentials"/>

参考

github.com

developer.mozilla.org

遅い2020年の個人的な抱負

遅ればせながら 日記 備忘録

光の早さで1月が終わろうとしている。12月の振り返りから新しい抱負をたてていなかったので、焦り気味に今年の抱負をたてた。去年作成した抱負から反省して、方針としては抽象的にかつ大きめの抱負にする。

副業を安定稼働させる

お陰様で副業は好調で、去年はトータルで前職の給与のほぼ倍を超えた。需要があることは肌で感じたので、マッチング率や時間のかけ方を改善していきたい。 一方で会社外で活動する分、社会的信用がダイレクトに効いてくるので、期待を裏切らない様、オーバーワークにならないように調整をしていく。

アウトプット、インプットを多めに

前半までは割とアウトプットも多かったが、後半副業に時間が取られたり、後述する家の購入などでバタバタして、アウトプットへモチベーションも含めて避けなかった。本も例年より買ったが積み本になっていた。

今年は去年を超えるようにしたい。

ポートフォリオサイトを作る

作る作る詐欺で滞ったサイトをそろそろまとめたいところ、、自分の顔となるサイトなのでしっかり作りたいが、作っては納得せずに途中でやめて...みたいなことを繰り返しているので、言い訳せずにやってきたい。

ローンを返す

新居を買って借金王になったので、まずはちゃんと一年返せる様に頑張るぞい。

Laravel / Valetで開発環境を簡単に準備するメモ

PHP 備忘録 開発

Laravel & Valetで簡易開発環境を最短で構築する手順とかを簡易的にまとめておく。

環境

  • Larabel 5.7
  • Valet

インストール

Homebrewとcomposer、brew経由でのphpインストールは済んでいることを前提。

$ brew update
$ composer global require laravel/valet
$ valet install

pingを打って、valetが起動しているかどうかを確認します。

ping foobar.test

実行

valetはparkとlinkという2つの実行用コマンドを用意しています。

parkコマンド

プロジェクトの親ディレクトリに対して、parkコマンドを実行。

parent 
　 └　sample-project
$ cd parent // parentに移動
$ valet park // parkコマンドを実行してvaletとリンクさせる

sample-project.testで動作を確認

linkコマンド

プロジェクトの親ディレクトリに対して、linkコマンドを実行する。 ここではparent/sample-projectというディレクトリにlinkコマンドを実行する前提で説明。

$ cd parent/sample-project // parentの中に入る
$ valet link

ブラウザでhttp://sample-project.testを開いて動作を確認する。動作していれば作業完了。

apacheと競合して動かない場合

Valetはnginxですが、Mac標準のApacheと競合して動作しないケースがあるようです。 https://stackoverflow.com/questions/39708139/laravel-valet-it-works

$ sudo apachectl stop
$ valet restart

関連記事まとめ

Laravelの開発でよく使っていたコマンドまとめ

備忘録 開発 メモ PHP

以前Laravelを使って開発している際よく使うartisanコマンド、開発の延長で使うDBのコマンド、調べながら知ったものを備忘録も兼ねてまとめていた...のだがしばらく下書きで放置していたのでここで公開してみます。

Laravelのバージョン

Laravel 5.7

ヘルプコマンド

artisanコマンドは多く用意されているので、迷ったときはよく見る。

php artisan list

configのキャッシュをクリアする

env設定を変更して、再度起動した際に表示が残り続けたりするので、よく使う。

$ php artisan config:cache

各ファイルの作成

artisanコマンドはmodelやcontrollerを生成する機能も備えてます。

modelを作成

$ php artisan make:model

controllerを作成

$ php artisan config:cache

【Optional】 DB(MySQL)操作周り

デザイナー上がりのエンジニアにはSQLコマンドは割ととっつきにくい。なのでよく使うコマンドをコピペして残しておく。基本的にDBはLaravelから操作するので、Terminalから使うコマンドはほとんどこれが全てです。

Shell操作

# MySQLインストール
$ brew install mysql@5.7

mysqlにバージョンを付けないでインストールすると8.x系がインストールされる。8.0系の認証方式ではLaravelをそのまま使えないのであえてこのバージョンにしている（参考: https://takakisan.com/laravel-mysql-8-migration-error-fix/)

# DB起動
$ mysql.server start

# DB停止
$ mysql.server stop

# DBの再起動
$ mysql.server restart

# DBへログイン
$ mysql -u root

SQLコマンド

# DB作成（文字コードがutf8mb4）
create database {Database名} character set utf8mb4;

# 作成したDBの一覧確認
SHOW DATABASES;

# user確認
SELECT Host, User FROM mysql.user;

# column（型）確認
use `{Database名}`;
SHOW COLUMNS FROM `{table名}`;

# DBの中身確認
use `{Database名}`;
SHOW COLUMNS FROM `users`;
SELECT * FROM `{table名}`;

# tableの中身を空にする
TRUNCATE TABLE `{table名}`;

# DB内の削除
use `{Database名}`;
DROP TABLE `{table名}`;

Intuitive Custom Post Orderの並び順をWP-REST-APIに反映する

PHP WordPress

Intuitive Custom Post Orderを有効にしても、デフォルトではWP-REST-APIの並び順に反映されない模様。functions.phpに以下のadd_filterを追記することで並び替えを有効化できます。

add_filter( "rest_post_query", function( $args, $request ) {
    $args['orderby'] = 'menu_order';
    return $args;
}, 10, 2 );

元記事

wordpress.stackexchange.com

契約しているサブスクリプションを晒す【2019春】

雑記 メモ

最近支出が多いので自分の契約しているサブスクリプションをまとめてみることにした。これから有料になるが、現時点で無料のサービスは省いている。

続きを読む