Node.js関連のことを調べてみた2022年02月23日

AWS API Gateway – IAM アクセス許可により API へのアクセスを制御する（バックエンドサービス間通信）

## はじめに
lambda や API の実態と認証のロジックを切り離したい。
そしたらもっとシンプルにバックエンド開発ができる。
API はすべて API Gateway を通る構成なので、API Gateway をリバースプロキシのように扱い、そこでアクセス制御をしたい。

## API Gateway で IAM アクセス制御を設定すると…

> AWS サービスがリクエストを受信すると、リクエストで送信した署名を計算したときと同じステップが実行されます。続いて AWS は、計算された署名とそのリクエストで送信した署名を比較します。署名が一致すると、リクエストが処理されます。署名が一致しない場合、リクエストは拒否されます。

https://docs.aws.amazon.com/ja_jp/general/latest/gr/signature-version-4.html

この「**署名**」を作る処理がとても面倒だったので、メモを残しておきます。

## 準備

##### 1. API Gateway で認可の設定を 「AWS IAM」 に設定する

![imag

OAuth2.0のAuthorization Code Grantでstateが必要な理由を理解する　実際の実装もやってみた

## はじめに
https://qiita.com/yuta-katayama-23/items/b074e85504fc05ac76dc

https://qiita.com/yuta-katayama-23/items/4214114a21c11ec4f934

ではAuthorization Code Flowを体感するためにNode.jsのExpressでデモ用のWebアプリを作成して、実際にアクセストークンを取得しAPI実行までをやったみた。

その際には、

> ※今回はあえてCSRF対策やPKCE対策に必要になるパラメータを省略している。CSRF対策やPKCE対策については今後記事を執筆予定。

と書いたように、推奨されているセキュリティ対策のための実装をしていなかったので、今回はまずCSRF対策のために何をすべきか？について、仮にそれをしなかった場合に何が起きるか？を理解しつつ、実際にCSRF対策の実装をやってみたいと思う。

※本記事中で筆者の理解に誤りがあればご指摘頂けると幸いです。

## Authorization Code Flowにおけるstateとは？
s

無限に時間がかかるサーバー

“`
const express = require(‘express’)
const app = express()
const port = 9999

app.get(‘/’, (req, res) => {
res.header(‘Access-Control-Allow-Origin’, ‘*’)
res.header(‘Access-Control-Allow-Methods’, ‘GET,PUT,POST,DELETE’)
res.header(
‘Access-Control-Allow-Headers’,
‘Content-Type, Authorization, access_token’
)
setTimeout(() => {
res.send(‘Hello World!’)
}, 1000000000)
})

app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
“`

npmセキュリティ10のベストプラクティス

こんにちは！
IT用語には、Acronym　、頭文字の略称がたくさんありますよね。
便利ですが、時々　いい間違えや、会話がこんがらがることがあります。

Linuxコマンドのrpmと、
npmの字面が、rpmと似ていて、「全然、違うし！」と自分で、思わずツッコミをいれたくなったことが何度かありました:joy:。

npm　→　Node Package Manager
rpm　→　Red Hat Package Manager

今回はこちらの翻訳から、お届けします。
https://snyk.io/blog/ten-npm-security-best-practices/

#npmセキュリティ10のベストプラクティス
オープンソース アプリケーションのセキュリティ
Liran Tal, Juan Picado
リラン・タル、フアン・ピカド
2019年2月19日

npmの脆弱性が心配？
フロントエンドとバックエンドどちらのデベロッパにとっても、npmのセキュリティのベストプラクティスを考慮に入れることは重要です。[オープンソースのセキュリティ](https://snyk.io/b

Node.js Expressの例を通じて、Webアプリのセッションについて理解する

## はじめに
Webアプリケーションが快適に利用できるのはセッションが存在するから、とよく言われると思う。前回の記事[Node.js Expressの例を通じて、WebアプリにおけるCookieについて理解する](https://qiita.com/yuta-katayama-23/items/068900da9271c4d1be1c)ではCookieが必要でそのCookieのおかげと言っていたのに、どういう事？となるかもしれないが、セッションについて理解を深めていく事でCookieとセッションの関係性についてもスッキリすると思う。

そこで今回は、セッションとは何か？について理解しつつ、実際にNode.jsのExpressでセッションを実現する実装をやってみたのでその備忘録を残す。

## セッションとは何か？
簡単に一言で言ってしまうと、「論理的な意味での開始から終了までの一連の連続した操作（クライアントとサーバ間でやり取りされるひとまとまりの操作）を表す単位・概念」の事。

ここでポイントは「一連の連続した操作」や「ひとまとまりの操作」と言っているように、1回だけでなく連続で行

私のnode古すぎ？node10.から最新にした話

#はじめに
環境
OS：ubuntu20.04
npmは8.3.1
　
　これまで使っていたnodejsが古すぎて使えないとnpmから言われてしまったので、新しいnodeを導入することになりました。aptやnpmじゃないインストール方法を全く知らなかった筆者が、右往左往しながらnodeを追加するまでの備忘録を書きます。

#npmコマンドを使ったある日

“`shell
npm does not support Node.js v10.19.0
“`

ある日突然、nodejsが古いと指摘された。これまで普通に使えた気がするんだけどな。ただ調べてみると最新版がv17であるのに、今使ってるのがv10では確かに古いか。

#普通にnodeをアップデートしようとする
nodeはaptコマンドからインストールしていたので、ap

Node.js Expressの例を通じて、WebアプリにおけるCookieについて理解する

## はじめに
Web アプリケーションが快適に利用できるのは Cookie のおかげとよく言われると思う。今回は、そんな Cookie が何をしてくれているものなのか？について理解しつつ、実際に Node.js の Express で Cookie の実装をやってみたのでその備忘録を残す。

## Cookie とは何か？
簡単に一言で言ってしまうと、「クライアントの状態をテキストで保存する仕組み」の事。

ここで言うクライアントというのは Web アプリなどを開くブラウザの事だと思ってよく、Cookie は Web アプリなどを利用しているユーザに関する状態を保存するためも仕組みと言い換えられるだろう。

具体的にどのような動きをするか？だが、以下の図に示したようにサーバを起点にしてクライアントにテキスト情報が送られ、これをクライアントはそのままサーバに送り返すという事をする。やっている事はこれだけ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/797e20da-0

Discord.js(v13系)で指定チャンネルにメッセージ送信メモ

呼びかけてリプライさせるなどではなく、別のプログラムから

Webhook使う形でも良いのですが、毎回Webhook URLを発行するのも手間になってきたので、調べてみました。

## client.channels.cache.get().send()

こちらの記事にある記載で出来ました。

https://scrapbox.io/discordjs-japan/%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%AB%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E9%80%81%E4%BF%A1%E3%81%97%E3%81%9F%E3%81%84

`client.channels.cache.get(‘送信するチャンネルのID’).send(‘メッセージ’)`

なかなか長いメソッド

## 送信のサンプルコード

以前書いたメモのサンプルコードがそのまま使えました。

https:/

Nest(Node.js), Vue3, MySQL(Prisma), GraphQLで動かしてみる

##　環境構築
– Docker-compose

## Nest.js
– dockerコンテナ内で`npx nest new {APP_NAME}`　で新規プロジェクトを作成
– prismaの設定
– `yarn add -D prisma`
– `yarn add @prisma/client`
– `yarn init`　で、生成されたファイルにテーブルの定義をしていく
– 定義後に`npx prisma migrate dev`でデータベース作成
– Nest.jsにデータを読み込ませるために、テーブルを更新したら、毎回マイグレーション後に`npx prisma generate`をする
– GraphQLの設定
– [参考　Nest/GraphQL/schema-first](https://docs.nestjs.com/graphql/quick-start)

### error: GraphQLのversionは15系じゃないとうまく動かなかった
– リファレンス通りに実行すれば問題ない

## Vue3 (Vite)
– dockerコンテナ内で

NodeJSからAPI Gateway SDK Javascript版を使ってみる

“`Node.js
// eval(fs.readFileSync(“apiGateway-js-sdk/lib/axios/dist/axios.standalone.js”, ‘utf-8’));
const axios = require(‘axios’); //npm install axios
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/rollups/hmac-sha256.js”, ‘utf-8’));
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/rollups/sha256.js”, ‘utf-8’));
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/components/hmac.js”, ‘utf-8’));
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/components/enc-base64.js”, ‘utf-8

Node.jsのworker_threadsモジュール（スレッドプール）

# はじめに
node.jsでマルチスレッドを実現するworker_threadsについて、実例を交えて説明します。

# 参考
– ハンズオンNode.js

https://github.com/oreilly-japan/hands-on-nodejs/blob/master/ch04/samples.txt

# worker_threadsモジュール

例として、http\://localhost:3000/10へのアクセスに対して10番目のフィボナッチ数を返すような簡易Webアプリケーションを構築していきます。
パフォーマンスを担保するために生成するスレッドをプールして使い回すような仕組みにしたいです。
以下の３ファイルで実現できます。

~~~thread-pool.js
‘use strict’
const { Worker } = require(‘worker_threads’)

module.exports = class ThreadPool {
// 空きスレッド、キューを初期化
availableWorkers = []
queue = []

【JavaScript】Promiseと非同期処理について

こんばんは。今回はJavaScriptの非同期処理について書いていきます。

##非同期処理とは？
非同期処理とは、ある処理を実行をしている際に、他のタスクが別の処理を実行できる方式をいいます。
DBから値をとってくるなど、他の処理と比べて時間がかかる処理があった場合、この非同期処理の仕組みがないと、DBから値をとってくる処理が終わるまで待っていなければなりません。
非同期処理の場合、DBから値をとってくる処理を行ってるとき、別のイベントが発生すると、一旦DB処理を中断してそのイベントを処理します。そしてまたDB処理を再開します。

しかし非同期処理にも不便な点があります。例えばDBから値を取得し、そのデータをreturnする関数があったとします。普通にこの関数を実行すると、DBから値を取得する処理が行われている間にreturnが実行され、正常に値が返されなくなってしまいます。
そのような問題を解決するための方法はいくつかありますが、今回はPromiseを使った方法をご紹介します。

##非同期処理を順番に実行する
非同期処理を順番に実行する場合、Promiseを使うと便利です。

discord.js v13 のみでスラッシュコマンドを登録する

## はじめに

スラッシュコマンドとは，下の図のようなコマンドのことであり，v13系のdiscord.jsでbotに実装できるようになりました．
従来botがコマンドを受け取るには，サーバー（ギルド）に書き込まれる文章を監視し続け，任意のコマンドを含む文字列を取得した場合はプログラムを実行させることでコマンドのような機能を実装していました．
しかし，スラッシュコマンドが導入されることでユーザーは使いやすく，開発側は（実装方法にもよるが）プログラムが読みやすく書きやすくなりました．
しかし，たいていのスラッシュコマンドの記事では，登録はREST APIを自分で叩いて行う方法が紹介されています．
（[公式のガイド](https://discordjs.guide/interactions/registering-slash-commands.

Node.js: Cognito から Access Token を取得

AWS の Cognito から JWT Access Token を取得する方法です。

ライブラリーのインストール

“`bash
sudo npm install amazon-cognito-identity-js
“`

“`js:get_token.js
// —————————————————————
//
// get_token.js
//
// Feb/19/2022
// —————————————————————
‘use strict’

console.error(“*** start ***”)

var cognito = require(‘amazon-cognito-identity-js’)

const dotenv = require(‘dotenv’)

dotenv.config()
const user_pool_id = `${process.env.US

【初学者】Herokuデプロイ時に詰まったこと【Webアプリ開発の道~その2~】

# はじめに
こんにちは。「塵も積もれば山となる」精神で日々学習しながら、Webアプリ開発に取り組んでいます。

# 何を書いたか
今回はローカル環境で作成したRails6アプリ（Hello,Worldの出力）をHerokuにデプロイする際に詰まったことについて書きます。Railsチュートリアル（第6版）では1章と3章前半部分の内容です。

# なぜ書いたか
RailsチュートリアルどおりにAWSのCloud9を開発環境として、Herokuにデプロイしたときにはすんなり上手くいったのですが、ローカル環境からHerokuにデプロイしようとすると、まぁまぁ大量のエラーが発生しました笑

前回の[ローカル環境構築](https://qiita.com/kosukein38/items/aff73fda16a1447e6db3) に続き、こちらも一日がかりでデバッグして、ようやくデプロイ成功したので、エラーデバッグ方法を備忘録として記事にしました。同じような境遇になった方の参考になれば幸いです。

エラーのデバッグが経験値を上げると信じて、できるだけエラーの意味を解釈しながら進めていったつもり

ReactとNode.js(express)でAPIの通信を確立する

## 概要
サーバーを立ち上げてAPIを叩くという一連の流れを確認してみたかったので、ローカルでフロントエンドとしてReact, バックエンドとしてNode.js(express)を立ち上げてAPI（Fetch）叩いてみる。
フロント側としてはわざわざReactでやる意味はないが慣れているため採用しました。

## 1. Node.js(Express)でサーバーを立ち上げる

1. `cd backend`
2. `yarn init`でpackage.jsonを初期化。色々質問されるけど、とりあえずデフォルトでok
2. `yarn add express`でexpressのパッケージをインストール
2. index.jsをbackend配下に作成する
2. index.jsは以下のように記述する

“`js
const express = require(“express”);
const app = express();　//express のインスタンス
const port = 3001; // listenするport番号

app.get(“/”, (

Herokuでアプリを作るのをもっと簡単にしよう

[Herokuの[Node.js getting started]](https://github.com/heroku/node-js-getting-started/)
Heroku公式のリポジトリは、ムダがあります。

– 不必要なモジュールの導入
– テンプレートの説明やタイトル

など、無駄があります。(2回言っちゃう)
ということで、無駄を無くしたものを作ってみました！

[Bellomakerの[Node.js getting started]](https://github.com/heroku/nodepack/)
やばいです！めちゃ無駄省きました！
使ってみてね

※あえて語彙力は低めで書いております

Cloud FunctionsにSecretを環境変数として渡したが、デプロイ時に環境変数がなぜか取得できずデプロイエラーとなった件の解決

## 前提
* Cloud Functions(Node.js) + Express.js + TypeScript
* 異なるプロジェクトのFirestoreにアクセスする必要がある
* Service Account Keyのclient_email, private_keyを用いてinitializeApp()する
* Secret Managerにclient_email, private_keyを保存
* Cloud FunctionsにSecretを環境変数として渡している

## 最初作った構成
下記のソースだと、`firebase deploy –only functions`時にエラーを吐いた
client_emailをハードコードすると、private_keyで同様のエラー。
private_keyもハードコードするとうまく動いた。

“`
Error: Error occurred while parsing your function triggers.
Error: Service account object must contain a string

Puppeteerでヘッドレス Chromeのフルページスクリーンショットを撮る

Webページのスクリーンショットを大量に取りたいという時に、便利なのがヘッドレス Chrome。
ヘッドレスとは、GUIからではなくCUIからChromeを使用するモードのことで、Chrome 59以降から搭載されました。
ヘッドレス Chromeを使うと、ブラウザで行う様々な操作をコマンドラインから行い、自動化することもできるようになります。

今回はこのヘッドレス ChromeをNode.jsのプログラムで制御するためのライブラリである[Puppeteer](https://github.com/puppeteer/puppeteer)を使って、Webページ全体のスクロールショットを撮る方法を模索してみました。

まずはPuppeteerをインストール

“`
npm i puppeteer
“`

Puppeteerをインストールする際、自動でChromiumもインストールされますが、ローカルにあるChromeを使いたい場合には、puppeteer-coreのみでインストールすることもできます。

“`
npm i puppeteer-core
“`

puppeteer

2021年版 Expoまとめ

https://github.com/expo/expo

https://blog.expo.dev/expo-sdk-43-aa9b3c7d5541

– Expoのここ３年くらいの動きが慌ただしかったため、用語整理も兼ねてまとめる

# Expoのリリース履歴

| SDK | Date | Highlight |
| — | — | — |
| [33](https://blog.expo.dev/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c) | 2019/6 | Bare Workflow
Expo Web(React Native Web)ベータ版
|
| [34](https://blog.expo.dev/expo-sdk-34-is-now-available-4f7825239319) | 2019/7 | `Android App Bundle(.app)`をサポート |
| [35](https://blog.expo.dev/expo-sdk-35-is-now-available-beee