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

wsはBlobで受ける

「ws node.js」で検索して出てくるサンプルコードがどれも送信内容次第で失敗する。
テキストからBlobに変えたらうまく行った。根本的原因は不明。

“`javascript:nodeApp.js
const WebSocketServer = require(“ws”).Server
const server = new WebSocketServer({ port: 5001 })
server.on(“connection”, client => {
client.on(‘message’, message => {
server.clients.forEach(v => {
if(v !== client) v.send(message)
})
})
console.log(‘_connections’,server._server._connections)
})
“`
“`javascript:plainWeb.js
$(e=>{
var m = new Messenger.Nodejs().message(e=>{
console.l

GitHub Actions で apt/perl/node ツールのインストールを自動化する

# Summary

This is an article about GitHub action to automate apt/perl/node tool installation. Installed files are cached for later use. `use-apt-tools` and `use-perl-tools` are for apt/perl tools. `use-x-tools` is for both. `install-node-modules` is for node package installation and cache all `node_modules` under the specified directory. Read each repository’s README. Visit https://github.com/office-tecoli/.

# 必要なツールを簡単にインストールしたい

ある作業で GitHub Actions を使おうとしていて、その中で apt と perl と node のツー

npm run dev が上手くできない時の対処法 〜 Error: error:0308010C:digital envelope routines::unsupported 〜

## はじめに
こちら自分用のメモであるためとても雑な記事です。
ただ、同じようなエラーが出た人の助けに少しでもなれば幸いです。
## エラーログ


“`.zsh
> 〇〇@1.0.0 dev
> webpack –watch

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:135:10)
“`

##原因
Nodeのバージョンが高すぎることが原因のようです

##解決策
Nodeのバージョンを下げる

###環境
macOS Montere

NestJSのDockerコンテナをCloud Run + Cloud SQLへデプロイする方法

## はじめに

NestJSの開発環境をローカルのDockerコンテナ上に構築し、簡単なAPIの実装を行なってから、本番環境としてCloud Run + Cloud SQLへデプロイする方法を記載します。

## DockerコンテナでNestJSを起動する

NestJSアプリとデータベース、両方のコンテナを同時に起動するためにDocker Composeを使いたいので、docker-compose.ymlを作成します。

“`bash
$ mkdir my_project && cd my_project
$ touch docker-compose.yml
“`

ローカルの開発環境なのでデータベースのパスワードなどはべた書きで構いません。
ここでのポイントはNestJSアプリのルートディレクトリを`nest-app`という一つ下の階層に
しておくこことと、`node_modules`を**匿名ボリューム**に設定することです。
そうしないと、バインドマウントされて`node_modules`の中身が消えてしまいます。

“`yaml
version: ‘3’
servi

Webの勉強はじめてみた その23 〜HTTPサーバー編〜

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

HTTPサーバー

`node.js`のモジュールを使ってサーバーを立てる

“`javascript
‘use strict’;
const http = require(‘http’);
const fs = require(‘fs’);

const server = http
.createServer((req, res) => {
const now = new Date();
console.info(`[${now}] Requested by ${req.socket.remoteAddress}`);
res.writeHead(200, {
‘Content-Type’: ‘text/html; charset=utf-8’
});

switch (req.method) {
case ‘GET’:
//res.write(‘GET ‘ + req.u

【nodejs】NodeJS v17.4.0 ソースインストール【RockyLinux】

# NodeJS の最新版 インストール

2022/01/20

– NodeJS : v17.4.0
– OS : Rocky Linux release 8.4 (Green Obsidian)

## 手順

### C, C++コンパイラが必要なのでinstall

“`
# dnf install -y gcc gcc-c++ make
“`

### Source Install

“`
# cd /usr/local/src
# wget https://nodejs.org/dist/v17.4.0/node-v17.4.0.tar.gz
# tar xzvf node-v17.4.0.tar.gz
# cd node-v17.4.0
# ./configure

# ↓ GCE2コア8GBのインスタンスだと1時間くらいかかるので注意 -jで分散処理可能？
# make
# make install
“`

### 確認

“`
$ node -v
v17.4.0

$ npm -v
8.3.1

$ npx -v
8.3.1
“`

【Node.js、Javascript】Seleniumで要素のXPathを一気に取得する。

# はじまり
一般的にDOMから要素のXPathを取得する方法は、ブラウザの開発者ツールからとされています。
しかし、Seleniumで要素にアクセスするためにいちいちDOMを右クリックしてXPathを取得するのも面倒だと思います。僕の場合は、300回右クリックしてXPathをメモするのは嫌だったので、一気にXPathを取得する方法を探しました。
今回は、そのときのソースを掲載します。

# ソース
今回の方法では、2つファイルを作り実現しました。
作るファイルは、ブラウザで実行させるスクリプトが入ったファイルと、普通にseleniumを実行するファイルです。
Chromeで実行し、対象のCSSクラス名は`checkbox`でした。

まず、ブラウザ側のファイルとなります。
最後の方は文法としては変ですが、配列のインデックスをスクリプトに載せるために`”scriptSeparator”`と記述しています。

“`javascript:ブラウザ側のファイル.js
function getXpathByElement (element) {
var NODE_TYPE_ELEME

【Node.js、Javascript】SeleniumでOffice365にログインする

# はじまり

はじめてSeleniumを使って悪戦苦闘した熱が冷めない内に、成果を上げておきます。
Seleniumで、Office365から立ち上げるアプリの直リンクへアクセスした際に、Office365へのログインが求められた際に切り抜けたソースを貼っておきます。
ブラウザはChromeで行いました。

# ソース

コメントアウトしているところはなくても動きますが、Seleniumのコードの動作確認ではあったほうがより役立ったという感覚がありました。
画面遷移の度に10秒くらいは余裕を持っていたほうが良いと思います。driver.waitは試していませんが、他のソースにも転用するために`driver`に依存しないものにしました。
`waitTimeToDisplay`は、各々のアプリによって時間を設定していただければと思います。

“`javascript
const { Builder, By } = require(‘selenium-webdriver’);
const { it } = require(‘mocha’);

const sleep = waitTime

【Node.js、Javascript】Seleniumで疑似要素の属性値を取得する

# はじまり

今回、Seleniumで疑似要素の`content`属性の値を取得するコードを作成しましたので掲載します。

本ソースは、OutSystemsで作られたシステムにおいて、チェックボックスのチェックの有無を判断するために使用したので、同様にOutSystemsを使っている方も利用できるのではないでしょうか。

動かしたブラウザは、Chromeです。

# ソース

“`javascript
const { Builder } = require(‘selenium-webdriver’);

const getPseudoElementsContentsByClassName = async(driver, className, isAfter=true) => {
const funcName = ‘getPseudoElementsContentsByClassName’;
let afterOrBefore;
if(isAfter === true){
afterOrBefore = ‘:after’;
}else{

Node.js: ssh 接続

Node.js で ssh 接続をする方法です。

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

“`bash
sudo npm install ssh2 -g
“`

“`js:ssh_exec.js
#! /usr/bin/node
//
// ssh_exec.js
//
// Jan/20/2022
// —————————————————————
const { readFileSync } = require(‘fs’)

const { Client } = require(‘ssh2’)
const dotenv = require(‘dotenv’)

dotenv.config()
host = process.env.HOST
user = process.env.USER
command = process.env.COMMAND
key_private = process.env.KEY_PRIVATE

const conn = new Client()
conn.on(‘re

フロントエンド問題と、Laravel における解決策

####はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

######フロントエンドとは？
ユーザー側で、見るための機能。
サーバーサイドとは、逆の視点を持ったもの。

フロントエンドの種類が増えてきた結果、様々なコードが入り乱れる状態になったので、それらをまとめるものが開発されるようになった。

###まとめ方（コンパイル）
新しい書き方をするフロントエンド側のプログラムを、古い書き方に統一する事（このことをコンパイルという）をして、コードの統一化を図るようになった。
代表的なコンパイルが、BABELなどが該当する。

###バンドル
コードの統一化に成功したが、その後ファイルの数が多すぎて、処理が重くなったりする問題が発生したので、バンドルという、複数のファイルを１つに纏める事が行われた。
代表的なバンドルが、webpackである。

###管理者の存在
これらのコンパイルや、バンドルをまとめて管理するシステムが現れる。
この、まとめて管理する役割を担って

Node.js 【MySQL 8.0 に接続できない。】

#Node.js 【MySQL 8.0 に接続できない。】
DBからデータ取得ができずに詰まったので備忘録。

##起きたこと
– node.jsのパッケージ使って、MySQL8.0に接続しようとするとエラー発生

“`
Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
“`

“`
エラー：ER_NOT_SUPPORTED_AUTH_MODE：クライアントはサーバーから要求された認証プロトコルをサポートしていません。 MySQLクライアントのアップグレードを検討してください

（Google翻訳）
“`

##原因
– MySQL8.0のパスワード認証形式の違いが原因。
– MySQL8.0の認証プラグイン
– **caching_sha2_password**
– （MySQL5.7までは、**mysql_native_password**）

Webpackerでerror Command “webpack-dev-server” not foundになる

# はじめに

最近Railsの開発環境を作成しています。
[こちらの記事](https://zenn.dev/jinwatanabe/articles/4d26ac177069f374eb6a)で構築手順を載せています。

そこで、GitにリポジトリをあげたコードをCloneして起動したところうまく起動できない事態が発生したため手直しのさいに解決した方法をまとめます。また、この記事とは別にWebpackerの問題がもう一つ起きています。
以下の記事から確認ください。

https://qiita.com/Sicut_study/items/d3c8b30570ce49dc6d8c

# 問題

DockerでWebpackerを環境を作成して起動したところ以下のエラーが発生しました。

“`
webpacker_1 | error Command “webpack-dev-server” not found.
“`

何度か起動するとエラーが消えて、git cloneしてくると初回は発生しました。

# 解決方法

これは`yarn install`された際に自動生成される`/

@google-cloud/bigquery などのライブラリを利用した際に発生した「Type ‘void’ is not assignable to type ‘this’」的な型エラーについて

## 起こった現象

Node.js で `@google-cloud/bigquery` を利用していると、ある日突然このような型エラーが発生するようになった。

“`
node_modules/@google-cloud/paginator/build/src/resource-stream.d.ts:37:5 – error TS2416: Property ‘end’ in type ‘ResourceStream‘ is not assignable to the same property in base type ‘Transform’.
Type ‘(…args: any[]) => void’ is not assignable to type ‘{ (cb?: (() => void) | undefined): this; (chunk: any, cb?: (() => void) | undefined): this; (chunk: any, encoding?: BufferEncoding | undefined, cb?: (() =>

【AWS】LambdaからCognitoユーザーを削除する

LambdaからCognitoユーザーを削除することがあり、少し手間取ったので残しておきます。

## 前提
– **Cognitoの削除が可能なポリシーをLambdaのロールにアタッチしていること。**
– ※今回はAWS管理ポリシーの AmazonCongitoPowerUser をLambdaのロールにアタッチしています。
– LambdaのランタイムはNode.js 14.x です。

## Lambdaのコード

“`javascript:index.js
let aws = require(“aws-sdk”);

exports.handler = async (event) => {

// eventから削除するCognitoユーザーのユーザー名リストを受け取る
let userNameList = event.userNameList;

// Cognitoユーザーの無効化メソッドをコール
await disalbeCognito(userNameList);

const response = {

Webの勉強はじめてみた その22 〜Slack上で動くbot作成2〜

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

同期・非同期処理

Node.jsは非同期で処理が実行される。

“`javascript
for (let count = 0; count < 500; count++) { fs.appendFile(fileName, 'あ', 'utf8', () => {
fs.appendFile(fileName, ‘い’, ‘utf8’, () => {
fs.appendFile(fileName, ‘う’, ‘utf8’, () => {
fs.appendFile(fileName, ‘え’, ‘utf8’, () => {
fs.appendFile(fileName, ‘お’, ‘utf8’, () => {
fs.appendFile(fileName, ‘\n’, ‘utf8’, () => {});
});
});
});

Laravel Mix の使いかた

こちらのページと同様のことを行いました。
[Stand-Alone Projects](https://laravel-mix.com/docs/6.0/installation#stand-alone-projects)

簡易サーバーのインストール

“`bash
sudo npm install http-server -g
“`

Mix のインストール

“`bash
mkdir my-app && cd my-app
npm init -y
npm install laravel-mix –save-dev
“`

Mix の設定ファイルを作成

“`js:webpack.mix.js

let mix = require(‘laravel-mix’);

mix.js(‘src/app.js’, ‘dist’).setPublicPath(‘dist’);
“`

この時点でのフォルダーの構造

“`text
$ tree -L 1
.
├── node_modules
├── package.json
├── package-lock.json
└──

Nodemon【Node.jsアプリケーションを自動的に再起動ツール】

## Nodemonとは…

nodemonは、ディレクトリ内のファイルの変更を検出すると、自動的にnodeアプリケーションを再起動することで、node.jsベースのアプリケーションの開発を支援するツールです。

https://www.npmjs.com/package/nodemon

##インストール方法

npmまたはyarnを利用してインストールすることができます。
開発環境のみで使用するので、ローカルインストールの方法でいいと思います。

#####グローバルインストール

“`typescript:
npm install -g nodemon
yarn global add nodemon
“`

#####ローカルインストール

“`typescript:
npm install nodemon –save-dev
yarn add nodemon –dev
“`

ローカルにインストールすると、コマンドラインから直接nodemonコマンドを使用できません。
`package.json` の scripts に設定すると、`npmコマンド` で起動で

LINE + AWS Lambda + API Gateway でおうむ返しBotを作る

# 野望
・インターフェース：LINE公式アカウント
・処理：AWS Lambda(+API Gateway)
・DB：Notion
として簡単なツールを作ろうとしています。

イメージはこんな感じ。


# 今回やったこと
まずはLINE公式アカウントに対する投稿の取得とLambdaでのLINE Messaging API動作検証のため、投稿した内容をそっくりそのまま返すおうむ返しBot的なものを作りました。


# 前提
・LINE Developersでユーザ登録を実施し、公式アカウントを作成している

ReactとNode.jsアプリをAWSにデプロイしたよ

ReactとNode.jsでアプリケーションを作りました。

実際にAWSを用いて環境構築して、動くようにしたので、どのようなネットワークを作ってどのような技術を用いてデプロイしたのかを書いていきます。
※どのようなネットワークを作ったかを重点的に説明します。技術の詳しい説明はまた別の記事で書きます。

①まずネットワークですが、VPCを用いてプライベートサブネットとパブリックサブネットを2つずつ、プライベートサブネットとパブリックサブネットを1つずつペアにして異なるリージョンに配置した。

②インターネットゲートウェイとパブリックサブネットを紐づけた。

③NATゲートウェイを各パブリックサブネットに配置した。

④プライベートサブネットにSSHでアクセスするための踏み台サーバをEC2を用いてパブリックサブネットに配置した。

⑤各プライベートサブネットに1台ずつNodeサーバ用のEC2インスタンスを作成し、踏み台サーバ経由でnginxやpm2等をインストールし、nodeサーバを使える状態にした。

⑥ELBを配置し、各プライベートサブネットに接続するようにした。

⑦RDB(MyS