thundermiracle

課題 Next.jsといえば、サーバーサイドレンダリング（SSR）が特徴的ですね。SSRを利用すると、多くの場合Vercelでのデプロイが一般的となります。というのも、独自に構築するのは容易ではないからです。興味があれば、open-nextをご覧ください。 Vercel…

Next.jsのServerless FunctionのCold Start問題の改善

シリーズ一覧 Playwright+Github Actionでビジュアルリグレッションテストしてみた — 1 Playwright+Github Actionでビジュアルリグレッションテストしてみた — 2 Playwright+Github Action…

Playwright+Github Actionでビジュアルリグレッションテストしてみた -- 3

シリーズ一覧 Playwright+Github Actionでビジュアルリグレッションテストしてみた — 1 Playwright+Github Actionでビジュアルリグレッションテストしてみた — 2　← 今はここ Playwright+Github Action…

Playwright+Github Actionでビジュアルリグレッションテストしてみた -- 2

シリーズ一覧 Playwright+Github Actionでビジュアルリグレッションテストしてみた — 1　← 今はここ Playwright+Github Actionでビジュアルリグレッションテストしてみた — 2 Playwright+Github Action…

Playwright+Github Actionでビジュアルリグレッションテストしてみた -- 1

Prismaは？ 非常に有名なORMツールとなります。特にRDBとの相性が抜群で、とても使いやすいです。 個人的にPrismaの利点と言われると。 データモデルを簡単に定義できる。SQLを書かずに簡単にDBの操作できる。また、型安全 データモデルをPrisma schema…

PrismaでMongoDBを操作してみた

前書き Googleは個人的にエンジニアのパラダイスではあります。数えられないほどの発想はGoogleから発信してきました。のフェーズにもとても同感できます。今の開発は…

ソフトウェアエンジニアリングのチームメンバー

TL;DR Edge FunctionsがCold Start発生しないため、Serverless Functionsより圧倒的にパフォーマンスが良いです。その上、VercelのServerless Function…

VercelのServerless FunctionとEdge Functionのパフォーマンス比較

サブディレクトリ ホームページとブログを別々の技術スタックとプロジェクトで開発することは珍しいことではありません。しかし、同じドメインの直下にデプロイする（blog…

Next.jsのホームページとGatsbyJSのブログを同じドメインに

感想 3年半前、Next.jsのメンテナはあまりコミュニティのフィードバックを受け入れず、親切ではありませんでした。ドキュメントも充実ではなく、問題があったらソースコードを読む必要がありました。その上、Next.jsがデフォルトでSSR…

GatsbyJSで作ったホームページをNext.jsへ書き換えた

JavaScriptでGoの関数を呼び出す方法を紹介します。 Go側 簡単な関数を作ってみましょう。 フォルダを作ってGoのmain関数を作る VSCodeで開いて、を作ります。 JavaScript…

Goで作った関数をJavaScriptで呼び出してみた

Remixをpnpmで起動する方法をご紹介します。 インストール peerDependenciesのエラーが出るが無視すればOKです。そして、いつも通り自分の好みで設定すればいいです。 create-remixのbasics版  create-remixのpre…

Remixをpnpmで動かす

ウェブ技術が日進月歩で、新しい物が次々に現れます。Edge Computing（エッジコンピューティング）はその中の1つです。実はエッジコンピューティングがすごい新鮮な技術ではありません。元々IoTのためのものでした。今いよいよウェブ業界にServerless Functions…

VercelのEdge Functionsで日本の祝日を検索するサービスを作ってみた

shift-jisの日本の祝日データをfetch/axiosで読み込むのに、文字化けにちょっと苦労しました。インターネットからshift-jisのファイルを取り込む方法を記録しておきます。 共通部分 まずファイルをarraybuffer…

fetchおよびaxiosでshift-jisのファイルを取り込む

Anthony Fuさんの記事「Reimagine Atomic CSS」に感動され、UnoCSSを使いたくなってきました。ちょうど自分のHPをGatsbyJSからNext.jsへ移行する予定なので、Next.jsにUnoCSSを導入してみました。 公式サポート 2022年6月…

Next.jsにUnoCSSの導入

関数型プログラミングと言えば、再帰処理を思い出すでしょう。再帰処理には末尾再帰の有無がスタックオーバーフロー、いわゆるメモリの過消費を防ぐために必要です。末尾再帰について、こちらのwikiをご覧ください。JavaScriptのes…

JavaScriptの末尾再帰

Github Actionsを作る時には、Rest APIを使うのが一般的です。「GithubのGraphQL APIをも快適に使えるか」という質問がありました。いろいろ調べてみて、答えは「Yes」でした。今日は設定方法を紹介したいと思います。 テンプレートをcloneし、API…

GraphQL APIを使ってGithub Actionsを組み込む

先日チームメンバーと「TypeScriptのinterfaceとtypeのどっちが好み」を話しました。個人的に安全派なので、interfaceを多く採用しています。今日interfaceとtypeを比較してみようと思います。 declaration merge interface…

TypeScriptのinterfaces vs types

もっとカッコよくVSCodeを使うように、便利なショートカットをご紹介します。 ※ Macシステムをベースでのショートカットとなり、Windowsならをに、をへ変更して試してみてください。 ファイルを探して開く   コマンドパレットを開く ESLintサーバ、TS…

VSCodeを使う時覚えておきたいショートカット2022

技術ブログを書く時、ソースコードの共有は一般的です。幸い、GatsbyJS…

GatsbyJSのコードブロックにコピーボタンを追加する

本サイトのCI/CDがNetlifyのビルドサービスを利用したが、最近Github Actionsに移行しました。キッカケはrenovateの導入およびGatsbyJSのビルド問題となります。 tl;dr NetlifyへデプロイするためにGithub Action…

GitHub ActionsにてWebサイトをNetlifyへデプロイ

dotnet coreプログラムでIPアドレスを取得するのに難しくないです。 しかし、Dockerの中に起動したら、上記の方法はサーバのローカルIPアドレスしか取得できません。本来のIPアドレスを取得するために、NGINXの設定が必要です。Plesk…

Plesk中のDockerで起動したdotnet coreプログラムにIPアドレスを取得する

packageのバージョンアップに伴い、Next.jsを12.0.8にアップデートしました。しかし、今まで動いたソースコードがruntimeエラーになり、動かなくなりました。エラーの内容はこれです。 軽く調べてみると気づいたが、class中のfunctionにがundefined…

Next.js 12.0.8 のバグを踏んじゃった

Reactのmaterial-ui（現在muiへリネームされた）を使う時、css-in-jsのエンジンを選択しなければいけません。material-uiが推しているのは@emotion/reactですが、やっぱり今もstyled-components…

Next.js + material-ui + styled-componentsの型安全のテーマカスタマイズ

コロナ時代の今、eラーニングを利用する方が少なくないでしょう。対面式より手頃で、勉強する時間帯も自分で決められるのが、忙しいサラリーマンにとってメリットが大きいです。 自分AWSの初心者だがUdemyのコースを受けて、簡単にAWS Certified Solutions…

UdacityのNanodegree-Blockchain Developerコースを受けた感想

動的な型であるJavaScriptのスーパーセットといわれるTypeScriptと異なり、C# .Netが元々静的な型となります。C#のinterfaceをreflectでき、interfaceからpropertiesを取れるので、かなり便利です。今回はC#のエレガントなDI…

C# .NetFrameworkのDI

TypeScriptのDIライブラリの検証を続けていきたいです。今回はTypeDIを使ってみようと思います。 ※ DI（dependency inject依存性注入）の説明は割愛します。必要があればwikipediaをご覧ください。 シリーズ一覧 TypeScriptのDI…

TypeScriptのDI、その弎：TypeDI

TypeScriptのDIライブラリの検証を続けていきたいです。今回はを使ってみようと思います。 ※ DI（dependency inject依存性注入）の説明は割愛します。必要があればwikipediaをご覧ください。 シリーズ一覧 TypeScriptのDI…

TypeScriptのDI、その肆：nestjs

TypeScriptのDIライブラリの検証を続けていきたいです。今回はMicroSoft社が作ったTSyringeを使ってみようと思います。 ※ DI（dependency inject依存性注入）の説明は割愛します。必要があればwikipedia…

TypeScriptのDI、その貮：TSyringe

.net coreを経験した自分がOOPならDI（dependency injection）を使わなければならない執念があります。TypeScriptは。net coreと同じMicrosoftの出身で、各ライブラリを使って、TypeScriptのDIを体験したいと思います。第…

TypeScriptのDI、その壱：InversifyJS

Brave Browserはプライバシーを守るために生まれたマイノリティーブラウザとなります。Braveは個人を特定しようとするプログラム（ex: GoogleAnalytics…

BraveBrowserの検知

経緯はMacOS 10.15 CatalinaをParallelsにインストールご参考ください。 今回は無料のVMwareにCatalinaをインストールする方法をご紹介します。 TL;DR Parallels…

MacOS 10.15 CatalinaをVMwareにインストール

2019年リリースされたMacOSのSafari@v13ですが、が使えません。まだまだ新しいほうで対応しなければいけません。しかし、エンジニア全員のMacbookProのMacOSが最新でSafari@14しか入っていません。仕方ないが、仮想マシンに古いCatalina…

MacOS 10.15 CatalinaをParallelsにインストール

webpackでバンドルしたnodejsのファイル（人間が読めない）にエラーが発生した場合、ソースコードの場所（人間が読めるソースコード）を特定する必要があるでしょう。わかったらすごく簡単と知りながら結局時間がかかりましたので、方法を記録します。 簡単なexpress…

sourcemapを利用して、stacktraceでエラーの発生源を特定する

関わっているプロジェクトにアップロードされたイメージの表示されない問題が起こりました。原因はiPhoneで撮った証明写真をMacへ転送してアップロードしたからなのです。 iOS11からiPhoneで写真を撮ると、jpegより圧縮率の高いHEIF（High Efficiency…

HEIFファイルのアップロード対策

ブログとドキュメントサイトといえば、GatsbyJSが有力な候補者となるでしょう。レンダリングのスピードがかなり早く、プラグインの数が多くSEO対策も簡単にできます。ドキュメントがかなりわかりやすく、学習コストが低いと言えるでしょう。ReactJSのオフィシャルサイト https…

多言語のGatsbyJSサイトにAlgoliaで全文検索を導入しましょう

Intelより安いArmが搭載されたインスタンスを使えば、コスパフォが向上できるでしょう。ただいまArm64サポートしているOSがそれほど多くないですが、Ubuntu18以降、またAmazon Linux2であれば動きます。そのシステムに、.Net Core…

arm64のEC2に.Net Coreをインストール

1つのTypeScriptファイルのみを実行するために、package.json+node_modulesの組み合わせは少々煩雑でしょう。今日いくつかコマンドラインでTypeScriptファイルを実装できる方法をまとめてみます。 npx ts-node に依存します。8.…

TypeScriptをコマンドラインで実行する

ウェブアプリのインスタンスをパブリックサブネットに、DBインスタンスをプライベートサブネットに（節約モードでAWS RDS利用せず）置くのがセキュリティ基本対策とも言えるでしょう。プライベートサブネットに置いてあるDB…

プライベートサブネット中のインスタンスをエージェント転送でSSH

コストコオンラインしか売っていない商品（エコバックスという掃除ロボット）を購入したいんですが、やっはり値引きするとき買うのが楽しいですね。しかし、コストコオンラインに価格変動で知らせる機能がないので、今回はe2e…

コストコオンラインの商品価格変動チェックのバッチを作ってみた

フロントエンドプロジェクトでもどんどん複雑になりつつ、深いフォルダの構成が当たり前のことになってきました。例えばcreate-react-appを利用する場合、下記のようなフォルダ構成が普通でしょう。 さらに、components、またviews…

create-react-appのTypescriptに絶対パスでimport

Next.jsのデバッグと言えば、を思い出すことが多いでしょう。オフィシャルサイトにデバッグする方法が公開されていますが、クライアント側のデバッグ方法が書いてありません。+の組合せのデバッグ方法もありません。 今日クライアント側でNext.js…

VSCodeにTypescriptで実装したNext.jsをデバッグする

スマホが日進月歩の時代になりました。写真1枚で簡単に10Mb…

iOSのSafariブラウザにアップロードされたファイルを正しくリサイズする方法の検証

LANを通してMacOS上のウェブアプリケーションにアクセスできるように、ポートの開放する必要があります。今日はこの方法を紹介します。 ファイアウォールにルールの追加 ターミナル（zsh）で変更対象ファイルを開く 下記の内容を追加（300…

MacOSのポート開放

時々LANを通してWindows上のウェブアプリケーションにアクセスし、テストを行う必要があります。例えば、iOSのSafariにFileReaderのreadAsDataURLの挙動はPC、MacOSと異なり、うまく動かないケースがあります。その場合、iPhone…

Windows10のポート開放

docker daemonをMacOSに起動する手順を整理します。 方法１ とのインストール Virtualboxのインストール の初期設定 方法２ でdockerをインストール dockerを許可する 画面の指示に従って操作すれば、完了した後docker…

MacOSにDockerイメージを起動

Gatsbyを触り始めてからJamstackを知り、Jamstackのメリットをたくさん実感しました。Jamstackプログラムを静的なhtmlに出力でき、進化しつつあるブラウザとJavaScript…

JamstackのAPPをS3とCloudFrontでホスト

Vagrantはプロジェクトを参加する全員に同じ開発環境を提供できる上、ホストにも汚染しない仮想技術となります。HomesteadはVagrantの上でさらに一般開発に必要なものを全部組み込んでいる特殊なVagrantとなります。人気の高いMySQL, docker…

MacOSにHomestead環境の導入

パフォーマンスはウェブサイトの死活問題となります。表示スピードが早ければ早いほど、離脱率が低くなるでしょう。もちろんAMPの対応するウェブページを作ったほうが一番ですが、レガシーのウェブサイトをなかなか簡単にAMP…

レガシーのウェブサイトのパフォーマンスチューニング

リスタートし続かるdockerコンテナーに入って調査

Netlifyでサーバーレスのアーキテクチャを無料で構築できることご存知ですか。今日はNetlifyのを使って、express + serverless + GraphQL…

Netlifyのfunctionsにexpress-graphQLをデプロイしてみた

地図付きのウェブページと言えば、GoogleMapでしょう。GoogleMapApiが簡単で使いやすくとても助かります。ただし、GoogleMap…

LazyLoad GoogleMap

Reactを触ってからMVCでプロジェクトを開発するチャンスがだんだん少なくなってきました。最近人気の開発手法はフロント側React, Vue, AngularJSとなり、バックエンド側はGraphQL、LambdaまたAPIサーバーとなります。レガシーならMVC＋jQuery…

ウェブサイト開発のレガシーvsモダン

ランディングページはユーザが最初にアクセスするページとなります。いつもトップページのことを指しています。有意義なコンテンツをトップページに置くことで、アクセスしてきたユーザにアピールできるでしょう。thundermiracle.comをリニューアルするとき、Netlify…

ランディングページに問い合わせフォームのサードパーティ・ コードの遅延

dockerコンテナーを使えば、開発、テスト、デプロイの一貫性が保つからすぐい便利でしょう。PleskはdockerコンテナーのCD（継続的なデプロイ）をサポートしていませんが、Gitレポジトリのを利用すれば実現できます。今日はこれをやりましょう。 要望 Plesk…

Pleskの追加デプロイメントアクションにdocker, docker-composeを実行

Pleskを使えば、PHP、Node.jsのアプリケーションを簡単に管理できます。さらに、Let’s EncryptでSSL証明書の管理、メールサーバーの管理もできるのはすごく便利です。しかし、今のところ（2020/07/06）で、asp.net core…

.Net CoreのプロジェクトをPleskにデプロイ

Reactのようなコンポーネント指向でフロント側をデザインしてみると、レイアウトの中にさらにレイアウトを作るのが普通でしょう。.Net Core…

.Net Coreの親子レイアウト

Netlify Formを利用すれば、serverlessのGatsbyにも問い合わせフォームを簡単に作れるでしょう。しかし、無料プランは1カ月100通のメッセージしか受信できないので、スパム対策しっかりしたほうがいいでしょう。( ´艸｀) 普通のhttp post…

GatsbyにNetlify Formのスパム対策

Pleskでnodejsアプリをデプロイするとき、した後、でプロジェクトをビルドする必要があるからです。 Pleskので、pull後コマンドの実行が簡単にできます。（ウェブサイトとドメインのGitリポジトリに）  しかし、ここに設定したと関わらず、node_modules…

Pleskの追加デプロイメントアクションにyarnが動かない事件の調査

nodejsでメール送信するなら、一番有名なのはとなる。今日はnodemailerでGmailのアカウントを利用して、簡単な送信機能を実装してみる。 https://github.com/nodemailer/nodemailer インストール Gmailの設定 2FA（…

nodemailerでgmailのアカウントを利用して送信する

LightSailでPleskサーバを立ち上げて、LightSailのFireWallにポート3306を開放しても、リモートからMySqlに繋がらない問題の解消方法となります。 現象  リモートPCから接続しようとすると、エラーになります。 ローカル以外の接続を許可へ MySQL…

PleskのMySqlをリモートで接続できるように

Deno 1.0が5月13日にリリースされました。作者はnode.jsの作者であるRyan Dahl氏なので、まず試してみる価値が十分あるでしょう。 サンプルプロジェクト https://github.com/thundermiracle/try-deno…

DenoでREST APIを作ってみた

プッシュ通知を聞いたら思い出すのがネイティブAPPでしょう。でも、ServiceWorkerを通じ、WebAPPでもプッシュ通知ができるとご存知ですか。 ServiceWorkerはPWA（Progressive Web Apps…

Webプッシュ通知のスケジューラーを実装してみた

Service Workerをローカルでテストする場合、localhostでhttps化への手順の整理。 chocolateyのインストール PowerShellを管理権限で起動し、下記のコマンドを実行してください。  参考リンク：https://chocolatey.org…

5分でWindowsにhttps://localhost:8080を立ち上げる

背景 Magento 1.9サーバにメールサーバの廃棄すると伴い、cronジョブによりローカルのメールサーバ経由での送信ができなくなりました。マネージドのSmtpサーバを通して送信するように改修しなければいけません。 手順 をダウンロード 残念ながらMagento 1.…

30分でMagento 1.9にSMTP送信機能の追加

Gatsbyのマイナーバージョンアップすることを行いました。  バージョンアップした後、で起動できなくなりました。 エラーメッセージはこちらです。 他のプラグインパッケージとの衝突が原因かと思って、かなりの時間で…

Gatsbyをバージョンアップした後developモード起動できない問題

フロントエンドエンジニアとして上達するため、自分の経験をまとめて、学習資料を整理しました。 JavaScriptのデザインパターンから、関数型プログラミングまで幅広く本を読んでいただければ、品質のいいコーディングを必ずかけます。 React、Angular…

フロントエンドのJavaScript学習資料

全てのdockerコンテナーを再起動 dockerのコンテイナーの名称を指定して再起動 Vagrant中のdockerコンテナーを再起動

Dockerのコンテナー再起動（すべて、名前指定、Vagrant中のコンテナーの名前指定）

Ubuntu16.04をベースとして、react,nodejs含む開発環境(日本語版)のVagrantイメージをvagrant cloudへアップロードしました。 環境詳細 項目 設定内容 ベースOS Ubuntu16.04 GUI lubuntu 言語 日本語 admin…

vagrant boxのnodejs、React開発環境

Webhook環境構築はこちらへ：Webhookで自動デプロイ–ステップ１ Webhookで簡単デプロイの設定手順はこちらへ：Webhookで自動デプロイ–ステップ２ Webhook…

Webhookで自動デプロイ–ステップ３

ステップ１でWebhook専用の環境が用意できたはずです。まだできていない場合はこちらへ：Webhookで自動デプロイ–ステップ１ では、次のステップへ。 今回実現したのは、ソースコードをgitlabサーバのリポジトリにプッシュしたら。 gitlabサーバ側：gitlab…

Webhookで自動デプロイ–ステップ２

Ubuntuのパッケージをインストールする時、新しいカーネルが必要となるエラーが出てきました。 upgradeしようとしたら、下記のエラーを見たことがないでしょうか。 ディスクの容量を調べてみると、エラーメッセージの通り、原因は/bootパーティションの使用率は10…

apt-get install/apt-get upgradeする際、/boot容量不足のエラー対策

そもそもWebhookは何でしょうか Wikiによりますと。 Webhooks are . They are usually triggered by some event, such as pushing code to a repository or a comment…

Webhookで自動デプロイ–ステップ１

Dockerを利用してデプロイする場合、デプロイユーザにroot権限を与えたり、sudoグループに追加したりすることはセキュリティにはよいとは言えないでしょう。 デプロイユーザにDockerコマンドの実行権限をあげれば一番いいと考えます。 ユーザーを例として。