- 1. PM2を使用してNode.jsのExpressアプリケーションを管理する方法
- 2. 今の今まで知らなかった Server-Sent Events を使ってみた
- 3. Next.js App RouterでPLATEAUを利用する
- 4. Expressでejsを設定する
- 5. Node.js 22の新機能を紹介
- 6. Node.jsをWSL2のUbuntu 22.04にインストールする手順
- 7. Node.jsってなに?
- 8. LambdaのGETリクエストとNode.js Expressでのレスポンス
- 9. node.jsでmariaDBを使用するためのコーディング参考程度
- 10. Node.jsでexpressとejsを使用しウェブページを作成(参考程度
- 11. 任意のサイズのダミー画像を作成するCLIツールを作ろう
- 12. Webセキュリティ勉強会 Part-2
- 13. Webセキュリティ勉強会 Part-1
- 14. 【バージョンマネージャ】asdfが便利すぎる
- 15. yarn、npm、npx の違いについて
- 16. 【React/Tailwind】YouTube動画を埋め込むためのコンポーネントを作ってみる(レスポンシブ)
- 17. 法律相談できるLINE bot「LegalAI」をリリースしました
- 18. NestJSについてキャッチアップしてみた
- 19. お名前.com のレンタルサーバーでLaravelを動かすメモ
- 20. Ubuntu 24.04 LTSにすると多分マストドンv4.2ブランチじゃないと上手く動かないんじゃねって話
PM2を使用してNode.jsのExpressアプリケーションを管理する方法
Node.jsのExpressフレームワークを使用したアプリケーションは、その効率と拡張性で知られていますが、運用環境ではアプリケーションの管理と維持が不可欠です。ここでは、プロセスマネージャーであるPM2を用いてExpressアプリケーションを管理する方法について詳しく説明します。PM2はアプリケーションの自動再起動、ログ管理、負荷分散などを簡単に行うことができるツールです。Ubuntu環境でのログローテーション設定も合わせて解説します。
## 前提条件
– Node.jsがインストールされていること
– Expressプロジェクトが作成済みで、プロジェクトのルートディレクトリで作業が行えること
– Ubuntuシステムで作業すること## 1. PM2のインストール
PM2はnpmを通じて簡単にインストールできます。グローバルにインストールすることで、どのプロジェクトからもPM2コマンドを利用できるようになります。
“`bash
npm install pm2@latest -g
“`## 2. ExpressアプリケーションのPM2での起動
PM2を使用してE
今の今まで知らなかった Server-Sent Events を使ってみた
先日、積読になったまま放置していた技術書に目を通していたら **Server-Sent Events(以下、SSE)** に関する記事を見かけたので、実際にコードを書いて挙動を確認してみました。
**SSE** を使うと、サーバからクライアントへのメッセージプッシュが可能になります。
恥ずかしながら、筆者は SSE について今の今まで知らなかったのですが、「**W3C Working Draft 23 April 2009**」というページを見つけましたので、15年前には登場していたようです。
https://www.w3.org/TR/2009/WD-eventsource-20090423/
SSE の特徴(や欠点)については、[こちらの記事](https://qiita.com/h_tyokinuhata/items/809bdb66f8da6dd53bb6#sse)の SSE の項に、とても分かりやすくまとめてありましたので、一読されることをお勧めします。
https://qiita.com/h_tyokinuhata/items/809bdb66f8da6dd53b
Next.js App RouterでPLATEAUを利用する
# はじめに
PLATEAUを使ったwebXRアプリ開発のために、Next.jsのApp Routerを使おうと思ったのですが、これまでに使っている記事を見受けられなかったので、備忘録的に残しておきます基本的には以下の記事の通りです
より詳細な実装について知りたい場合にはそちらの記事をご覧くださいhttps://www.mlit.go.jp/plateau/learning/tpc12-2/
:::note info
今回のプロジェクトではPWAとwebXRを導入しているので、それらについての記載が混ざっているかもしれません
:::# デモ
こんな感じで視点がくるくる移動できるようなものを作ります
Node.js 22の新機能を紹介
Node.js 22が2024年4月24日にリリースされました。今回のリリースには多くの新機能や改善が含まれています。この記事では、Node.js 22の主な変更点を見ていきます。
https://nodejs.org/en/blog/announcements/v22-release-announce
### ネイティブWebSocketクライアント
Node.js 22では、ネイティブのWebSocketクライアントがデフォルトで有効になりました。これにより、サードパーティのライブラリを使用せずにWebSocketを簡単に利用できるようになります。
### 新しいJavaScriptメソッド
`Array.fromAsync`やSetメソッドの強化など、いくつかの新しいJavaScriptメソッドが追加されました。
`Array.fromAsync`の使い方例:
“`javascript
async function* getStream() {
yield 1;
yield 2;
yield 3;
}// 従来
{
const values = [];
Node.jsをWSL2のUbuntu 22.04にインストールする手順
WSL2上のUbuntu 22.04にNode.jsのバージョン20、Node.jsのパッケージマネージャーであるYarnをインストールする手順を説明します。Node.jsのバージョン管理には`nvm`(Node Version Manager)を使用し、特定のバージョンを簡単に切り替えられるようにします。
## 前提条件
– Windows 10 または 11 がインストールされていること。
– WSL2が有効になっており、Ubuntu 22.04がインストールされていること。## 手順1: WSL2とUbuntuの準備
Windows上でWSL2が有効化されているか確認し、Ubuntu 22.04をインストールします。これはMicrosoftの公式ドキュメントに従って行えます。
## 手順2: 必要なパッケージのインストール
Ubuntuを起動し、次のコマンドを実行して必要なパッケージをインストールします。
“`bash
sudo apt update && sudo apt install curl build-essential
“`これにより、`cur
Node.jsってなに?
## Node.jsってなに?
ブラウザ上での制限された環境でしか動かなかったJavaScriptを、PythonやRubyのようにパソコン上で動かせるのが
「 **Node.js**」になります。Node.jsはWebサーバでもなく、Webフレームワークでもありません。
たんなる **JavaScript実行環境** になります。
Node.jsをインストールすると**node.exe** ができ実行できます。
Node.jsではJavaScriptでOSの機能にアクセスするプログラムを組むこともできます。
ブラウザ上で動作していたときはできなかった自由なファイルの書き込みやネットワーク通信なども行うことができます。
## Node.jsはサーバサイドの環境?
Node.jsは** サーバサイドの環境で動く** などとよく書かれています。
正しくは、**大量の同時接続をさばけるネットワークアプリケーションの構築** を目的に作られたJavaScript環境になります。
現在のWeb業界ではNode.jsは ** クライアントのJavaScriptの開発環境
LambdaのGETリクエストとNode.js Expressでのレスポンス
LambdaでのGETリクエストの自分用の覚書です。
LamdaでGETリクエストをすると、Node.jsで書かれたサーバーから「hello world」という文字を返すということをやります。
### レスポンス側 (Node.js)
フレームワークはexpressを使用
“` index.js
const express = require(‘express’);
const app = express();app.get(‘/hello’, function(req, res) {
res.send(‘hello world’)
}
)“`
### リクエスト側 (Python)
“` lambda_function.py
import urllib.requestdef lambda_handler(event, context):
hello = get_hello()
print(hello)def get_hello():
request = urllib.request.R
node.jsでmariaDBを使用するためのコーディング参考程度
## mariadbの導入
mariaDBを使用するためにmariadbをインストールする
#### npmの場合
“`
npm install mariadb
“`#### yarnの場合
“`
yarn add mariadb
“`# javascriptでの記述
## パッケージの読み込み
“`javascript
const mariadb = require(‘mariadb’);
“`## DTBへの接続するための設定処理
“`javascript
const pool = mariadb.createPool({
host: ‘localhost’,
user: ”, //データーベースを操作するユーザー名を記述する
password: ”, //操作するユーザーのパスワードを記述する
database: ”, //操作するデーターベース名を記述
// 同時接続数の制限(任意)をかけるために記述
//connection
Node.jsでexpressとejsを使用しウェブページを作成(参考程度
# 使用したパッケージ
### 1.express
インストールコマンドnpm
“`
npm install express
“`yarn
“`
yarn add express
“`### 2.ejs
インストールコマンド
npm“`
npm install ejs
“`yarn
“`
yarn add ejs
“`
# サイトのファイル構成
– publicフォルダー
cssやimgなどを置くフォルダー
– views
app.jsでアクセスがあったページのejsを置く場所
– app.js
サイトへアクセスがあったページへ移動処理など“`
sample/
┣━ public/
┃ ┣━ css/
┃ ┗━ img/
┣━ views/
┃ ┣━ top.ejs
┃ ┗━ index.ejs
┣━ app.js
etc“`
# ページ表示の処理
app.js ファイルで行う### expressを使用するためapp.js
任意のサイズのダミー画像を作成するCLIツールを作ろう
# はじめに
webサービス開発をしていると、「仮の画像を一旦入れておきたい」みたいなシーンありますよね。例えばweb上では、[株式会社ソフテル](https://www.softel.co.jp/)様が[placehold.jp](https://placehold.jp/)というツールを提供されています。
https://placehold.jp/
似たようなことがローカル環境でもできたら開発が便利になるのではと思いました。
# 結論
作ったのでよかったら使ってみてください。
https://www.npmjs.com/package/placeholder-craft-cli# 使い方
以下、[Node.js](https://nodejs.org/en/download)がインストールされていることを前提としています。
## インストール
“`sh
npm install -g placeholder-craft-cli
“`## 画像を生成
“`sh
phcraft –width 500 –height 500 –filename hoge.pn
Webセキュリティ勉強会 Part-2
[Webセキュリティ勉強会 Part-1]:https://qiita.com/megmogmog1965/items/317fe05770006c4cb27a
[OWASP Juice Shop]:https://owasp.org/www-project-juice-shop/
[dangerouslySetInnerHTML]:https://ja.react.dev/reference/react-dom/components/common#common-props
[javascript: scheme]:https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%A0%E3%81%BE%E3%81%9F%E3%81%AF%E3%83%97%E3%83%AD%E3%83%88%E3%82%B3%E3%83%AB
[CSP (Content-Security-Policy)]:htt
Webセキュリティ勉強会 Part-1
[OWASP Juice Shop]:https://owasp.org/www-project-juice-shop/
[Volta]:https://volta.sh/
[自作の脆弱性サイト]:https://vulnerable-web-site.vercel.app/
[Webセキュリティ勉強会 Part-2]:https://qiita.com/megmogmog1965/items/f7dbb541242baa842563# これは何?
社内で Web アプリケーション開発におけるセキュリティ知識の向上を目的としたハンズオン勉強会を今年始めに開催しました。その際に作成した資料です。
Day 1 (2時間) と Day 2 (2時間) の、合計4時間構成としています。
:::note warn
本書では、解き方等は答えになっちゃうので敢えて書いてありません。
:::# コンテンツ
基本的には [OWASP Juice Shop] を題材にピックアップしてます。
一部の問題はハンズオンでは難しかったので [自作の脆弱性サイト] で再現&実践しています。
|
【バージョンマネージャ】asdfが便利すぎる
## はじめに
**asdf**というバージョンマネージャがめちゃくちゃ便利なので紹介します。https://asdf-vm.com/
**`pyenv`とか`nodenv`とか、言語ごとのバージョンマネージャ入れるの面倒だよ〜〜ん**
って人におすすめです。
asdf単体でさまざまなパッケージのインストール〜バージョン管理が行えます。asdfの使った感じ
“`sh
$ asdf plugin add python
$ asdf install python latest
$ asdf local python latest
$ python -V
Python 3.12.3$ asdf install python 3.9.9
$ asdf local python 3.9.9
$ python -V
Python 3.9.9$ asdf list python
3.12.3
*3.9.9
“`
## 目次
[1. インストール](#1-インストール)
[2. pluginの追加
yarn、npm、npx の違いについて
# yarn、npm、npx の違い
## はじめに
Node.js を学ぶ過程で、”yarn”、”npm”、”npx”という用語にたびたび出逢います。これらは JavaScript の開発において頻繁に使われる重要なツールですが、その機能や役割が初学者には混同しやすいものです。本記事では、これらのツールがどのように異なり、どのように役に立つのかを解説したいと思います。
## yarn
– **タイプ**: パッケージマネージャー(ソフトウェアのパッケージとその依存関係を管理)
– **目的**: Node.js プロジェクトの依存関係の管理
– **特徴**:
– Facebook(meta)によって開発
– キャッシングと並列処理により高速かつ効率的に動作
– `yarn.lock` を使用してインストールされたパッケージのバージョンを固定
– **コマンド集(一部)**:“`sh
yarn init # 新しいプロジェクトの package.json ファイルを作成
yarn install #
【React/Tailwind】YouTube動画を埋め込むためのコンポーネントを作ってみる(レスポンシブ)
## 概要
ReactでYouTube動画を埋め込むためのカスタムコンポーネントを作成してみました。スタイリングには、Tailwind CSSを使用し、レスポンシブに対応させました。## コンポーネントの機能
– YouTube動画の埋め込み
– タイトルの表示
– カスタムスタイリング(Tailwind CSSを採用し、レスポンシブに対応)
– 動画情報のURLまたは動画IDの両方に対応**対応している動画のURL形式について**
“`
https://www.youtube.com/watch?v=VIDEO_ID 標準形式のURL
https://youtu.be/VIDEO_ID 短縮URLhttps://youtube.com/watch?v=VIDEO_ID%E3%80%80%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E3%83%97%E3%83%AC%E3%83%BC%E3%83%A4%E3%83%BC%E3%81%AEURL“`
## デモ
https://react-youtube-embed.vercel.app/
## 使用例
### Propsの説明
| プロパティ名 | 説明
法律相談できるLINE bot「LegalAI」をリリースしました
# LegalAIとは
残業やパワハラの問題を抱えているけど、法的な知識がない人が法律相談できるLINE botを開発しました。
友達追加はこちら↓
https://lin.ee/KmWvcGp
![ScreenShot01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780785/213af21d-98d8-4717-8494-7686caacd55b.jpeg)# 技術
インフラ:firebase
サーバー:Node.js
AI:openai(BaseModel:gpt-3.5)# 開発の流れ
firebase + Node.jsでLINE botを作る記事は山程あるので、割愛。初めてopenaiのfine-tuningと作ったプログラムとの連携を行ったので、そちらをメインで書きます。
## openaiのfine-tuning
最初にBaseModelを選定します。> https://platform.openai.com/docs/guides/fine-tuning
>
NestJSについてキャッチアップしてみた
案件で絶賛対応中になります。
初めて触るため、備忘がてらキャッチアップした内容を書いてみようと思います。# NestJSとは
>Nest(NestJS)は、効率的でスケーラブルなNode.jsサーバーサイドアプリケーションを構築するためのフレームワークです。プログレッシブJavaScriptを使用し、TypeScriptで構築され、TypeScriptを完全にサポートし(それでも開発者は純粋なJavaScriptでコーディングできる)、OOP(オブジェクト指向プログラミング)、FP(関数型プログラミング)、FRP(関数型反応プログラミング)の要素を組み合わせている。https://docs.nestjs.com/
Node.jsのフレームワークということは理解できました。
今度はNode.jsについてサクッと調査します。# Node.jsとは
>Node.js は、オープンソースのクロスプラットフォームの JavaScript ランタイム環境です。ほぼあらゆる種類のプロジェクトで人気のあるツールです。https://nodejs.org/en/learn/getti
お名前.com のレンタルサーバーでLaravelを動かすメモ
## 対象
* RSプランを契約している (重要)
* CLI を扱える
* SSH を行なったことがある
* レンタルサーバ系のコントロールパネルを扱ったことがある
* PHP 8.1## 概要
1. コントロールパネルから SSH ログインできるようにする
1. パソコンから SSH ログインする
1. composer をインストールする
1. node をインストールする
1. プロジェクトフォルダを作成する
1. シンボリックリンクを貼る
1. .htaccess を修正する## SSH できるようにする
### Key の登録
(登録済みの場合はスキップ)
`サーバー` > `SSH` に移動し `SSH Key を追加` する。### 自動生成
秘密鍵がダウンロードされる (`Key名.pem`)。
該当ファイルを `~/.ssh` フォルダに移動して、パーミッションを `600` に変更する### インポート
ローカルで自分で 公開鍵/秘密鍵 を生成する (作り方は各自調べる)。
この時、鍵が `~/.ssh` 以外に保存されている場合は、 `~/.s
Ubuntu 24.04 LTSにすると多分マストドンv4.2ブランチじゃないと上手く動かないんじゃねって話
## ポイントリリース前に24.04 LTSを入れました
nodejsが18以上になっていました。動かしていたのがv4.1ブランチだったので象バンバンになりました。
nodejsだけの問題だけだと思っていたらそうでもない様子。postgreSQLも10がコケていました。Mastodonのサービスは動いている。
めんどくさそうです。
## v4.2ブランチにしてみました
rubyも3.2.3をいれて、さあ!
やっぱり象バンバン。DB動いてないからそらそうか。
## ログを見る
postgreSQL10のログを見るとTimezoneが「Japan」になっていてむーりーってなって落ちている。そんな書き方は無い!
「Asia/Tokyo」にしたところ動いて、DBがマイグレーションできて動きました。
## 時間がかかりました
DBが動いてないというのに気づくのが遅くてやたら時間だけかかりました。ログを見るというのは大切ですね。
v3ブランチとv4.0ブランチはEoLになったのでUbuntu 24.04 LTSにアップグレードするぞという人たちはもりもりDBマイグレーション