- 1. Gatsbyビルド時にOutgoingMessage.prototype._headers is deprecatedと怒られる件
- 2. サーバーのストレージがマッハだと思ったらlogだった件
- 3. Cloudflare Pagesでビルド時にreplaceAll is not a function出ちゃう件
- 4. WEBフレームワーク「express」について
- 5. 【Node.js, TypeScript】現在地から美味しいお店を探すアプリをLINE Messaging APIで作ってみた！
- 6. React + Rails API 環境構築 ②React側の設定 〜Prettier,stylelintの設定
- 7. 【バックもフロントもNodeを使う人向け】monorepoで、コマンド一発でインストールを完了させる色々な方法
- 8. React + Rails API 環境構築 ①React側の設定 〜ESLintの設定まで
- 9. nodenv-default-packages まとめ
- 10. ALBのリスナールールを自動で切り替えるLambda関数
- 11. Node.jsのnpxでBusiness Card(電子名刺)を作る方法
- 12. Error: Cannot find module ‘express’
- 13. node.js、express、handlebarsを使ってウェブサーバーの立ち上げからページの制作までをやってみた – 2
- 14. FIDOデバイスエミュレータようやく完成
- 15. 【Node.js】LINE MessageAPIで作った天気予報アプリをAWSでデプロイしてみる！
- 16. FirebaseのAuthenticationのメールアドレス確認の文章を変更する方法
- 17. [メモ] electron-flask
- 18. 自分がDockerについて調べて、やっと使えるようになった気がした手順
- 19. FirestoreでMapオブジェクト内のフィールドに対してWhere検索する
- 20. ビッグカメラで買ったGit-hub を使う（初めてのgithub完全ガイド1）
Gatsbyビルド時にOutgoingMessage.prototype._headers is deprecatedと怒られる件
# はじめに
こんにちは。名探偵コナンの99巻を買って2か月ほど経ちました。まだ読んでいません、筆者です :innocent:さて、Gatsbyプロジェクトビルド時になんかエラーが出てたのでそれ対応した話です。
同じエラーが出て困っている方の参考になれば幸いです:pray:# エラーはこれ
“`sh
$ gastby develop
…
…ERROR
(node:21481) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node –trace-deprecation …` to show where the warning was created)
“`廃止されたんすか:thinking:
# ほんとだ…廃止されてた :innocent:
https://nodejs.org/api/deprecations.html#DEP0066
### 追記
上記リンク踏んで思ったのですが、アンカーリンクが期待通りの動
サーバーのストレージがマッハだと思ったらlogだった件
# はじめに
linuxサーバーでnodeで作ったsiteを公開していたら、pm2のlogが溜まっててストレージを食いつぶしていたのでこれをなんとかしたくなりました。## サーバースペック
OS: Ubuntu18.04
あとの情報は今回の記事には関係なさそうなので割愛# サーバーのストレージがやばい！
ある日、サーバーを監視していると、どうやらファイルの変更などができなくなっていました。
ファイルを変更しようとしたりすると、以下のようなメッセージが。“`terminal
Can not change file: No space left on device
“`というわけで、対処していきます。
## 状態の確認
とりあえず、状態を確認します。“`nginx
df -aTh
“`あたりで実行します。
## 原因ファイルの特定
ストレージがやばいことは分かったので、原因ファイルを探します。`du`コマンドをいじってみます。“`nginx
du -sh * | sort -nr
“`とか
“`nginx
du -d1 -h <ディレクト
Cloudflare Pagesでビルド時にreplaceAll is not a function出ちゃう件
# はじめに
こんにちは。今月で楽天モバイルの1年無料が終わるので解約する予定です。wifi専用端末として使用してきました！**…長い間！！！ くそお世話になりました！！！** :bow:
さて、今回は、**Cloudflare Pages**でビルドの際に使用しているreplaceAllでエラーが出てしまう件について書きたいと思います。
# エラーはこれ
“`sh
TypeError: $(…).html(…).replaceAll is not a function
“`# 結論
**Cloudflare Pages**でビルド時に使用しているNode.jsのバージョンがv15.0.0より古いため。replaceAllはv15.0.0で追加された。
https://github.com/node.js/node/pull/35415
## ちなみにCloudflareのNode.jsのデフォルトバージョン
**v10**でした :innocent:https://developers.clou
WEBフレームワーク「express」について
# expressとは
サーバサイドのWEBアプリケーションフレームワークである。
Node.jsで作成する。
必要最小限の機能しかないため、その他ミドルウェアと組み合わせて使用する。## expressでできること
– ルーティング
– リクエスト整形## expressではできないこと
– リクエスト分析
– 認証認可
– DB接続## expressを補うミドルウェアの例
– リクエスト分析： body-parser
– セッション管理:express-session
– 認証:passport# expressでWEBアプリケーションサーバを作成
## express環境構築
“`
npm init
“`init実行後の設定項目
“`shell
npm ins
【Node.js, TypeScript】現在地から美味しいお店を探すアプリをLINE Messaging APIで作ってみた！
以前LINE Messaging APIを使って、天気予報アプリを作成しました。
https://qiita.com/Ryo9597/items/bcb807688f35d6a72861
https://qiita.com/Ryo9597/items/bf93618663f28e9d8f7f
https://qiita.com/Ryo9597/items/4c05b8b972ad7efc0c66
今まで作った記事の中で一番いいねを頂きました☺️
ということで、第2弾です。
LINE Messaging APIを使って現在地から美味しいお店を探すアプリを作ってみました。
完成形としては以下の通りです。を読んでから環境構築してみたもの# Prettier[^1]の設定
## 1. Prettierのインストール
– prettier
– eslint-config-prettier“`
yarn add -D prettier eslint-config-prettier
yarn
“`## 2. .eslintrc.jsを書き換える
– eslint-config-prettier系の共有設定を他の競合設定から上書かれないように最後に書くこと
※ 2021/6/23現在以下はeslint-config-prettierにmergeされているため追加不要
– prettier/@ typescript-eslint
– prettier/react“`
extends: [
‘eslint:recommended’,
‘airbnb’,
‘airbnb/h
【バックもフロントもNodeを使う人向け】monorepoで、コマンド一発でインストールを完了させる色々な方法
# TL;DR
npmやyarnの標準機能のみを使って、「ローカルで、コマンド一発で複数ディレクトリのパッケージインストール」を実現する。また、CIを実行しやすいように、それぞれのディレクトリにlockファイルができるようにする。# はじめに
monorepoは複数のプロジェクトを一つのリポジトリで管理する手法です。例えば、Web開発ではフロントエンドとバックエンドを以下のように、同じリポジトリ内で管理することがあります。“`text:モノレポのディレクトリ
web/
server/
“`
monorepoのメリットとしては、
– フロントとバックエンドでコードを共有しやすい(とくにTypeScriptの型定義)
– issueやPull requestがひとつのリポジトリに集まるため管理しやすいなどがあります。
# やりたいこと
– コマンド一発で、`web/`と`server/`の`yarn install`（もしくは`npm install` or `npm ci`）を完了させたい。あわよくば、コマンド一発でフロントとバックエンドを両方起動したい。
– `web
React + Rails API 環境構築 ①React側の設定 〜ESLintの設定まで
## 概要
– 1からSPAアプリケーションの環境を作っていくので、その手順を残す
– 構築していく途中で調べた内容も別途記事にしてまとめているので良ければ見てください## フロントエンド環境構築
### 1. node.jsをインストール〜Linter&Formatterの設定前まで
– anyenv[^1]をインストール(env系をマネージするパッケージマネージャー)
“`
brew install anyenv
echo ‘eval “$(anyenv init -)”’ >> ~/.zshrc
Exec $SHELL -l
“`– anyenv経由でnodenvをインストールする
“`
anyenv install nodenv
exec $SHELL -l
“`– anyenvとnodenv用のプラグインを入れる
– nodenvを含めたenv系をまとめてアップデートしてくれるanyenvプラグインのanyenv-update
– npmインストール時にデフォルトで一緒にインストールしておくパッケージを指
nodenv-default-packages まとめ
# 概要
– nodenv-default-packagesというプラグインの存在を知ったので調べてまとめる
## 参考資料：[nodenvでいつも使うパッケージを自動でインストールする](https://qiita.com/tea-red/items/361c72df55b3fcd0e0bf)
# nodenv-default-packagesとは
– nodenvのプラグイン
– nodeインストール時に自動的に指定したパッケージをインストールすることができる
– デフォルトでインストールするものを固定しておくことでインストール忘れを防げる
# 使用方法
## 1. インストール
“`
mkdir -p “$(nodenv root)/plugins”
git clone https://github.com/nodenv/nodenv-default-packages.git “$(nodenv root)/plugins/nodenv-default-packages”
“`## 2. デフォルトでインストールするパッケージの設定
– default
ALBのリスナールールを自動で切り替えるLambda関数
[SetRulePriorities](https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/APIReference/API_SetRulePriorities.html) APIを使用して、ALBのリスナールールを自動で切り替える関数です。
CloudFormationからSNS経由で通知を受け取り、CloudFormationによる更新中はメンテンナンス画面を表示し、更新が完了したらEC2のサイトを表示するというルールの切り替えを行います。# 概要
– ランタイム：`Node 14.x`
– アクセス権限：
– `AWSLambdaBasicExecutionRole`
– `ELB v2 SetRulePriorities`(カスタムポリシーで選択する)
– 環境変数
– `LogicalResourceId` : 更新するCloudFormationスタック名
– `ForwardRuleArn` : ターゲットグループへの転送ルールのARN
– `MaintenanceRu
Node.jsのnpxでBusiness Card(電子名刺)を作る方法
##はじめに
先日、仕事でご一緒した方が、npxを使ったBusiness Cardで自己紹介をされていて、素敵だな〜と思ったので、真似させていただき作ってみました！！##デモ
まず、早速デモをご紹介します。ターミナルで
“`npx misa335“`
と入力してみてください。
ターミナル上にBusiness Cardが表示されるはずです！
npmパッケージのリンク
https://www.npmjs.com/package/misa335##作り方
① プロジェクトの作成
`npm init`で新規プロジェクトを作成します。② package.jsonの編集
package.jsonを編集して、`npx`を実行すると、npmパッケージを落として、package.jsonに記載された`”main”: “index.js”`が実行されるように設定します。 “`javascript:package.json
{
…
“main”: “index.js”,
“bin”: {
“misa335”:
Error: Cannot find module ‘express’
“`npm install -g express“`
expressをインストールしてもexpressが見つけられない。。。
“`
node server.js
internal/modules/cjs/loader.js:883
throw err;
^Error: Cannot find module ‘express’
“`## やろうとしていること
[vuex/examples at dev · vuejs/vuex](https://github.com/vuejs/vuex/tree/dev/examples)
のserver.jsを実行したい## 解決
“`npm install“`
でパッケージをインストールすればいいだけ
node.js、express、handlebarsを使ってウェブサーバーの立ち上げからページの制作までをやってみた – 2
#次はNode環境で、ウェブサイトを作っていこう
[前回](https://qiita.com/monsoonTropicalBird/items/fe51c431d1abbc68ff7c)からの続き、expressをインストールし、サーバーも立ち上がったので、早速ウェブサイトを作っていくよ。
通常のサイト制作と大きく違っているのは、まず、ディレクトリの構造。 前回もやったけど、エンドポイントって考え方がメインになるので、旧来の絶対パスとか相対パスっていう考え方とはちがうなぁという感じ。
基本、静的データと動的データを分けて、expressに登録していくんじゃ。
あと、テンプレートエンジンと言われているプラグインをexpressに入れて、ページを作っていくよ。
何故そんなものを使うかと言うと、ただの静的なサイトをテキストエディタでもIDEでも使って作って登録した静的フォルダにいれれば、今までのような阿部 寛的なページは勿論作れるのじゃが、php的な作り方。つまり、ヘッダーとかフッタとかの使い回す部分を分けておいて、ページ読み込み時に合体させるみたいな事をするには、このテンプレー
FIDOデバイスエミュレータようやく完成
以前の投稿 「[FIDOデバイスエミュレータを作成してみた(これが最後)]( https://qiita.com/poruruba/items/1f0c4caa69465ad2c867)」 で、FIDO2のデバイスエミュレータの作成を試みて、断念していたのですが、久しぶりに挑戦して、原因がわかり、完成できました。
ソースコードもろもろを以下のGitHubに上げてあります。
poruruba/fido2_server
https://github.com/poruruba/fido2_server
ただ、いくつかのサイトで動かしていますが、動かないサイトがあります。おそらく、FIDOアライアンスのCertifiedデバイスではないからかと思います。たとえば、AWSのWebコンソールへのログインのためのFIDOデバイスとして登録できますが、認証時に失敗しています。。。
#目指す構成
本来、FIDO2デバイスは以下の構成で使います。ブラウザとFIDO2デバイスの間は、BLEかNFCかHIDで通信します(ブラウザの実装状況にも寄りますが)。
“`
FIDO2対応サーバ
⇔(H
【Node.js】LINE MessageAPIで作った天気予報アプリをAWSでデプロイしてみる！
先日、Node.jsでアプリを天気予報アプリを作成しました。
https://qiita.com/Ryo9597/items/bf93618663f28e9d8f7f
この記事内ではデプロイは、`Glitch`を使いました。
https://glitch.com/
まぁ無料なわけで色々問題があります。
・プロジェクトは、利用されていないときは5分でスリープ状態になる
・4000件/1hのリクエスト制限がある(Error: 429 too many requests)ということでAWSにデプロイすることにします。
それではアーキテクチャに関してみていきましょう。## アーキテクチャ
ちなみにAWSのアーキテクチャなどを作るときは、`drawio`がおすすめです。
VSCodeから使えるので是非使ってみてください。
FirebaseのAuthenticationのメールアドレス確認の文章を変更する方法
## できるようになること
メールアドレス確認のテンプレートを使用せず、文章を変更できるようになります## 環境
* Amazon Simple Email Service(Sendgridでも可)
* FirebaseCloudFunctions## 大まかな流れ
1. `createUserWithEmailAndPassword` して、`auth.user` を `firebase` に作成する
2. `cloud functions` で `auth.user` が作成された時に、メールアドレス確認リンクを作成する
3. メール文章にリンクを載せて、メール配信サービスを使って送信する## コード
#### 1. `createUserWithEmailAndPassword` して、`auth.user` を `firebase` に作成する
“`js
firebase.auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
//
[メモ] electron-flask
# 概要
– https://github.com/matbloch/electron-flask を使う。
– `readme.md`の説明に書かれてる通り# 環境
– Windows 10 64bit 21H1 (仮想機にて確認. 2021/6/21現在)
– Python v3.9.5 (venv使用)
– Node,js (LTS) v14.17.1
– 作業フォルダ: `C:\develop\`# 手順
## インストール関連
1. PowerShellを管理者で起動。Win+x a Alt+y2. インストール: Chocolatey (パッケージマネージャ)
“`powershell:管理者
Set-ExecutionPolicy Bypass -Scope Process -Force; [S
自分がDockerについて調べて、やっと使えるようになった気がした手順
## 初めに
環境をコンテナ化、各々の開発環境や、開発環境と実行環境の差異をなくす、開発が爆速化など、dockerに関することを目にするのですが、恥ずかしながら私はdockerの取っ掛かりにとても苦労しました。Qiitaの記事、書籍を調べ、ようやっと、なんとなくつかめた気がする、という段階です。もし同様の方が見えて、当記事がほんの少しでも助けになったら、とてもうれしいです。## 環境
– Windows10 Home 20H2
– WSL2インストール済み
– Docker Desktop for Windows
– VSCode## 当記事でやること
– Node.js用のコンテナ、SQLServer用のコンテナを建てる
– TypeScriptを用いる
– ブラウザからNode.jsコンテナにアクセス
– Node.jsコンテナからSQLServerコンテナに接続し、データを取得しブラウザに表示させる### なぜSQLServerなのか
当方が本業で使っているのがSQLServerであり、慣れているためです。しかし、個人で**無料**で開発や学習を進めるにはハードルが高
FirestoreでMapオブジェクト内のフィールドに対してWhere検索する
# はじめに
以下のような、Mapオブジェクトを持つコレクションに対してWhere句で条件指定してデータ取得するメモ。
自分用備忘録を兼ねる。（むしろそっちの目的が大きい）
# 検索方法
`where(‘[フィールド名].[Mapオブジェクト内のフィールド名]’ , ‘==’ , ‘hogehoge’)`のように指定する。
上の例だと`where(‘data.name’,’==’,’hogehoge’)`とする。
以下Node.jsのサンプル“`javascript
const admin =
ビッグカメラで買ったGit-hub を使う（初めてのgithub完全ガイド1）
#Git とは何じゃ？ ビッグカメラで買えるんか？
すでにプログラミングを業務にされている諸先輩方は、今更なトピックかも知れませんが、プログラミングはじめました という入門者にとっては、GitやGit hubっていうのは、何やら世界のプログラマーが使う、怪しい秘密のプラットフォームで、色々なトラップが埋め込まれたハッカーの溜まり場的なイメージがあると思うのじゃ。
Gitっていうのは、ざっくり言うとプログラムの”バージョンコントロール”で、ドラクエで言う”セーブ”。教会で行うアレじゃ。
プログラムっていうのは、ほんの一文字で全てが崩壊する危機をはらんでおり、えらいことが起こった時に、その前に戻れるようにする機能のこと。
Git hubはそのデータをセーブしたり、管理したりするクラウドの場所。また、そのデータをチームで共有して、一緒に作業していく場。
別記事ではnodeのプロジェクトを解説していこうと思うので、その中でどう使うのかを解説してみるぞ。
###どうやって使うんじゃ？
まずはGitの機能を自分のコンピューターで使うために、ダウンロードしないと始まりません。
**ビッグ
