- 1. ハマりにハマったnpm install
- 2. npm ERR! code E404
- 2.1. Lambdaの明瞭な出力ログ [Python, Node.js]
- 2.2. Node.jsでS3に画像をアップロードする。
- 2.3. webpack4+babel7 に移行後、karma+inject-loaderが正しく動作しない
- 2.4. Azure Communication Services ことはじめ 2022 : 音声&ビデオ通話、チャット、Teams 会議参加機能を試す
- 2.5. express-generator で簡単な WebAPI を作成
- 2.6. ReactでQRコードを表示したいというお話
- 2.7. Node.jsのバージョンアップ
- 2.8. PostgreSQL データをnode.jsで挿入してみる
- 2.9. anyenv/envs/nodenv/node.jsの環境構築
- 2.10. 【Nuxt】vue-chartjsの読み込みに失敗する！
- 2.11. Ubuntu 20.04 LTSでnode.jsのバージョンを上げる
- 2.12. formを用いたHTMLからMySQLへの値の挿入方法について。
- 2.13. Webの勉強はじめてみた その27〜モジュールごとの実装とデータベース〜
- 3. 設計の進め方
サーバーサイド環境構築(Node.js + Typescript)
## ss環境構築
##### まっさらな状態からcurlを叩いて「Hello World」を表示する
## src > app.ts
import express from “express”
const app = express()
app.use(express.json())
app.get(“/”, async (_req, res) => {
res.end(“Hello World”)
})const port = 8080
app.listen(port, () => {
// eslintでconsoleのエラーが出ないよう下記を追加
// eslint-disable-next-line no-console
console.log(`Listening on port ${port}`)
})## dependencies
#### コマンド
`yarn add express`：サーバーサイド Javascript の実行環境
npm ERR! code E404からやっと抜け出せた；；
ハマりにハマったnpm install
npm install でずっと「npm ERR! code E404」から抜け出せずにいたが半日後にやっと解決・・・
プログラミングを学び始めた自分にとってかなり辛かった・・・
npm ERR! code E404
$ npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-servernpm ERR! code E404
npm ERR! 404 Not Found - GET http://registry.npmjs.org/typescript
npm ERR! 404
npm ERR! 404 'typescript@latest' is not in the npm registry.
npm ERR! 404 You should
Lambdaの明瞭な出力ログ [Python, Node.js]
#はじめに
Lambdaの出力ログは、CloudWatchLogsで確認しますが、json形式の明瞭なログ出力を書き留めます。#Python
DynamoDBの数値を取り出す際、データとしてDecimal(数値)として取り出されますが、json.dumpsを実行すると、エラーが起きました。
そのため、Decimalを取り除くロジックをつけています。`ensure_ascii=False`は、文字化け対策です。
```python
import json
from decimal import Decimal# json形式でログを出力するため、Decimalがある場合取り除く
def decimal_to_int(obj):
if isinstance(obj, Decimal):
return int(obj)def lambda_handler(event, context):
print("Received event:" + json.dumps(event, default=decimal_to_int, ensure_ascii
Node.jsでS3に画像をアップロードする。
#Node.jsで画像アップロードする。
```typescript:S3に画像アップロードのサンプル
import S3 from 'aws-sdk/clients/s3'
import fs from 'fs'const bucket = new S3({
accessKeyId: process.env.AWS_S3_BUCKET_ID,
secretAccessKey: process.env.AWS_SECRET_KEY,
})const fileContent = fs.readFileSync('./images/lisa.png')
const param: S3.Types.PutObjectRequest = {
Bucket: 'bucketName', // バケット名
Key: 'lisa.png', // 保存時の画像名
Body: fileContent,
ACL: 'public-read', // アクセスコントロール。パブリックアクセスの許可
}bucket.up
webpack4+babel7 に移行後、karma+inject-loaderが正しく動作しない
# 環境
* NPM＠7.0.14
* Node.js＠15.3.0
* webpack＠4.46.0
* babel＠7.0.0
* karma＠6.3.9
* inject-loader＠4.0.1# 事象
表題の通り。
`karma start`で実行されるテストコード内で`require('inject-loader!@/api/auth')`等、動的インポートを行おうとすると、「パス間違ってねぇか？」って言われちゃう。なぜか`inject-loader/dist!@/api/auth`として認識される。`dist`はどっから来た？
※ `'@'` は`'./src'` ディレクトリの alias として、webpack.config で指定してる。```bash:console.log
$ npm run unit> cross-env BABEL_ENV=test karma start test/unit/karma.conf --single-run
～・～・～ 中略 ～・～・～
WARNING in ./src/api/auth.js (./n
Azure Communication Services ことはじめ 2022 : 音声&ビデオ通話、チャット、Teams 会議参加機能を試す
Azure Communication Services は、リアルタイム コミュニケーション基盤となるサービスで、テキスト | 音声 | ビデオ によるコミュニケーションのハブとなり、接続やコントロールを行うアプリやサービスを SDK などを用いて容易に開発できます。また、Microsoft Teams 会議への参加 (Teams Interoperability) 機能を活用して、外部のユーザーがアカウントなどの準備なしに Teams 会議へ参加できるようになります。
今回は Azure Communication Services (以下 ACS) の [Web Calling Sample (Web 通話サンプル)](https://docs.microsoft.com/ja-jp/azure/communication-services/samples/web-calling-sample) のサンプルアプリ (Node.JS) を用いて、基本機能を試してみるまでの手順を紹介します。
[概要＆説明](https://docs.microsoft.com/ja-jp/azu
express-generator で簡単な WebAPI を作成
こちらと同じことを、express-generator で行ってみます。
[Express で簡単な WebAPI を作成](https://qiita.com/ekzemplaro/items/1aa57e199b4fed4eb729)ex01 というフォルダーで作業します。
プロジェクトの作成
```bash
npx express-generator
```依存関係をインストール
```bash
npm install
```サーバーの起動
```bash
DEBUG=ex01:* npm start
```クライアントで http://localhost:3000/users にアクセスして GET の API の動作を確認
```text
$ http http://localhost:3000/users
HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 23
Content-Type: text/html; charset=utf-8
Date: Wed, 02 Feb 2022 00:
ReactでQRコードを表示したいというお話
#はじめに
なんか最近ハードウェアとソフトウェア両方ともやってて雑食となりつつある今日この頃。
AWS資格、せめてCRFくらいは取りたいなぁと思いつつ最近はReactで色々やっております。さて、今回はReact内でQRコードを表示しようとした際にちょっとした事があったので、折角なので新しい物を導入した雑感を記録していこうかと思います。
#開発環境
- AWS EC2 t2.microインスタンス
- Amazon Linux 2 ＋ Cloud9
- Node.js 16.11.1
- React 17.0.2#事の発端
Webアプリケーションを作っていると、どうしても必要な物というのは色々出てくる。
その中で、2段階認証(俗に言うTOTP)が必要な段階になった。
あまり予算を使いたくない都合上SMSを使った認証は却下して、QRコードとAuthenticatorを利用した仕組みを導入しようとしました。
で、さー`qrcode.react`も導入したし、いざQRコードを表示！ってなった時にこんなエラーが出た訳です。```
Warning: componentWillRec
Node.jsのバージョンアップ
Nextの新規プロジェクトを作ろうとしたとき、Nodeのversionが古い！と怒られたのでメモです。
nodebrewを利用して、Node.jsをバージョンアップします。##現在のnodeのversion確認
```
$ node -v
v10.3.0
```##nodebrewをインストール
```
$ brew install nodebrew
```##インストールできたか確認
下記のように表示されればOKです
```
$ nodebrew -v
nodebrew 1.1.0
```##セットアップ
```
$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew========================================
Export a path to nodebrew:export PATH=$HOME/.nodebrew/current/bin:$PATH
==================================
PostgreSQL データをnode.jsで挿入してみる
#目次
* 目的
* 導入
* プログラムの作成
* つまづいた点
* 参考文献#1. 目的
* 前回はユーザのラインでの問い合わせに対してPostgreSQLのデータを取得し、送信してくれるようなシステムがあればいいなということで作りました。
* 今回は値を挿入するプログラムを作成していきたいと思います。* 家の温度や湿度をセンサで取得し、その値をPostgreSQLに格納する。←今回はここ
その後、家の外からでも家の中の状態をラインで把握できるといった応用例があります←前回はここ#2. 導入
* 前回の記事でユーザからのLINEメッセージに対して、適したデータをPostgreSQLから取得し、送信するといったことをpythonで実装しました。先に[そちらの記事](https://qiita.com/paupau/items/14c636469c81f4b4e9e7)をお読みいただいた方が理解がスムーズかと思います。herokuやPostgreSQLを初めて使うという方もお読みください。
※プログラムは一例として作っています。また、今回はプログラムの一部抜粋して
anyenv/envs/nodenv/node.jsの環境構築
## 事前知識
| 単語 | 意味 |
|:-----------|:------------|
| node.js |V8 JavaScriptエンジン上に構築されたJavaScript実行環境の1つ|
| nodenv|プロジェクト(ディレクトリ)ごとに、Node.jsのバージョンを管理することができるバージョン管理ツール|
| anyenv|**env系ツールのバージョンを管理することができるバージョン管理ツール|とまあ、node.jsのハージョンを管理するためにnodenvを使って、そのnodenvのバージョンを管理するのにanyenvを使うという感じです。。
## 環境
macOS Montery バージョン 12.1 (2022年2月2日現在)## コマンド表
### anyenv
| コマンド | 内容 |
|:-----------|:------------|
| anyenv envs | インストールされている**env一覧|
| anyenv version|**envごとのシェルにおける実行環境|
| anyenv version|**envごとのイ
【Nuxt】vue-chartjsの読み込みに失敗する！
> TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
こんなメッセージが出てくる。なんでやねん！グラフ出したいだけなんですけど？！
https://reffect.co.jp/vue/nuxt-js-vue-chartjs-easy-to-use
こことかを参考にやってんだけどなぁ・・・なんでこう記事では簡単に導入できてんのに、自分のときはエラーが出るんだ～！！って毎回思うｗ
### 解決の際に参考したサイト
https://zenn.dev/kigi/scraps/f8c72302c0f84e
https://stackoverflow.com/questions/66940954/why-does-nuxt-give-me-this-error-with-vue-chartjs### 解決策
####package.jsonのchart.jsのバージョンを2.9.4に書き換える
```json:package.json
"dependencies" : {
Ubuntu 20.04 LTSでnode.jsのバージョンを上げる
Ubuntu 20.04 LTSだと`apt install`ではバージョン10.19.0が当たるらしい。
```
# sudo apt install nodejs
# node -v
v10.19.0
````apt install nodejs`からの導入では、難ありなので、`npm`のインストールからやった方が良かった。
`apt install npm`で`npm`をインストールする。```
# sudo apt install npm
````npm`で`n`パッケージをインストールする。
`n`で任意のバージョンをインストールできる。
ここでは現在の安定版の最新版の`14.17.5`を指定している。```
# sudo npm install n -g
# sudo n 14.17.5
installed : v14.17.5 (with npm 6.14.14)
````n`コマンドを実行してバージョンを選択する。
ここでは先のバージョンしかインストールしていないので一つしか出ないはず。```
# sudo n
ο node/
formを用いたHTMLからMySQLへの値の挿入方法について。
#formを用いたHTMLからMySQLへの値の挿入方法
Node.jsとMySQLを用いたアプリの開発途中に少し詰まったので備忘録として書いておきます。```HTML.CSS
```
例えば、このようなformの内
Webの勉強はじめてみた その27〜モジュールごとの実装とデータベース〜
N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第3章20節〜26節です。
承認されたユーザーだけが使える匿名掲示板の作成。
気をつけたい箇所や気付いた点だけをまとめました。設計の進め方
1. システム要件の定義
2. UIの設計: ページに何をどう配置するか
3. URIの設計: パスの作り方(RESTful)
4. モジュールの設計URIとモジュール
:::note
リクエストを具体的な処理に振り分けることをルーティング、
リクエストに対し具体的な処理をする関数を リクエストハンドラという
:::サーバーを起動するもの
リクエストを処理するもの
ルーティングを行うものなど、それぞれ役割を決めて実装する。
メインとなる機能から実装していくのが良い。
処理を実装する前にそれぞれの機能などをコメントする。覚えておきたいこと
:::note
テンプレートエンジンなどを使う場合、のちにhtmlになるものはviewsディレクトリに格納する。
:::以下はPOSTされた時の処理
```java
Node.jsでのグローバル変数の記述法について。
#Node.jsでのグローバル変数記述法について。
Node.jsを用いたアプリの開発中に少し詰まったので備忘録として書いておきます。JavaScriptでは変数の宣言は`var name = value`と記述するのですが、Node.jsでは`var name = value`と記述するとローカル変数とみなされてしまいます。
#解決法
どうやら`global.variable_name = value`という形で変数を宣言することでグローバル変数として扱えるようです。
AWS Lambda Layer(レイヤー)を作成する方法
## Lambda Layerとは
複数のLambda関数に、共通の外部ライブラリやビジネスロジックを追加できる仕組みです。
1つのLambda関数に、5つまでLayerを追加できます。
しかし、Layerのサイズには、制限があります。## Lambda Layerを作成する方法
### nodejsディレクトリを作成する
ディレクトリ名は必ず**nodejs**にする必要があります。
(それ以外の名前では、ダメだと思います。)### 必要なライブラリをインストールする
```bash
npm init
npm install (必要なライブラリ)
```
`npm init`と`npm install (必要なライブラリ)`を行い、`node_modules`ディレクトリが作成され、中にインストールしたものが入っていれば大丈夫です。### zipにしてアップロードする
上記で作成した`nodejs`ディレクトリをzip形式にして、アップロードします。
アップロードする場所は、`AWSのコンソール`→`Lambda`→`レイヤー`→`レイヤーの作成`の順に進むと、アップロー
【後編】OAuth2.0の勉強でAuthorization Code Grantをクライアント側として体感してみた
## はじめに
本記事は「【前編】OAuth2.0の勉強でAuthorization Code Grantをクライアント側として体感してみた」の後編にあたる記事です。まずは前編として[【前編】OAuth2.0の勉強でAuthorization Code Grantをクライアント側として体感してみた](https://qiita.com/yuta-katayama-23/items/b074e85504fc05ac76dc)を参照ください。以下、前編の「はじめに」に書いた内容と同じです。
==============================================================
認証と認可に関しては、OpenID Connectがデファクトな状況だと思われる。今回はOAuth2.0を拡張した仕様であるOpenID Connectで定義されている、認可のフローであるAuthorization Code Grantについて、認可をもらう側（クライアント側）としてフローを実行する事で、理解を深めてみたいと思う。流れとしては、
1. 認可エンドポイン
【前編】OAuth2.0の勉強でAuthorization Code Grantをクライアント側として体感してみた
## はじめに
認証と認可に関しては、OpenID Connectがデファクトな状況だと思われる。今回はOAuth2.0を拡張した仕様であるOpenID Connectで定義されている、認可のフローであるAuthorization Code Grantについて、認可をもらう側（クライアント側）としてフローを実行する事で、理解を深めてみたいと思う。流れとしては、
1. 認可エンドポイントへ認可リクエスト
1. 認証（今回はGoogleのOpenID Connectを使うので、Googleの認証）と認可
1. リダイレクトするので、それをserverで受け取りトークンエンドポイントへアクセストークンをリクエストの中の、1と3の部分を実際に実装する。
※今回はあえてCSRF対策やPKCE対策に必要になるパラメータを省略している。CSRF対策やPKCE対策については今後記事を執筆予定。※今回、Google Cloud PlatformでGoogle APIsの設定をしてAuthorization Code Flowを体感する。その際料金はかからない想定で本記事は書いている（無料枠
pnpmが`SKIP_PREFLIGHT_CHECK=true`を求めてくる場合の対処法
⚠️この情報は本記事の投稿時点で有効であったものです。各自エラーメッセージやissueを確認してください。⚠️
## エラーメッセージの例
```
❯ pnpm build> (プロジェクト名)@0.1.0 build /home/matoruru/Code/(省略)
> craco buildThere might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.44.2"
Don't try to install it manually: your package manager does it automatically.
However, a different v
