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

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

Day.jsをいい感じに共通化する

Day.jsは、軽くてMoment.jsと互換が効くのでよくプロジェクトで使っています。
そこで困ってくるのがlocaleやtimezoneの共通化ではないでしょうか？
Day.jsをimportする度に設定するのは、抜け漏れしそうですしね。

僕の場合は以下のようにして、Global設定（共通化）しています。

## React

“` index.tsx
import dayjs from “dayjs”;
import utc from ‘dayjs/plugin/utc’;
import timezone from ‘dayjs/plugin/timezone’;
import “dayjs/locale/ja”;
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault(‘Asia/Tokyo’);
dayjs.locale(“ja”);
“`

## NestJS

“` src/util/dayjs.ts
import dayjs from ‘dayjs’;
import utc from ‘day

Next.jsアプリケーションをIISにデプロイしたかったのでIIS上でホストしてみた

Next.jsをデプロイするならVercelが推奨されているけど、
どうしてもIISでやりたいっていう人向け。

IIS拡張モジュール「HttpPlatformHandler」を使うと、
IISからnode.exeを起動してHTTP要求をNodeプロセスに処理させることができます。
下記サイトを参考にさせていただきました。
https://nodejs.keicode.com/nodejs/using-platformhandler-to-host-nodejs-on-iis.php

##事前準備

IIS拡張モジュールが必要なのでインストールします。
https://www.iis.net/downloads/microsoft/httpplatformhandler

あとは、Next.jsアプリを普通に作成して、ビルドまで済ませておきます。
私はcreate-next-appで作りました。

IISのWebアプリケーションで
http://localhost/nextapp
というURLでアクセスできるようにしたいので、
next.config.jsにbasePathの指定を入

Netlify にデプロイする時、node.js のバージョンを指定する

Nuxt で作っていたWebサイトを久々に改修していて、yarn install 等をやり直して Netlify にデプロイした際、失敗した。
Netlify のログを見てみると、

“`
error chalk@4.1.2: The engine “node” is incompatible with this module. Expected version “>=10”.
error Found incompatible module
“`

chalk@4.1.2というモジュールについて、node.js と互換性がないと言われていた。（[chalk](https://www.npmjs.com/package/chalk)は、ターミナルのスタイリングをしてくれるモジュールらしい。）

というわけで、node.js のバージョンを指定する。

プロジェクトのルートディレクトリに、以下のコマンドで、.nvmrcファイルを作成する。
.nvmrcファイルは、node.jsのバージョンのみが記載されており、このファイルを置いておくと Netlify が認識してくれる。

“`sh

Error : npm does not support Node.js v10.19.0

>Error : npm does not support Node.js v10.19.0

上記エラーが出る場合、Nodejsのバージョンを上げることによって解決する。

“`
$ curl -fsSL https://deb.nodesource.com/setup_12.x | sudo -E bash –
$ sudo apt install -y nodejs
“`

Node.js/Expressを使用して簡単なWebAPIを構築

# はじめに

https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project

Microsoftの出している**Web-Dev-For-Beginners**という教材に取り組んでいた時のことです。
銀行を模したWebアプリを作るレッスンの中で、[銀行API](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/7-bank-project/api/translations/README.ja.md)のページに以下のような記載が。

> しかし、このような API の構築方法に興味があるのであれば、このシリーズのビデオを見ることができます: [https://aka.ms/NodeBeginner](https://aka.ms/NodeBeginner) (ビデオ 17 から 21 では、この API を正確にカバーしています)。

> また、こちらのインタラクティブなチュートリアルもご覧ください: [https://aka

imageminをrequireして怒られる

## はじめに

`imagemin`をnode.jsで実行すると怒られた。

“`js:imagemin.js
const imagemin = require(‘imagemin’)
const imageminMozjpeg = require(‘imagemin-mozjpeg’)
const imageminPngquant = require(‘imagemin-pngquant’)

imagemin(…略)
“`

“`
const imagemin = require(‘imagemin’)
^
Error [ERR_REQUIRE_ESM]: require() of ES Module
Instead change the require of index.js in imagemin.js to a dynamic import() which is available in all CommonJS modules.
“`

「`import`で読み込んでね」と怒られている。

`import`で読み込んで実行する

【Chrome拡張】続編：Qiitaの記事を見ているエンジニアとリアルタイムに交流できる拡張機能作った

**本記事は、MMOBrowser(ver0.1.0)の追加機能を使ったQiitaの利用例を紹介する記事になります。
MMOBrowserの概要・利用方法は[こちらの記事](https://qiita.com/Hylia221/items/6142bdc527cc6b3c9fe5)をご参照ください。**

# こんなことを思ったことはありませんか
– Qiitaで見つけた面白い記事の感想を共有したい…
– 自分が投稿した記事を見ている人に感想を聞きたい…
– 記事にあるコードや数式が分からないのでエンジニアに質問したい…

## そんなときにはMMOBrowserを活用しよう！
MMOBrowserを導入することで、同じWebサイトにアクセスしている人たちのマウスカーソルがブラウザ上に表示され、自由にコミュニケーションを取ることができるようになります（下図）。
Qiit![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264364/72ce56bb-632d-10b5-a073

Notionで作成したテーブルに対して追加/検索/更新/削除を行う

# 前回のあらすじ
Notionでテーブルやトークンなどを準備して、テーブルにあるデータを取ってくる検証を行いました。

# 今回やったこと
Notionで作ったテーブルに対してデータを追加/検索/更新/削除がひととおりできるようAPIを検証してみました。

以下の公式情報を参考にしています。

https://developers.notion.com/reference/intro

# 環境
・AWS Lambda(Node.js 14.X)
・Notionのテーブルイメージ
　カラム構成はキー(key)・値(value)・タイムスタンプ(timestamp)です。
・各カラムのNotionにおけるタイプについて、キーはtitle、値はrich_text、タイムスタンプはnumberにしています。


# 書いたもの

### 準備

“

Node-RedでOpenCVするまでのメモ

色々試行錯誤が必要だったのでメモ

#環境
Ubuntu20.4.3LTS
Node-Red

#使いたいのはこちら
https://github.com/justadudewhohacks/opencv4nodejs

#Install
opencv4nodejsにOpenCVの自動Build Scriptが入っているのですが失敗するので、別々にインストールします。

##事前にインストールが必要な物
* git
* cmake
* gcc(これは入っていた)
* g++

Proxyを使う場合はnode、apt-get、gitのProxy設定が必要。

##OpenCV
opencv-4.5.3.tar.gz を github からダウンロード。
https://github.com/opencv/opencv/releases

“`
$ tar xf opencv-4.5.3.tar.gz
$ cd opencv-4.5.3
$ mkdir build
$ cd build
$ cmake .. -DCMAKE_INSTALL_PREFIX=/usr/local
$ mak

Webの勉強はじめてみた その32 〜AJAXとWebSocket〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章9,10節です。

## AJAX
Asynchronous JavaScript + XML
クライアント-サーバー間で、非同期に通信が行える。

:::note
複数ページで実装していたサイトを単一のページで複数の機能(AJAXやWebSocket)を表現したアプリケーションを、シングルページアプリケーション(SPA)という。
:::

“`javascript:app.js
const serverStatus = require(‘./routes/server-status’);
app.use(‘/server-status’, serverStatus);
“`

“`javascript:app/entry.js
const loadavg = $(‘#loadavg’);

setInterval(() => {
$.get(‘/server-status’, {}, (data) => {
loadavg.text(data.loadavg.toString());

Websocketでシンプルなチャットアプリを作るチュートリアル

今回はNodejsのwsライブラリを使ってシンプルなチャットアプリを作ってみました。

# 作るものの詳細
・クライアントから受信したメッセージを全クライアントに配信(Websocketを使用)
・WebサーバーにはExpressを使用する
# 私の環境
・Node.js: v15.6.0
・ライブラリ: Express, WS
・OS: Windows11

# プロジェクトを作成
“`:./project_root
npm init
“`
Enter連打で大丈夫です。

# Webサーバーを構築する。
“`js:index.js
//ここからexpress

//expressの設定
var express = require(‘express’);
var app = express();

//expressのルーターを設定
app.get(‘/’, (req, res) => {
//index.htmlを返す
res.sendFile(__dirname + ‘/index.html’);
});
//expressのエラー処理
app.use((er

Javascript/Node.jsのimportやらrequireやらのまとめ

JavascriptとNode.jsを行ったり来たりしていると、import、export、exports、require、module、defaultの単語が頭の中でぐちゃぐちゃになりがちです。
備忘録として、使い方を残しておきます。

ちなみに、Javascriptにおいて、webpackやbrowserify、babelといったbundlerを使ったrequireの使用は述べていません。純粋なNode.jsや、ブラウザ上のJavascript上での動作を想定しています。

#Javascript編

#import/exportを使わない方法

① インラインスクリプト

“`html:index.html


“`

CSRF攻撃対策についてNode.js Expressでアプリを構築して実例で理解する

## はじめに
Node.jsのExpressでテンプレートエンジンejsを使って実装するWebアプリを実例に、CSFR攻撃を受ける脆弱性がある状態と対策を講じた場合の実装を見ていく事で、CSRF攻撃について理解を深めてみようと思う。

## CSRF（クロスサイト・リクエスト・フォージェリ）攻撃とは？
悪意のある人が用意した罠により、Webアプリのユーザ（利用者）に意図しないリクエストを送信させ、利用者の意図しない処理をWebアプリに実行させることが可能な状態になっている＝脆弱性がある時に、それを利用されてユーザが意図していない処理が勝手に実行されてしまうような攻撃を CSRF（クロスサイト・リクエスト・フォージェリ）攻撃という。（問題は、ユーザ本人の意図したものではない悪意のあるリクエストをWebアプリが受け入れてしまう事）。

詳細は以下のサイトを参照。

https://www.ipa.go.jp/security/vuln/websecurity-HTML-1_6.html

※IPAのサイトを見ると、認証の仕組みを持つWebアプリ（ログインしているユーザ）に対する攻撃のみが