Node.js関連のことを調べてみた

StorybookをGitHub Pagesにデプロイしよう！

## 概要
StorybookをGitHub Actionsを使ってGitHub Pagesにデプロイする方法について解説します

## 前提
– GitHub Actionsに関する基礎知識を有している
– コンポーネントとStoryを作成済

## ディレクトリ構成
ファイル構成は以下のとおりです
“`
❯ tree
.
├── .github
│ └── workflows
│ └── deploy-storybook.yml
└── application
├── storybook-static
└── package.json
“`

## 実装するファイル一覧
– deploy-storybook.yml
– package.json

## Storybookの設定
package.jsonにstorybook buildコマンドを実行できるよう修正します
コマンドを実行することでstorybook-staticディレクトリが作成され、Storybookを表示するための静的ファイルが生成されます

“`package.json

AWSが公開したJavaScriptランタイムLLRTを試してみる

# What’s？

AWSからJavaScriptのランタイムである「LLRT」が発表されたので、軽く試してみました。

https://www.publickey1.jp/blog/24/awsjavascriptllrtlow_latency_runtimeaws_lambda.html

# LLRT（Low Latency Runtime）

LLRT（Low Latency Runtime）のGitHubリポジトリーはこちら。

https://github.com/awslabs/llrt

LLRTはサーバーレス向けに設計されたJavaScriptランタイムとされていて、AWS Lambda上の他のJavaScriptランタイムと比べて10倍以上の高速な起動と最大2倍のコスト削減を実現するとされています。

> LLRT (Low Latency Runtime) is a lightweight JavaScript runtime designed to address the growing demand for fast and efficient Server

Puppeteerを使用してAmazon ほしい物リストをスクレイピングする

# 概要
最近、Amazonのほしい物リストからKindleの価格を通知するLINE Botを開発しました。
その過程で、Puppeteerを利用して、ほしい物リストの商品名と価格のスクレイピングを行いました。

以下のようなほしい物リストであれば、

以下のように、商品名と価格がスクレイピングされます。

この記事では、そのスクレイピング手法について紹介します。
スクレイピングの方法や実装は以下記事を参考にしています。

https://qiita.com/nobu17/items/35419cb3

Instagram APIを活用してハッシュタグデータをグラフ化する方法

—
Instagram APIを活用してハッシュタグデータをグラフ化する方法
—

**ハッシュタグ**

私はインスタをあまりやっていないので、ハッシュタグの付け方がよくわかりません。

最近までハッシュタグという犬がいると思っていました。（バクみたいな）

ハッシュタグ、＃。

なんか＃この形、絶妙に持ちにくそうですよね？
＃＃＃＃
絶妙に積みづらそうですし。

＄＄＄＄
＆＆＆＆
＊＊＊＊

うん。全部持ち運び大変そう。

やっぱ　L　とかの持ち運びやすさよ！

持ち持ち言っていたら餅が食べたくなりました。

こんなところに良い網が。

#Ω#Ω# o(･ω･´o)

**目次**
– [1. Instagram Graph APIの基本](#1-instagram-graph-apiの基本)
– [2. ハッシュタグデータの取得](#2-ハッシュタグデータの取得)
– [3. データの保存と分析](#3-データの保存と分析)
– [4. グラフの作成](#4-グラフの作成)
– [5. おわりに](#5-おわり

サーバー上でpm2を用いて実行されるnode.jsアプリのmemory leakを簡単に調査する方法

## 前提

どうもメモリ使用量が増えつづける。memory leakをしている気がする。しかし手元のdev環境では再現しない。どうしても本番環境で調査しなければならない。そんなどうしようもない状況に追い込まれた人向けの記事です。基本的にやめておいたほうが良いと思います。heapdumpのnpmモジュールとか入れて、dumpのsnapshotを撮影して……みたいなのが非常に面倒くさい人向けでもあります。ssh接続ができてchromeが入っていれば、追加でインストールとか要りません。

## pm2にinspectの引数をつけてrestartする

“`sh
pm2 restart NUM –node-args ‘–inspect’
“`
これでdebuggerありで起動します。
注意点として、–inspectで起動するとメモリの使用量が如実に増えます。ぎりぎりのメモリでやりくりしているならやめておいたほうが良いです。
port変えたかったら変えてもいいです。

## ローカルとリモートをportforwardする

vscodeでサーバーとつないでportforwarding

API GatewayからLambdaを通さずにS3へデータを入れる処理をCDKで書いたメモ

## 概要
API GatewayにPutしたデータをS3に格納してみたメモ。

[API GatewayからLambdaを通さずに直接DynamoDBにデータを入れる処理をCDKで書いたメモ](https://qiita.com/hibohiboo/items/fb801dca48f01403e0e2)と同様、インテグレーションでマッピングする。
[ソースコード](https://github.com/hibohiboo/aws-cdk-v2/blob/09987ded34fe472bb7524947b14857d70124074f/cdk/lib/api-gateway-proxy-to-s3-by-cdk-stack.ts)

## CDK

“`ts
import { RemovalPolicy, Stack, StackProps } from ‘aws-cdk-lib’;
import { AwsIntegration, Cors, MethodLoggingLevel, PassthroughBehavior, RestApi } from ‘aws-cdk-lib/a

はじめまして、新人エンジニア·ハワードです

ここって、
Markwordで書き残すサイトなんですね。

私、少し不安だな……。

うまく働けるよう、お勉強頑張ります
どうかよろしくお願いします

reg-suit の VRT (ビジュアルリグレッションテスト) を local だけで実行・レポート閲覧ができる reg-cli ライブラリ ( node js )

# reg-cliとは

https://github.com/reg-viz/reg-cli

かなりマイナーなライブラリのようだが、localだけでVRTを実行してHTMLレポートで比較できるようだ

“`
npm i -g reg-cli
“`

“`
reg-cli /path/to/actual-dir /path/to/expected-dir /path/to/diff-dir -R ./report.html
“`

以下のように使う

“`
reg-cli <画像のあるディレクトリ(1)> <画像のあるディレクトリ(2)> <差分を生成するディレクトリ> -R <レポート用のHTMLを生成するファイルパス>
“`

# 画像群はどうやって用意する？

何らかの方法で用意する。
方法は問わない。

「比較したいgitブランチを切り替えて、それぞれスクリーンショットを生成するスクリプト走らせる」とか。

# reg-suit とは

[reg-suit](https://github.com/reg-viz/reg-suit)

画像を比較してHTMLのレ

electron-forge –template=vite-typescriptで Error: crtypto.getRandomValues() not supportedと出るとき

uuidを生成する際、ブラウザ版のuuidが呼ばれてしまいエラーになっている。
vite.main.config.tsを以下のように変更すればrollupに巻き込まれない。

“`ts
import { defineConfig } from “vite”;

// https://vitejs.dev/config
export default defineConfig({
resolve: {
// Some libs that can run in both Web and Node.js, such as `axios`, we need to tell Vite to build them in Node.js.
browserField: false,
mainFields: [“module”, “jsnext:main”, “jsnext”],
},
build: {
rollupOptions: {
external: [
“uuid”
],
},
},
});
“`

たしかmongodbとかknexとかもelec

Node.js (Typescript) で Bluesky に画像を自動投稿する Bot を作る (その1)

# やりたいこと
2024年2月6日より、招待制を廃止して、誰でも登録できるようになった、短文投稿型SNSの「Bluesky」。
今後、X (旧Twitter) の後身として、注目されています。

そこで、自分が運営している写真展示Webサイトから、「オススメ写真を毎日自動投稿するBot」を Bluesky でやりたいと思いましたので、作ってみました。

Twitter での完成イメージ


## 完成像

絵にするほどでもない

Serverless Frameworkを使ってKindleの価格を通知するLINE Botを作ってみた

# 概要

Amazonのほしい物リストをスクレイピングし、その情報を通知するLINE Botを作成しました。
特に **_Kindle_** 向けに最適化されています。

Amazon EventBridgeによる定期実行、もしくはメッセージに対する応答として、Kindle版と紙の本の価格やポイントを通知するLINE Botです。

# プロジェクトの目的と動機

Kindleの値下げを見逃さないために開発しました。

Kindleの価格はセール時に大きく下がることがありますが、AmazonのスマホアプリではKindleの価格を確認できず、値下げを逃すことがしばしばありました。
その課題を解決するために、このLINE Botを作りました。

# 技術スタック
技術スタックは以下のようになっています。

![

SpringBootアプリ上にTypescript環境を作ってみた

# はじめに
フロントエンドにTypescriptを導入してみます。
SpringBootのプロジェクトにTypescriptの環境を構築し、フロントエンドを動かしてみます。

# 環境
OS：macOS Ventura 13.6.4
TypeScript：5.3.3
Java：17
SpringBoot：3.2.2
yarn：1.22.21
nodenv：1.4.1
node：16.13.2

# 全体像
“`
typescript-sample（SpringBootプロジェクト）
├── src/main
│ ├── java
│ │ └── com.sample.typescript（パッケージ）
│ │ ├── Controller.java
│ │ └── Application.java
│ │
│ └── resources
│ ├── static
│ │ ├── js（コンパイル後の出力先）
│ │ │ ├── sample.js

SpringBootで包み込むVue.js開発環境 カンタン構築

# はじめに

こんにちは。バックエンドエンジニアを目指して奮闘中のひろえです。

突然ですが、未経験・独学の身では、何から勉強を始めて、何に重点を置くかって大事ですよね。
私自身も `Java` や `Spring Boot` から学び、バックエンドに力を入れてきました。
しかし、ポートフォリオを作るうえでも、フロントエンドやインフラに関しても最低限メジャーな技術は押さえておきたいところ。

ということで、簡単にフロントエンドを始めるべく、私の希望をざっと挙げてみました。

– フロントエンドはほとんど触ったことがないから最小構成から始めたい
– `Webpack` や `Babel` を導入したい
– `Vue.js` の単一ファイルコンポーネント使ってみたい
– `CI/CD` 環境や本番環境でもシンプルに環境構築できるようにしたい
– 静的アセットは `jar` ファイルに同梱し、`Spring Boot` の静的リソース配信機能を利用して配信したい

希望を叶えるため、あれこれ調べているうちに以下の記事に出会いました。

[領域展開「Gradle」で Node.js を制する

【Node.js】Error: error:0308010C:digital envelope routines::unsupportedの解決法

# Reactのwebアプリをローカルサーバーで起動できなくなった
あるwebサイトを久しぶりにアップデートしようと手を加えて確認しようとした。

“`
$ npm start
“`

すると見たことも無いエラーが表示されたのである。。。:rolling_eyes:

“`console
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:138:10)
at module.exports (/home/yonas/git/server/ui/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/yonas/git/server/ui/node_modules/webpack/lib/NormalM

Docker環境のNode.js + TypeScriptでDatadogAPMを検証する

前提として、ローカル環境にDockerインストール済み、Datadogのアカウント作成済みの方を対象としています。

# Datadogにて前準備

APM導入に必要なAPIキーとアプリケーションキーを作成します。

## APIキーの取得

Datadogにログインしたらメニューの一番上にある「Go to」を押下します。
検索窓にて”api”と入力して「API Keys」を選択します。

遷移したら右の方にある「+ New Key」というボタンを押下します。

適当な名前を入力してAPIキーを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1671245/88495ede-d4c8-e41b-b9cb-d9f819ea9c5e.pn

Google Cloud Runでdeployできないエラー備忘録

# 場面
GCP Cloud Runの[公式tutorial](https://cloud.google.com/run/docs/quickstarts/build-and-deploy/deploy-nodejs-service?hl=ja)実行中

# 環境
WSL2 Ubuntu
Google Cloud SDK 463.0.0
node v21.5.0

# エラーメッセージの確認
[公式tutorial](https://cloud.google.com/run/docs/quickstarts/build-and-deploy/deploy-nodejs-service?hl=ja)の以下のコード実行時に発生
“`sh
gcloud run deploy
“`
コンソール画面にログ確認用のURLが表示されるので、ブラウザでチェック

# エラーメッセージ
“`
Step #1: ERROR: failed to build: executing lifecycle. This may be the result of using an untrusted

[TypeScript] Expressをやってみる（10分で？）

# はじめに
typescriptでAPIを作ってみたいなぁと思い、expressを始めてみました。そこで、めっちゃ初期のところは簡単だったので、書いてみる

# Step1: フォルダの作成

最初に、プロジェクト用の新しいフォルダを作成します。任意の名前をつけてください。
今回は`express-ts-app` を使用します。

“`bash: bash
mkdir express-ts-app
cd express-ts-app
“`

# Step2: npmプロジェクトの初期化

プロジェクトフォルダ内で、以下のコマンドを実行してnpmプロジェクトを初期化します。
これにより、`package.json`ファイルが作成されます。

“`bash: bash
npm init -y
“`

ちなみにこのときの `-y`は、**yes**の略です。すべての質問に自動的に「はい」と回答します。`npm init`だけを実行した場合には、プロジェクト名、バージョン、説明、エントリポイント、テストコマンド、gitリポジトリ、キーワード、ライセンスなどについて、入力や回答を求めら

Qiitaの記事をGithub で管理したくて、WSL にvolta でnode インストールしてQiita 記事をpull まで

# 今回の趣旨

Qiita の記事をQiita 内で管理してもよかったのですが、どうせならGithub で管理してみたいなという欲望があったので、設定をしてみることにしました。その時にWSL と普段は連携しているので、WSL 上にnode をインストールする必要が出てきました。

# 今回の記事の前提

– Github のアカウントをもっていること
– Qiita でpersonal access token を発行済みであること
(後にGithub action を使うため)

# volta install

curl でvolta をインストールします。

“`powershell
$ curl https://get.volta.sh | bash
“`

volta のインストールの確認をしていきます。

“`
volta -v
1.1.1
“`

(volta のバージョンを確認するコマンドでバージョンが表示されない時は、一度WSL などを閉じてから再度開いてみるとバージョン確認コマンドが通ると思います。)

# node install

今回 Qi

NodejsでS3にファイルをアップロード・ダウンロード

### 概要

こちら記事では、NodeJSでローカルでS3アップロードとダウンロードの基本的な方法を書かせていただきます。

内容として５つあります

1.環境

2.前提

3.初期設定

4.アップロード

5.ダウンロード

6.最後

7.参考

### 1.環境

– Nodejs v21.6.0
– MacOS

### 2.前提

– デモ用のS3 バッケットが作成済み
– ローカルに認証情報ファイル設定ずみ　（まだ設定しない場合は[こちら](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-files.html)をご参考してください）
– プロフィルにせめてS3アクセス権を付与
– デモ用画像を準備

### 3.初期設定

作業のフォルダを作成

“`bash
desktop/m

npx コマンドでCLIを実行したら”could not determine executable to run”って言われた

# 動作環境について
デスクトップのWindows環境と、ラップトップのChromeOS(CrostiniでDebianが動作)環境の2種類で開発していた。Nodejsのバージョンはどちらもv20.22.0

# 経緯
理由は分からないが、あるプロジェクトではnpxコマンドでfirebaseエミュレーターを起動させる構成になっていた。そしてなぜかWSLではエミュレーターが動いたのにCrostini側でエラーが発生して起動しないという問題が発生。

“`bash
npx firebase emulators:start –export-on-exit=’./.emulator’ –import=’./.emulator’
npm ERR! could not determine executable to run
“`

雑に訳すと「お前が入力したコマンドは実行できるように見えない」みたいな感じだと思われる。

# 原因:パッケージ名とコマンドが揃っていない。
エラーメッセージで検索するとすぐに情報が見つかった。

https://kazuhira-r.hatenablog.co