まとめ
- fukabori.fm：Apple Podcast内の108. Azure Functions チームでの開発方法やマネージャの役割 w/ sandayuu
- 著者である牛尾剛さん本人が番組のゲストとして登場し、実際の仕事環境はどうであるのか、どんな感じなのかを深掘りして話している。
- 本の内容と被る部分もあるが、本のベースとなる環境を著者本人が語っている。本の内容の理解をブーストするのに良いと思う。
- 『世界一流エンジニアの思考法』牛尾剛 | 単行本 – 文藝春秋BOOKS
近づけたいページと、不満点
- Signin Template · Bootstrap v5.0
- Bootstrap だけで作成したい。外部の CSS を読み込んでいたり、
<style>を定義していたりするが、読み込みたくないし定義したくない。
- Bootstrap だけで作成したい。外部の CSS を読み込んでいたり、
まとめなど
- iframe タグの src 属性に指定した URL に対してデータを送信し、その URL のページから送信されるデータを受信する。送受信、ピンポンするようなイメージ。
- 呼び出されるオリジン側の認証状態の操作を行う (ことで呼び出されるオリジンのCookieを操作する) のに便利
- 前回の 【TypeScript】iframe からの postMessage を受け取る汎用関数を作った – oki2a24 の仲間。
まとめなど
<iframe>から送られてくる postMessage を受信したいときに使用する。- 認証状態をチェックするときに使うと便利。
- セキュリティについて、汎用関数内で postMessage の送信元をチェックするようにしているが、これ以外にも例えば
<iframe>で指定する URL 側でも措置を別途考慮する必要がある点に注意。 - 汎用関数の引数に指定する
<iframe>の URLは、静的な HTML をレスポンスする場合は想定通りの動きをした。しかし、 Vue Router で定義したページを指定した場合には想定通りの動きをせず、使い物にならなかった。
はじめに
AWS S3 を今まで使ったことがありませんでした。テキトーに使い始めてみたら、何やらよくわからないエラーで手間取ってしまいました。そこで、基礎の部分から調べてみようと思い、本投稿を残します。
特に、なぜか S3 フォルダを作成できない問題を解消したかったのでした。
まとめ
- S3 フォルダの作成するために
Storage::disk('s3')->makeDirectory($directory);などと実行すると400 Bad RequestAccessControlListNotSupportedのエラーとなった。- これは Laravel 設定ファイル
laravel/config/filesystems.phpにて'visibility' => 'private',を設定することで解消できた。 - 調査 → makeDirectory AccessControlListNotSupported – Google 検索
- これは Laravel 設定ファイル
ポイント
- debian:bullseye-slim イメージをベースにした。
- Supervisor 4 が対象
- ログ出力に関して権限を修正する必要があった。
- ソケットに関する権限不足に対処する必要があった。
まとめ
- スマートフォンアプリと Kr cli とのペアリングをやり直すには
kr pairを実行する。- Pair your computer
Already paired, unpair current session? [y/N]と尋ねられるのでyと答えて既存のペアリング状態を解除する。
- エラー
Public key for github.com does not match pinned key. If the host key has actually changed, remove the pinned key in Krypton.への対応は、スマートフォンアプリにある Known Hosts を削除すればよい。- https://github.com/kryptco/kr/issues/118#issuecomment-422001887
- 上記を頼りにアプリの developler タブ (
{ }のタブ) の "Edit Known Hosts" から "Known Hosts" ページへアクセスし、 github.com 項目をスワイプして削除する。
![[hadolint] warning: Pin versions in apt get install. Instead of apt-get install use apt-get install = (DL3008) が発生した時の Visual Studio Code](https://i0.wp.com/oki2a24.com/wp-content/uploads/2022/10/fix-hadolint-warning-pin-versions-in-apt-get-install-instead-of-apt-get-install-package-use-apt-get-install-packageversion-dl3008_1.webp?fit=1200%2C391&ssl=1)
エラー詳細
DL3008 · hadolint/hadolint Wiki · GitHub
Docker イメージにパッケージをインストールするときに、バージョンが決め手になることは全然ないのですが、それだと hadolint が警告を出してきました。
無視したり、警告を抑制しても良いのですけれども、パッケージのバージョンをできるだけ細かく指定するべき、というのは、まあそうだよね、と思いましたので対応することにいたしました。
今回の例で取り上げるパッケージ
unzip 、および libpq-dev にバージョンを指定していないので、これらを例に取り上げます。もともと、この警告に対応してバージョンを明記していたのですけれども、久しぶりに Docker イメージのビルドを行ったところ、そんなバージョンは無い、と言われてしまったので、今回の投稿に繋がった背景もあります。そもそも、このようなケースの場合、バージョン指定などしなくてもよさそうな気もします。。。
対応流れまとめ。
- バージョン指定をしないまま、最新のパッケージを Docker イメージにインストールする。
- コンテナを立ち上げ、インストールしたパッケージのバージョンを調べる。
- Dockerfile に調べたバージョンをコピペする。
このうち、最初の手順である、 Docker イメージへの問題となるバージョン未設定パッケージのインストールは完了しているところから始まります。
やりたいこと
- Vue.js 3
- Swiper の SFC への入力
- 画像 URL の配列
- Swiper の SFC からの出力
- 特になし。
- スライドショー、フォトギャラリーがウェブブラウザに描画される
- サムネイルあり
直面した問題
環境
- WLS2 (その後 Mac でも実施)
- Vue – アセットの構築（Vite） 9.x Laravel のところまで設定を進めた。
npm run prod の場合は、静的ファイルを書き出してそのファイルへのリンクを HTML ファイルへ埋め込むようになっています。よって、ビルドされたファイルへのリンクは Laravel へアクセスするときの Apache なり Nginx なり PHP ビルトインサーバなりの URL と同じ URL が埋め込まれ、この URL でアクセスできるため問題はありません。
一方で、 npm run dev の場合は、 Vite の開発サーバが別途立ち上がります。そして Vite でビルドされたファイルへアクセスするための埋め込みリンクは、 Vite の開発サーバの URL となります。
Docker を使う場合、 Docker ホスト側から Docker コンテナ内の Vite 開発サーバへどうやってアクセスするのかが、問題になりました。
例えば、カスタマイズしていない vite.config.js で npm run dev すると次のようになります。
- URL は次のように表示された。
- VITE ➜ Local: http://localhost:5173/
- LARAVEL ➜ APP_URL: http://localhost
- Docker ホストにて、ウェブブラウザで
http://localhost/にアクセスすると画面真っ白になった。 - ページのソースコードを見てみると、 Vite でビルドされたファイルへのリンクは
<script type="module" src="http://127.0.0.1:5173/resources/js/app.js"></script>となっていた。この URL にアクセスしてみても ERR_CONNECTION_REFUSED のエラーページとなった。 - Docker コンテナの port に "5173:5173" を追加し、再度 http://127.0.0.1:5173 へのアクセスを試したところ、異なるエラー ERR_EMPTY_RESPONSE となったもののやはりエラーページとなった。
今回、これを解決しましたのでメモいたします。