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

Could not find matching close tag for “<%="のエラーメッセージ

node.jsのエラーコード

Could not find matching close tag for “<%=" 意味　“<%=“. に合うタグが見つかりませんでした。

node.jsを10->12に更新したときに起きたエラーと対処内容

表題通りの記事です。
これからnode.jsを10->12に更新する方の助けになれば幸いです。

## 確認環境
* Ubuntu: 18.04.3 LTS
* node.js: 10.16.0、12.14.1
* ビルドツール: gulp (後述しますが4系へのアップデートが必須でした)

## やったこと(全体像)
* [n](https://www.npmjs.com/package/n) をつかってローカル環境のnode.jsを10->12に更新　(参考: [nodeとnpmのバージョン更新方法](https://parashuto.com/rriver/tools/updating-node-js-and-npm))
* `npm ci`して、出てきたエラーを潰す
* firebaseの更新
* node-sassの更新
* `npm run build`して、出てきたエラーを潰す
* gulpを3系->4系へ移行

## エラー1 (firebaseの更新により解消)
最初はイージーケースから。

#### 事象
`npm ci`したところ、大量(体感3分)の

npm を使用して、誰かが書いたコードをリユースする方法

## npmで誰かが書いたコードを使用する

NPM(Node Package Manager)は、誰かが書いたコードを使用できる便利な管理システム。

自分で1から作るんじゃなくて、誰かが書いたコードを使用できるなら、それをリユースして無駄な時間を削減しようっていう考え方を元に作成された管理システム。

https://www.npmjs.com/

## npm を使用するまでの手順

今回は intro-to-node のフォルダ内のindex.jsというファイルでnpmを使用できるようにします。

### npm を初期化する

コマンドラインでちゃんと intro-to-node フォルダに移動しているか確認してください。

ネットサークル「TeamKitten」のメンバー管理APIをNodeで書き直した

[TeamKitten](https://teamkitten.tk)というインターネット上のサークルのリーダーをやっている[TinyKitten](https://tinykitten.me)です。

最近goa(v1だったかな)で書いていたメンバー管理用APIをNode.js(NestJS)で書き直したことと、エコシステムについて書いていきます。

**晩酌中に書いてるので普段以上に文が意味不明になってるかと思いますがご容赦ください。**

## そもそもなぜ移行したか？
いままでgoaというGolangで書いたDSLをよしなにSwaggerと実装テンプレートに落とし込んでくれるすぐれものを使っていました。が、
**突然のアップデートでgo getすらできなくなる**
という事態が発生ししばらく安定して動くコードで騙し騙しで動かしていました。
しかし、APIにバグが見つかりどうにも現行コードベースでは修正できないと判断し移行した次第です。

## goaをアップグレードすればよかったのでは？
それもそうなのですが、goa自体にそれほど固執がなかったのと、チーム内にGolangを書け

NestJsのDB接続周りでハマった話

# 何を作成する？

Nest.jsで環境ごとにデータベースの接続先を分けるために，接続情報を実行環境の環境変数から非同期で取得し作成する．

# 環境

– Node.js v12.14.1
– Nest.js v6.7.2
– TypeORM v0.2.22
– Postgresql v11.6

# 実装ログ

### 必要最小限の実装

参考）[Nest.js Document > TECHNIQUES >Database](https://docs.nestjs.com/techniques/database)

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

TypeORM, Database Driver (Postgresql)をインストールする．

“`
$ npm install @nestjs/typeorm typeorm pg
“`

##### DB接続情報を定義

**app.module.ts**にデータベースの接続情報を定義する．

“`typescript
import { Module } from ‘@nestjs/common’;
im

Typescriptチュートリアル

Typescriptを始めたいけどどこから初めて良いかわからないという方の、TypescriptのWebサイトに掲載されていた同名のページを少しだけアレンジして紹介します。

# 環境の準備
まず、node.jsがPCにインストールされている必要がある。インストールされていない場合、下記のページからLTSの最新版をダウンロードしてインストールします。
https://nodejs.org/en/

# Typescriptのインストール
下記のコマンドを実行して、typescriptのライブラリをダウンロードしてきます。会社の環境などで、プロキシサーバが間にある方は、プロキシありの方のコマンドを実行してください。

“`:プロキシなし
npm install -g typescript
“`

“`:プロキシあり
npm install -g typescript
“`

# 最初のTypescriptファイルの作成
まずテキストエディタを開いて、下記のJavascriptコードをgreeter.tsというファイルに保存してください。

“`typescript:g

Apacheサーバーでnode.jsを動作させる(SSL対応)

私の話ですが「あるWebアプリケーションをApacheで稼働していてそのアプリケーションに対応したAPIを同じサーバー上にNode.jsで作りたい」ということがありました。
HTTPであればポートを指定したりリバースプロクシを設定したりすることで問題はないのですが、HTTPSの場合は通常ポート番号が443で固定です。HTTPSに限った話だとあまり記事がないと思い今回備忘録として残しておきます。

###前提条件
・AWS EC2上でApacheが稼働中
・Apache / node.js / certbot(letsencrypt)がインストール済
・アプリのホスト名はexsample.comでAPIのホスト名はapi.example.comでDNS設定済
・HTTPSはec2のインスタンスで許可済

1.SSL対応
まずはexsample.comとapi.example.comのホストのバーチャルドメイン設定をします。

“`
$ cd /etc/httpd/conf
$ vi httpd.conf
== (編集) ==
$ systemctl restart httpd
“`

20分でWebアプリを作ろう

この記事はIBM Cloudで初めてアプリケーションを作成する方を対象に記述しています。
#<事前準備>
IBM CLOUD CLIのインストール

##IBM Cloud ブラウザの操作
###1.IBM CloudにLogin

###2.Cloud Foundry の立ち上げ
カタログメニューからCLOUD Foundory を選択、パブリック・アプリケーションを”作成”します。

プランを指定し、言語を選択（例：SDK for Node.js）

アプリ名を記入します。（例：GetStartedN

無料枠でGAEとAESを使ってみる

[Nuxt + Firebase + Elasticsearch 勉強用Qiita まとめ](https://qiita.com/YosukeAramaki/items/35f978e8e330c817514d)で
ローカル環境でFirebaseとElasticsearchをつなぐnodeとElasticsearchを構築できました。

これを本番環境に落とし込むためnodeをGAEに、ElasticsearchをAmazon Elasticsearch Serviceに移行してみました。

GCPとAWSに触るのは初めてだったのでかなり大変でした。

## GAE (Google App Engine)

Projectのセットアップはこちらのサイトを参考にしました
[Google App Engine Node.jsを試してみる。 GAE/Node.js](https://qiita.com/n0bisuke/items/fbea48562441a8314d45)
[App Engine スタンダード環境で Node.js を使用するためのクイックスタート](https://clo

ブロガーの買ってよかったものを集計してランキング化したら本当にいいモノが見つかった

## 動機
ジャバ・ザ・ハットリ(@jabba )さんの[技術書ランキングサイトをQiita記事の集計から作ったら、約4000冊の技術本がいい感じに並んだ](https://qiita.com/jabba/items/edefda09121877b79760)がとても面白かった。
特に面白く感じたのは「意見を集めてランキング形式に整える」と、良いモノはちゃんと上位に入ってくるところ。

この「意見を集めてランキング形式に整える」をブロガーの買ってよかったもの紹介記事に応用したら、紹介頻度の高い本当にいいものが見つかるのでは？

最近はAmazonのレビューもサクラコメントで溢れがちで、本当に良いものを見つけるのが難しくなっている世の中に多少のニーズはあるのでは？

と思ったのが今回のそもそもの動機。

## 作ってみた
実際にブロガーの買ってよかったもの紹介記事から紹介商品を集計してランキング形式で並べたのがこちら。

[ブロガー買ってよかったものランキング｜グッドグッズランク](https://www.wercat.net/goodgoodsrank)

この記事を書いている

Dockerでnode.jsプロジェクトの開発環境構築

# 動機
– 新しくMac Book Pro 2019を購入。nodeやpytonの開発環境構築にあたっては, 素の環境を綺麗なままにしたいことや、いろいろな環境での開発を行いためDockerを用いることにした。
– Docker周りの設定や概念の理解で少し躓いたのでここに記す。エキスパートには当たり前すぎる内容だとしてもだ。

# やりたいこと
node.js, angular, ionic, webpack を使ったweb appやPWAの開発を、
– ホストのローカル環境を汚すことなく(Dockerを用い)
– ホストで動くVS Codeを用いたコーディング&デバッグしつつ
– ホストのターミナルからgitを用いたバージョニングしつつ
– 仮想マシンでionic server等で起動したサーバとその上で動くweb appを、ホストのブラウザからアクセスし動作確認・デバッグ

# 手順
## 1. Docker desktop for Macをインストール

https://hub.docker.com からダウンロード。ユーザ登録も済ます。

## 2. プロジェクトのディレクト

めっちゃ簡単にNodejsでCLIツールを作る

## やりたいこと

そこまで凝ったことをしないCLIツールをNodejsで作りたい！
そこで[cac](https://github.com/cacjs/cac)を使ってそれを実現したいと思います。

[こちらの記事](https://qiita.com/sayama0402/items/9827cae2b4d7691cb42b)で作成したプロジェクトを元に進めたいと思います。

## パッケージとindex.jsの追加

“`sh
$ npm i cac

$ touch index.js
“`

## cacの基本

“`js
const cli = require(‘cac’)()

cli
.command(‘command’, ‘説明’) // コマンド
.option(‘–opt’, ‘説明’) // 引数オプション
.action((options) => {
// 実行したい処理
console.log(options) // 引数の値をオブジェクトで受け取れる
})

cli.help()

cli.parse()
“`

NPMでsudoを回避する技

##UbuntuにNodeJSをインストールしたらまさかの不便さに遭遇

先日UbuntuにNodeJSやらNPMをインストールしたところ
グローバルにモジュールをインストールしようとしたら失敗しました。

**sudo**で実行すればインストールできたのですが[Gatsby.jsのチュートリアル](https://scotch.io/tutorials/zero-to-deploy-a-practical-guide-to-static-sites-with-gatsbyjs)をやっていたときにGatsbyのプロジェクトを作成しようとしてエラーが発生しました

以下遭遇したエラーの一部

“`
gyp ERR! stack Error: EACCES: permission denied, mkdir ‘/home/【ユーザー名】/scotch-blog/node_modules/sharp/build’
“`

このエラーが発生したときに
***NodeJSをまたインストールしないといけないのかな***と暗い気持ちになっていましたが、***以下の方法で***npmパッケージをイ

DynamoDBのテーブルデータをNodejsでS3にBackupする

## はじめに

DynamoDBに大量にあるテーブルのデータを一括でS3にバックアップしたい。。みたいな状況があったので、メモとして書いておきます。

ちなみにテーブルが少量であれば、Data Pipelineを使って簡単に出来ます！！
`aws-sdk`ではData Pipelineの細かいオプションは設定出来なかったようなので、nodejsでData Pipelineを操作することはしていません。

## 環境

* Nodejs v11.1.0
* DynamoDB

## 事前準備

バックアップを行うためにS3に専用のバケットを作成しておいてください。
この記事では`backups`というバケットを作成したという例で進めます。

## プロジェクトを作成

適当ですが、`dynamodb-backuper`みたいなディレクトリを作成して進めていきます。

“`sh
$ mkdir dynamodb-backuper

$ cd dynamodb-backuper

$ npm init

$ npm install aws-sdk dynamodb-backup-res

AWS APIGateway/LambdaとJavascriptで簡易問い合わせサイトをつくる

#概要
問い合わせフォーム(javascript)　⇒　APIGateway　⇒　Lambda(Node.js)　⇒　Lambda(Node.js)　の流れで簡単な問い合わせサイトを作ります。

一応レスポンシブにします。

バリデーションもあります。
超初心者がwebpackerについて調べてみたぞ

Ruby on Rails を使って開発を始めた今日この頃。
サーバーサイドはそれとなく出来てきたからそろそろフロントも固めて行こうかしら。なんて思っていた僕はBootstrapをRailsで使おうと考えた。Bootstrapを使うのはいたって簡単。**htmlのhead内に以下のリンクをぶち込めばいいだけ**。

“`application.html.erb
“`
なんて便利だこと。
しかし、**Bootstrapを使うには他にも方法はある**。それは以下のリンクにある通りだ。
https://qiita.com/rhistoba/items/f724da

Reactの初期テンプレが作成出来なかった時の対処メモ

##始めに

node.jsのバージョンは`11.10.1`

久々にReactを勉強し直そうと、取り敢えず、技術書の手順に沿って、`create-react-app`でReactアプリのテンプレートを作ろうとしたら、出来なかったので、その時の対処方として残しておきます。

##問題となった事象
① Reactチュートリアルも一通り復習したし、何か１冊書籍でもこなしておこうと、Reactアプリの初期テンプレを作るため、`npx create-react-app react_app`を実行した。

② installが終わって、生成されたファイル群を見てみると、`node_modules`、`package-lock.json`、`package.json`しか生成されていない…。

③ おかしいな…と、Terminalのログを見ると、以下のようなログが出ていた。

“`terminal
A template was not provided. This is likely because you’re using an outdated version of create-r

NodeJSの画像処理ライブラリ「sharp」を使って画像を連結する

# はじめに
NodeJSでImageMagickのappendのようにサイズがバラバラの画像を単純に横並びで連結させたい機会があったのですが、~~単純すぎて~~中々記事が見つからなかったので備忘録的な意味合いも込めて書き残します。

# やること
– sharpで画像情報取得、連結

# バージョン
NodeJS: v12.14.1
sharp: v0.23.4

# 成果物

## 出来上がる画像

## ソースコード

“`bash:terminal
yarn init -y
yarn add sharp
“`
ソースはこちら
https://github.com/engabesi/appendImages

まず全文を貼ります。

“`javascript:index.js
const sharp = require(“shar

クラウドストレージ「Box」にAPIを使ってファイルをアップロードする

# 概要

クラウドストレージのBoxにAPI経由でファイルのアップロードを行う必要があったのですが、
調べてもあまり情報がなかったので記載しておきます。

# 環境

開発環境はMacでNodebrewを使っています。

“`
$ nodebrew
nodebrew 1.0.1
$ node -v
v12.14.1
“`

# カスタムアプリの作成と承認

## カスタムアプリの作成

BoxAPIを使うためにまずカスタムアプリを作成します。

デベロッパーコンソールにアクセスしてBoxアカウントにログインします。
https://app.box.com/developers/console

アプリの新規作成を押下します。

アプリの種類でカスタムアプリを選択します。

複数のファイルをアップロードしてExpressサーバーで保存する

# 概要

クライアントアプリからExpressサーバーへの複数ファイルのアップロード時にハマったので、
方法を記載します。

# 環境

開発環境はMacでNodebrewを使っています。

“`
$ nodebrew
nodebrew 1.0.1
$ node -v
v12.14.1
“`

# 単一ファイルのアップロード

まず単一ファイルのアップロード方法を記載します。

## Expressサーバー立ち上げ

express-generatorでExpressサーバーを作成します。

“`
$ npm install -g express-generator
“`

express-generatorをインストールしてexpressコマンドが使えるようになったので
アプリを作成します。

“`
$ express –view=ejs express-app

create : express-app/
create : express-app/public/
create : express-app/public/javascripts/