- 1. Node.jsでリバースプロキシを書いた
- 2. 照度センサーを使って灯りがついている時間を計測し、電気料金がわかるものづくりに挑戦してみた!!
- 3. お手軽構築!docker-compose+Circle CI環境下でのスペルチェック環境
- 4. Node.js×TwitterAPIでツイートを連続取得
- 5. Nginx html うまく表示できない エラー[ Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.]
- 6. WSL2上でwebpackのホットリロードが効かない
- 7. Node.jsで使えるExcelライブラリ調査
- 8. BoxにNode.jsからファイルアップロードメモ
- 9. Webex APIを使って、メッセージを送る
- 10. serverlessFWにこんにちは serverlessでローカル上でAWS Lambdaを起動・呼び出してみる
- 11. MQTTブローカーの shiftr.io で HTTPリクエスト(内向き/外向き)を組み合わせる【2022年4月版】
- 12. GAEでAPIキーを隠したいとき
- 13. Stripeの料金データを通貨やmetadataなどで検索・取得する6つの方法
- 14. React+Node.js(Express)でMySQL連携する
- 15. Vue.js+Node.jsで認証機能を実装する
- 16. Node.js – ES6のimportを使ったスクリプトサンプル
- 17. Node.js のパッケージをバージョンアップして公開
- 18. [Typescript] オブジェクトの特定プロパティの型を上書きする型関数をつくる
- 19. TypeScriptで手軽にCLIを実装する
- 20. ExpressでJWT認証機能付きのAPIを作成する(その4. サインアップ時のメール認証・パスワードリセットの実装)
Node.jsでリバースプロキシを書いた
# リバースプロキシとは
インターネットにてリクエストをほかのサーバの代わりに受けて(代理:proxy)他のサーバへ中継してくれるサーバ
# なぜわざわざNode.jsで書くのか
ふつうはNginxを使う。
今回は小規模な自分用サーバのために使うので、ほかの機能で使っているnode.js
にまとめて載せられると便利だと思い書いた。# コード
https://github.com/wonderhorn/nodegateポイント
– [http-proxy](https://github.com/http-party/node-http-proxy)を使う、プロキシもリバースプロキシもこれでできる
– http-proxyのバグでPOSTが通らないのでヘッダをいじる:https://github.com/wonderhorn/nodeg
照度センサーを使って灯りがついている時間を計測し、電気料金がわかるものづくりに挑戦してみた!!
こんばんは。
現在小売業で働いており、新入社員の受け入れの研修をしています。
講義の中で「**店舗で使用しているものはすべて経費が掛かっていると思ってください。**」と
新入社員に伝えましたが、こんなぼんやりしている説明はないなと反省・・・**なので、経費としてわかりにくいものを**
**分かりやすくするための装置を作ろうと実装してみました。**(ひとまず照度センサーを使って電気料金がわかるものを作りたくなったので、
まずは家のトイレで使用している電気料金を調べてみることにしました!)## 作ろうとしたもの
照度センサーを使って電気がついている時間を分単位で計測し、
電気料金がわかるものを作ろうとしました。
↑の画像は電気をつけている状態でNode.jsを実行して、
0.15v以下になった時間を計測してくれるものです。
お手軽構築!docker-compose+Circle CI環境下でのスペルチェック環境
## この記事 is 何
ソースコードをcommit/push(後の本流へmerge)した後に「あっ、これtypoしてる…」という経験はありませんか?
英語が苦手な私はよくあります。VSCodeの拡張機能でスペルチェッカーを入れてますが、それでも見落としがちです…
そのようなときにCIで自動で検出/ブロック出来たらいいですよね!この記事では、その対策方法について解説しました。
## この記事では解説しないこと
解説している素晴らしい記事はたくさんあるので、既存の記事にお任せしました!– Docker、Docker-composeの導入方法/解説
– Circle CIとは?
– githubとCircle CIの連携方法
– Visual Studio Codeの導入方法/解説## 動作環境
– Local環境
– Windows 10
– Docker Desktop 2.2.0.4
– docker-compose 1.25.4
– Visual Studio Code 1.66.1
– Code Spell C
Node.js×TwitterAPIでツイートを連続取得
# search_metadataによる連続取得
TwitterAPIは一度のリクエストで最大100件までしかツイートを取得できません。
例えば`#ゲーム実況`というタグが付いたツイートを収集しようと思っても最新の100件を取得したらそこで次の取得を打ち切ってしまいます。
どうにかならないかということで調べてみたところ以下の記事がヒット。
[Node.jsでTwitter検索から100件を超えるツイートを取得したい](https://qiita.com/ryo-a/items/53fe9eadcf719b817c9a)詳細はリンクを参照してほしいのですが、以下のようなコードで連続取得が可能になります。
“`
const Twitter = require(‘twitter’);
const client = new Twitter({
consumer_key: “—“,
consumer_secret: “—“,
access_token_key: “—“,
access_token_secret: “—”
});const
Nginx html うまく表示できない エラー[ Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.]
## きっかけ
1. viteでつくったサイトをwebブラウザで表示させようと思ったらなにも表示されない
1. コンソールを見るとエラー
“`:Chrome コンソール
Failed to load module script:
Expected a JavaScript module script but the server responded
with a MIME type of “application/octet-stream”.
Strict MIME type checking is enforced
for module scripts per HTML spec.
“`## 改善方法の結論
httpコンテキストに以下を追記
“`conf:nging.conf
http{
+ include /etc/nginx/mime.types;
+ default_type application/octet-stream;..省略
}
“`– include /etc/nginx/mime.type
WSL2上でwebpackのホットリロードが効かない
# はじめに
上記の本を参考にTypeScriptの勉強をしていたところ、webpack serveによる自動ビルドがうまく働かず少し悩んだため、解決策を備忘録として残しておきます。
# 状況
webpack serveでサーバーを起動するこ
Node.jsで使えるExcelライブラリ調査
Excelファイルを扱うライブラリが多すぎてどれを使ったらよいかわからないので・・・
# 結論
データの読み込みだけなら __xlsx__
Excelのテンプレートに書き込むなら __ExcelJS__ or __xlsx-populate__
ただし、ExcelJSはかなり多くのバグが放置されているので注意| | TypeScript | 読み込み | 書き込み | スタイル設定 | スタイル保持 | 画像挿入 | セルコメント |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| xlsx | ○ | ○ | ○ | | | | ○ |
| xlsx-js-style | ○ | ○ | ○ | ○ | | | ○ |
| node-xlsx | ○ | ○ | ○ | | | | |
| ExcelJS | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| excel4node | | | ○ | ○ | | ○ | ○ |
| officegen | | | ○ | |
BoxにNode.jsからファイルアップロードメモ
[Box](https://www.box.com/ja-jp)のAPIを使ってファイルアップロードを試してみます。
## シンプルなサンプル
https://github.com/box/box-node-sdk
こちらのSDKを使って試してみましたが、割とシンプルに動きました。
ドキュメントを見つつasync/awaitに書き換えてます。
> https://github.com/box/box-node-sdk/blob/main/docs/files.md#upload-a-file
“`js
‘use strict’;const BoxSDK = require(‘box-node-sdk’);
const fs = require(‘fs’);// Initialize the SDK with your app credentials
const sdk = new BoxSDK({
clientID: ‘xxxxxxxxxxx’,
clientSecret: ‘xxxxxxxxxxxx’
});
const client = sdk.g
Webex APIを使って、メッセージを送る
React、node.js、Google Cloud Platform (App Enigine)で[SORTFUL](https://sinceretech.app/ “SORTFUL”)というチームビルディングゲームを作る際に出てきた疑問を、備忘録として記事にまとめています。
はじめに
今回SORTFULで、参加者それぞれにこっそりメッセージを送らなきゃいけない場面があり、そのためにwebex,slackのAPIを利用することにしました。
webex for Developersに登録する
まずは[webex for Developers](https://developer.webex.com/ “webex for Developers”)にSign Upします。
※Webexアカウントをお持ちの方は、そのアカウントでログインできます。のCICDをGitHub Actionsで構築](https://qiita.com/yuta-katayama-23/items/d5c786aaa2a439a3cb17)でサーバーレスアプリケーションを構築するフレームワークとして[AWS SAM](https://aws.amazon.com/jp/serverless/sam/)は触った事があったが、[serverless](https://www.serverless.com/)は触った事がなかったので、serverlessでHello World(Node.js)をやってみたので備忘録を残す。やってみた事としては、以下の3つ。
– cli上で`severless`コマンドからHello World的なLambda関数を作成するseverless.ymlの作成
– ローカル環境でそのLambda関数を実行し、Lambdaを呼び出し
– 【おまけ】実際にAWS環境にDeployソースコード全体は以下。
https://github.com/yuta-kata
MQTTブローカーの shiftr.io で HTTPリクエスト(内向き/外向き)を組み合わせる【2022年4月版】
MQTT を利用する際の仲介役となる MQTTブローカーを準備する際、外部サービスやライブラリ等を利用して準備するなどしますが、クラウド・デスクトップの両方で使える MQTTブローカーで shiftr.io というサービスがあります。
この shiftr.io は、MQTT だけでなく HTTP のインタフェースを持っており、HTTPリクエストと MQTT の Pub/Sub との間をつなぐ役割を担うこともできます。その shiftr.io の HTTPインタフェースについては、過去に一部を試したことがあり、手順を以下の記事に書いていました。
●【NoCode 2020】 MQTTブローカーの shiftr.io と IFTTT の Webhook をつなぐ(shiftr.io の HTTP Interface) – Qiita
https://qiita.com/youtoy/items/c690e2f1aa064e6dd289しかし、その時に試せてなかった機能もあったり、試したものの記事にしてなかった部分もあったため、あらためて今回の記事で情報をまとめてみようと思います
GAEでAPIキーを隠したいとき
React、node.js、Google Cloud Platform (App Enigine)で[SORTFUL](https://sinceretech.app/ “SORTFUL”)というチームビルディングゲームを作る際に出てきた疑問を、備忘録として記事にまとめています。
はじめに
今回SORTFULを開発するにあたって、Webex APIとSlack APIを使いました。
ここで問題になってくるのが、APIキーの隠し場所です。そこで私は、GAEにデプロイする際に使うyamlファイルに環境変数として登録する方法を選びました。
以下にその方法を記します。環境変数を設定する方法
GAE(Google App Engine)では、app.yamlに環境変数を設定できます。(参考:[app.yaml構成ファイル](https://cloud.google.com/appengine/docs/standard/go/config/appref?hl=ja “app.yaml構成ファイル”))
“`app.yaml
env_variables:
MY
Stripeの料金データを通貨やmetadataなどで検索・取得する6つの方法
Stripeでは、一回切りの決済でも定期課金でも商品・料金データをDashboardで登録して利用します。
Checkoutのサンプルコードでも、料金IDを引数に設定していますね。
“`js
const sesssion = await stripe.checkout.sessions.create({
mode: ‘subscription’,
line_items: [{
price: ‘price_xx’,
quantity: 1
}]
…
})
“`そのため、ECやSaaSなどで、複数の商品・料金をユーザーが選んで決済できるシステムを作りたい場合には、料金データのリストを取得して表示させる実装が便利です。
ただし、提供する製品やサービスによっては、「取得したい料金」と「除外したい料金」が発生します。
ここでは、料金データをStripeのAPIから取得する方法を6種類紹介します。
## 基本: Price APIのListメソッドを利用して取得する
まず基本の形として、Price APIでList
React+Node.js(Express)でMySQL連携する
##### はじめに
Reactの学習をはじめようと思った時に、DBとの連携はどのようにするのか不明だったので調査したところ、「Node.jsでAPIサーバーを立てて、Reactから実行、結果をごにょごにょする」という結論に至ったのでそれを実現するための備忘録です。##### 開発環境
・OS: MacOS Big Sur
・Editor: Visual Studio Code
・DB: MySQL##### 事前準備
Node.jsやReact、MySQL Serverのインストールは事前に済んでいるものとします。
DB、テーブルは事前に簡単なものを作成済みです。
***
VSCodeのターミナルで作業を行います。
clientディレクトリとserverディレクトリを作成
“`
$ mkdir client
$ mkdir server
“`
#### Reactの設定
client側にはReactをインストールする
“`
$ cd client/
$ create-react-app .
“`
ではナレッジが少ないことと対応ライブラリが少ない事から、今後の開発が辛いことが分かりましたので、社内システムはVue2で作り直そうと思っています。# 本記事で紹介すること
1. 構成図
1. 完成イメージ
1. VueCLIからVueプロジェクト作成
1. フロントエンド-認証画面の実装
1. Node.jsプロジェクト作成
1. バックエンド-認証処理の実装※Node.jsとVue.jsのインストールは割愛しております。
# 構成図
ざっくりこんな感じです。
`ではなく`import()`の利用を強制する。
* Googleの検索結果で、意外と`import()`を使ったコードサンプルが見つからなかった。
* なので、自分がわかった範囲で`import()`によるサンプルコードをまとめていく# 注意
* ファイル名の拡張子は`.mjs`とする# コードサンプル
## JSONファイルの入出力
### 事前準備
* fsモジュールのインストール
“`console
# npm install fs
“`### コード
“`javascript
import fs from ‘fs’; // const fs = require(‘fs’) と同じconst SRC_FILE = “./src.json”;
const RESULT_FILE = “./result.json”;// ファイルの読込
const data = JSON.parse(fs.readFileSync(SRC_FILE, ‘utf8’));// ファ
Node.js のパッケージをバージョンアップして公開
# 種類
“`sh
$ npm version patch # v0.0.0 -> v0.0.1$ npm version minor # v0.0.0 -> v0.1.0
$ npm version major # v0.0.0 -> v1.0.0
“`# 公開
“`sh
$ npm version patch
v0.0.1$ git tag # gitにtagが反映されていることを確認
v0.0.0
v0.0.1 # 反映されてます$ git push origin tags/v0.0.1 # gitにtagをpush
$ npm publish # npmに公開
“`
[Typescript] オブジェクトの特定プロパティの型を上書きする型関数をつくる
# 成果物
“`
/**
* 特定のプロパティを上書きする型関数
* Overwrite
*/
export type Overwrite= Omit< T, keyof U > & U;
“`# 何がしたいか
“`
type Person = {
firstName: string;
lastName: string;
age: string;
};
“`
例えば上記の様なオブジェクトがあとすると、 `age` プロパティだけ型を `string` から `number` へサクッと安全に変更できる型関数を作りたい。**※ しかしプロパティの上書きは混乱を招くので、今回の例のような場合は設計を見直すべきです。**
私たちの場合、ORMにPrismaを使っているのですが、Jsonデータを取得するときに、 `any` 型になってしまう。そういった時に、jsonデータのみを自分たちで作った型に上書きしてあげたか
TypeScriptで手軽にCLIを実装する
GitHub Actions上で簡単なスクリプトを実行する機会があり、TypeScriptで書いてさくっと実行したいなと思いました。また、
– 開発時に毎回JavaScriptにトランスパイルするのはめんどくさい
– mainにマージする前はDry Runを実行したいという背景から、TypeScriptのトランスパイルと実行を手軽にできる`ts-node`、 CLIのオプションなどを手軽に設定できる`commander`を使うことにしました。
記事で使っているコードはこちらのリポジトリに上げています。
https://github.com/kyntk/q-typescript-cli
## ts-nodeでTypeScriptの実行
https://github.com/TypeStrong/ts-node
typescript, ts-nodeをインストールします。
“`bash
yarn add -D typescript ts-node
yarn tsc –init
“`まずはコンソールに出力するだけのスクリプトを実装します。
“`ts:main.
ExpressでJWT認証機能付きのAPIを作成する(その4. サインアップ時のメール認証・パスワードリセットの実装)
# はじめに
この記事は「その3. 認可機能とユーザ操作の実装」に続けて書いています。## 目的
自社のFileMaker CloudデータベースにWebからアクセスするためのAPIを作成する必要があり,そのために勉強したことの備忘録として step by step で作成の過程を書いていきます。想定する読者はjavascriptを触ったことはあるけれども,本格的なバックエンド開発の経験は無い,というような方です。この記事では不特定多数のユーザを対象とするサービスを構築する際に必須となるサインアップ時のメール認証やパスワードリセットの機能を,`Node.js`用のメーラーモジュールである`nodemailer`を用いて実装していきます。
## 開発環境
node v14.17.4
npm 6.14.14ローカル開発環境には仮想SMTPサーバである[MailCatcher](https://mailcatcher.me/)がインストールされている前提です。
# Step 1. Nodemailerのセットアップ
“`zsh:zsh
$ npm install nodem