React.js&Next.jsの練習
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b3
で、APIの作成の所でデプロイしようとしたら動かない。
そりゃそうか。Next.jsのサーバ機能を利用していたので、Apacheだけだと動かない。
apach next.js 連携、でググるとNext.js専用の方法はあるが、
https://qiita.com/thanatar/items/a77d25bf28459a69e2da
https://zenn.dev/peg/articles/26af27b7b66aa3 (npm run dev start 違い、でググった)
その都度npm_run_startでも行けそうだが、デプロイ先では1個で共有か使い回したいし、
できれば、Next.js専用でない方がいいが、Next.js専用でないと動かないのか?。
ChatGPTに聞いた:
import { NextResponse } from “next/server”;
export async function GET(req) {
\ return NextResponse.json({ name: ‘John Doe’ })
}
このコードは、Node.jsではなく、Next.jsというReactフレームワークの一部としてのサーバーサイド機能を利用しています。Next.jsは、Reactアプリケーションを構築するためのフレームワークであり、サーバーサイドレンダリングやAPIエンドポイントの作成など、さまざまな機能を提供します。上記のコードは、Next.jsのAPIルート(/pages/apiディレクトリ内のファイル)で使用される標準的な記法です。Node.js自体には NextResponse などのNext.js特有の機能は含まれていません。
next.js express いらない、がヒットする:
https://dorian-51069.medium.com/nextjs%E3%81%AEssr%E3%81%ABexpress%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%AE%E3%81%8B-c022295fc078
https://zenn.dev/peg/articles/1878a6d6661295
(下の方で apach node.js 連携、でググるとExpressの例がヒットするが、Node.jsのJS解析エンジン
は要るがAPI部分はNext.js専用でないとダメなんだろ。がしかしnpm_run_startが必要となると、1つ
のプロジェクト当たり約580MBが必要になるな~。node_modulesをリンクで使い回しできるか~?)
Node.jsのサーバ機能を利用するとして、Node.jsだけで動かすというのもアリかもしれないが、
PHPはApacheと連携させている https://seesaawiki.jp/lifewithslackzaurus_15_0/d/Apache%a4%ce%c0%df%c4%ea
ので、Node.jsとの連携も調べてみる。
apach node.js 違い、でググった:
https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb
https://zenn.dev/no4_dev/articles/3c7df9769845ddd89915
apach node.js 連携、でググった:
https://rensaba-programer.jp/2023/08/12/node-js%E3%82%92apache%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/
そのためApacheを使う必要なく、Node.jsのみでhttpサーバーを公開する事が可能なのですが、現実問題、SSL(TLS)対応や静的コンテンツの配信を行う際にはNginxやApacheをリバースプロキシとして間に挟んだ方が手軽ですし、パフォーマンスの向上が望めます。
https://qiita.com/someone-said-so/items/ef7ff1751afb72bb6d6e
https://qiita.com/someone-said-so/items/ed0aafee065efcbc3b57
https://engineer-ninaritai.com/aws-lightsail/#npm_run_start
https://qiita.com/nakamura3333/items/b3531aa5e2a92f9f1cff
https://qiita.com/tutuz/items/048b8f7cbfaae649d137
https://qiita.com/niwasawa/items/c66cc35b52c1445d0157
$ sudo sh /etc/rc.d/rc.httpd stop
$ sudo nvi /etc/httpd/httpd.conf
LoadModule proxy_module lib64/httpd/modules/mod_proxy.so
LoadModule proxy_http_module lib64/httpd/modules/mod_proxy_http.so
$ sudo nvi /etc/extra/httpd-vhosts.conf
<VirtualHost localhost:443>
\ ServerAdmin oldcygwin.web.fc2.com
\ DocumentRoot /myproj/oldcygwin
\ ServerName oldcygwin.web.fc2.com
\ ServerAlias www.oldcygwin.web.fc2.com
\ ProxyRequests Off
\ SSLEngine on
\ SSLCertificateFile /etc/httpd/server.crt
\ SSLCertificateKeyFile /etc/httpd/server.key
\ ProxyPass /practice300/practice389/ http://localhost:3000/
\ ProxyPassReverse /practice300/practice389/ http://localhost:3000/
\ ErrorLog /var/log/httpd/oldcygwin.web.fc2.com-error_log
\ CustomLog /var/log/httpd/oldcygwin.web.fc2.com-access_log common
</VirtualHost>
$ sudo sh /etc/rc.d/rc.httpd start
$ cd /myproj/oldcygwin/practice300/practice389
$ npm run dev
(この状態で、ブラウザから/practice300/practice389/api/helloにアクセスするとdataが見れる)
(npm run dev とやるとdefで localhost:3000 にアクセスするらしい。変更は PORT=4000 npm run dev)
$ npm run build
$ npm run start
Error: “next start” does not work with “output: export” configuration. Use “npx serve@latest out” instead.
$ npx serve@latest out
(この状態で、/practice300/practice389/api/helloにアクセスすると404になる。そもそも
buildした時に、out/以下にapi/ができてない。調査中。React/Goをやりたくなったので、ここで
一旦保留する)
JSで書くAPI部分はググるとExpressや標準のサンプルがヒットするし、せっかくなので、Next.jsの
書き方もExpressの所に書いておく事にした。
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf3%2e2
Webサーバソフトのシェアについて、GoやNode.jsを入れたらnginxやapacheのシェアはかなり減るのではないか? 2024.07
ChatGPT
なぜシェアが大幅に減らないのか
1.役割の違い: nginxやApacheは、リバースプロキシ、静的コンテンツの配信、ロードバランサとしての役割が大きい。GoやNode.jsはアプリケーションのサーバーサイドロジックを実行するためのプラットフォームであり、必ずしもリバースプロキシや静的コンテンツ配信を担うものではない。
2.互換性: 多くのケースで、nginxやApacheをリバースプロキシとして利用し、その背後にGoやNode.jsのアプリケーションを配置する構成が一般的。これにより、既存のインフラを活かしつつ新しい技術を導入できる。
3.パフォーマンスと機能の補完: nginxやApacheは高いパフォーマンスと豊富な機能セットを提供し続けており、多くのユーザーはこれを必要としている。GoやNode.jsのアプリケーションも、nginxやApacheをフロントエンドとして利用することで、セキュリティやパフォーマンスのメリットを享受できる。
PHP+Apcaheで動作していた問い合わせFormページを、Node.js+Apcaheに置き換えようとしているが、PHP+ApcaheではApacheの設定ファイルを編集していたはずだが、Node.js+ApcaheでもApacheの設定ファイルの編集が必要か? 2024.08
Node.js + Apacheでも、Apacheの設定ファイルを編集する必要があります。Node.jsアプリケーションをApache経由で動作させるために、一般的には以下の2つの方法のどちらかを選択します。
1. リバースプロキシ設定
Apacheをリバースプロキシとして設定し、Node.jsアプリケーションにリクエストを転送する方法です。この設定を行うためには、Apacheの設定ファイル(httpd.confやsites-availableの中の仮想ホスト設定ファイル)に以下のような設定を追加します。
\<VirtualHost *:80>
\ ServerName yourdomain.com
\
\ ProxyRequests Off
\ ProxyPass / http://localhost:3000/
\ ProxyPassReverse / http://localhost:3000/
\
\ <Proxy *>
\ Order deny,allow
\ Allow from all
\ </Proxy>
\</VirtualHost>
ここで、localhost:3000はNode.jsアプリケーションが動作しているポートです。
設定の説明
・ProxyPass / http://localhost:3000/: すべてのリクエストをlocalhost:3000で動作しているバックエンドのNode.jsアプリケーションに転送します。
・ProxyPassReverse / http://localhost:3000/: バックエンドサーバーからのレスポンスがクライアントに返される際に、ヘッダー情報を適切に変換します。
・ProxyRequests Off: リバースプロキシ機能を有効にし、プロキシとしての動作を許可します。
この設定により、クライアントはApacheサーバーにアクセスし、そのリクエストは指定されたバックエンドサーバーに転送されるようになります。
2. CGIモードでの実行
Node.jsスクリプトをCGIとしてApacheで実行する方法です。ただし、この方法は一般的には推奨されません。Node.jsアプリケーションは単一プロセスとして実行されることを前提に設計されており、CGIモードでの実行はパフォーマンスに問題が生じる可能性があるためです。
推奨されるアプローチ
Node.jsアプリケーションをリバースプロキシで運用するのが一般的で、パフォーマンスや拡張性に優れています。Apacheのリバースプロキシモジュール(mod_proxy)を有効にして、Node.jsアプリケーションにリクエストを転送するように設定してください。
このように、Node.jsアプリケーションをApacheでホスティングする際は、Apacheの設定ファイルの編集が必要です。
\
よく見ると上の方のNext.jsで、リバースプロキシをやろうとしてた。当時は意味が分かってなかった可能性
あるなぁ。上との合せ技でうまくいったのでそのうち戻るか。やっぱNext.jsの前にNode.jsが正解だったか。
Next.jsの前に、Node.jsを学習した方がいいように思うのだが、どう思う?
Node.jsを先に学習するのは良い考えだと思います。Next.jsはReactをベースにしたフレームワークであり、Node.jsの上で動作しています。そのため、Node.jsの基本的な概念や機能(例えば、サーバーサイドプログラミング、ファイルシステムの操作、非同期処理など)を理解しておくと、Next.jsを使いこなす際に役立ちます。
具体的には、以下のようなNode.jsの知識がNext.jsの学習に役立ちます:
・サーバーサイドJavaScript: Next.jsはサーバーサイドレンダリングをサポートしているので、Node.jsでのサーバーサイド開発の経験が役立ちます。
・Express.jsやその他のミドルウェア: Next.jsでもカスタムサーバーを構築する際に、Express.jsなどのミドルウェアを使用することがあります。
・非同期処理: 非同期処理の基本(Promises、async/awaitなど)は、APIの呼び出しやデータのフェッチなどで重要です。
・npmとモジュール管理: Node.jsでのパッケージ管理やモジュールの扱い方は、Next.jsプロジェクトを構築・管理する際に欠かせません。
Node.jsをしっかり学んでおくことで、Next.jsを学び始めたときにフレームワークの背後にある技術を理解しやすくなり、問題解決がよりスムーズになるでしょう。
\
感想:next.jsの前にnode.jsを学習した方がいい、でググった:
【感想】Next.js は手に余るから初心者に推奨できない
https://qiita.com/tomy0610/items/f07d586c08a0a2aadb01
/*************************************************************************************/
process とは? (ChatGPT) (2025.01)
`process` は、**Node.js の組み込みオブジェクト**の一つで、現在実行中の Node.js プロセスに関する情報を提供し、操作を行うためのインターフェースを提供します。
このオブジェクトは、Node.js が起動するたびに自動的に生成され、`require()` を使わずにどこからでもアクセスできます。`process` を使うと、環境変数や標準入出力(stdin, stdout)、コマンドライン引数などを操作できます。
### **主な用途**
1. **プロセス情報の取得**
\ – 環境変数(`process.env`)
\ – 現在の作業ディレクトリ(`process.cwd()`)
\ – コマンドライン引数(`process.argv`)
2. **プロセスの制御**
\ – プロセスを終了する(`process.exit()`)
\ – シグナルを送信する(例: `process.kill()`)
3. **標準入出力の操作**
\ – 標準出力(`process.stdout`)
\ – 標準エラー出力(`process.stderr`)
\ – 標準入力(`process.stdin`)
4. **イベント駆動**
\ – プロセス終了時のイベントハンドリング(例: `process.on(‘exit’, callback)`)
\
### **主なプロパティとメソッド**
#### **1. `process.env`**
現在のプロセスの環境変数を表します。環境変数はオブジェクトとして提供されます。
\“`javascript
\console.log(process.env.NODE_ENV); // “development” や “production” など
#### **2. `process.argv`**
コマンドライン引数を配列として取得します。最初の2つの要素は Node.js 実行パスとスクリプトのパスです。
\“`javascript
// コマンド: node script.js arg1 arg2
\console.log(process.argv);
// 出力: [ ‘/path/to/node’, ‘/path/to/script.js’, ‘arg1’, ‘arg2’ ]
#### **3. `process.cwd()`**
現在の作業ディレクトリを取得します。
\“`javascript
\console.log(process.cwd()); // 現在のディレクトリパス
#### **4. `process.exit([code])`**
現在のプロセスを終了します。引数 `code` を指定すると、終了コードを設定できます。
\“`javascript
\process.exit(0); // 正常終了
\process.exit(1); // エラー終了
#### **5. 標準入出力**
\- **`process.stdout.write()`**: 標準出力にデータを書き込む。
\- **`process.stderr.write()`**: 標準エラー出力にデータを書き込む。
\- **`process.stdin`**: 標準入力からデータを読み取る。
\“`javascript
\process.stdout.write(‘Hello, stdout!\n’);
\process.stderr.write(‘This is an error message!\n’);
// 標準入力からデータを受け取る例
\process.stdin.on(‘data’, (data) => {
\ console.log(`You typed: ${data}`);
\});
#### **6. `process.on()`**
プロセスイベントを監視します。たとえば、プロセス終了時や例外発生時に特定の処理を実行できます。
\“`javascript
\process.on(‘exit’, (code) => {
\ console.log(`Process exited with code: ${code}`);
\});
\process.on(‘uncaughtException’, (err) => {
\ console.error(‘Unhandled exception:’, err);
\});
\
### **具体例**
#### **環境変数を利用した設定**
\“`javascript
\if (process.env.NODE_ENV === ‘production’) {
\ console.log(‘Running in production mode’);
\} else {
\ console.log(‘Running in development mode’);
\}
#### **簡易 CLI アプリケーション**
\“`javascript
\const args = process.argv.slice(2); // 引数を取得
\if (args.includes(‘–help’)) {
\ console.log(‘Usage: node app.js [options]’);
\ console.log(‘–help: Show help’);
\ console.log(‘–version: Show version’);
\} else if (args.includes(‘–version’)) {
\ console.log(‘App version: 1.0.0’);
\} else {
\ console.log(‘Unknown option’);
\}
### **まとめ**
`process` は、Node.js アプリケーションを実行する環境を制御・操作するための強力なツールです。
環境変数や標準入出力を操作したり、コマンドライン引数を処理する場合など、幅広いシナリオで役立ちます。
package.jsonの、”devDependencies”: {…} に、”process”: “^0.11.10″, とあるが、上のprocessで合っているか? (ChatGPT)
`”process”: “^0.11.10″` として `devDependencies` にリストされている場合、これは **Node.js の組み込みオブジェクトである `process`** とは異なるものです。代わりに、これは **npm パッケージとしての `process`** を指します。
### **npm パッケージ `process` とは?**
npm の `process` パッケージは、**Node.js の `process` オブジェクトをブラウザ環境でエミュレート**するために作られたものです。
ブラウザは Node.js と異なり、`process` オブジェクトをネイティブで提供しないため、このパッケージを使って Node.js と同様のインターフェースを提供します。
### **なぜ `process` パッケージを使うのか?**
主に以下のような状況で使われます。
1. **ブラウザ向けのバンドラー**
\ – Webpack や Browserify などで、Node.js コードをブラウザ用に変換する際に、`process` が必要になる場合があります。
\ – 例: `process.env.NODE_ENV` を参照して環境ごとの設定を分けるコードが動作するようにする。
2. **クロスプラットフォーム開発**
\ – サーバーサイド(Node.js)とクライアントサイド(ブラウザ)で同じコードを使いたい場合、`process` を利用する部分がそのままブラウザ上でも動くようにする。
### **バージョン `0.11.10` の機能**
このバージョンの `process` パッケージは、以下のような基本機能を提供します。
\- `process.env`
環境変数オブジェクトをエミュレートします。
ただし、ブラウザ環境では環境変数は明示的に埋め込む必要があります(例: Webpack の DefinePlugin など)。
\- `process.nextTick()`
非同期処理を実現するための Node.js と互換性のあるメソッド。
\- その他、Node.js の `process` に近い API を模倣。
### **結論**
`”process”: “^0.11.10″` と `devDependencies` に記載されている場合、それは **npm パッケージとしての `process`** を指します。
Node.js の組み込みオブジェクトである `process` とは直接的に同じものではありませんが、**ブラウザ環境で Node.js のような挙動を再現する**ために使われます。
Node.js の組み込みオブジェクトである `process` は、自動で提供されるため、`package.json` に明示的に記載する必要はありません。
/*************************************************************************************/
参考情報:
node.js レンタルサーバ lolipop、でググった:
https://unicorn-blog.jp/archives/22438
https://support.mc.lolipop.jp/hc/ja/articles/360001503407–Node-js-Koa-js-%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9FWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BD%9C%E6%88%90
(sshが使えればいいならスタンダードでも行けるのでは?)
https://www.subsqu.com/ja/articles/11253819646661be3300006e/
node.js レンタルサーバ FC2、でググった:
(残念、FC2には無さそうだ)
\
Apacheにて、リバースプロキシとは何か?: 2024.08
リバースプロキシとは、クライアントからのリクエストを受け取り、それを適切なバックエンドサーバーに転送し、バックエンドサーバーからのレスポンスをクライアントに返す役割を担うサーバーのことです。Apacheサーバーをリバースプロキシとして使用する場合、Apacheはフロントエンドのゲートウェイとして機能し、クライアントはバックエンドサーバーに直接アクセスすることなく、リバースプロキシを介して間接的にアクセスします。
リバースプロキシのメリット
・セキュリティ向上: クライアントは直接バックエンドサーバーにアクセスできないため、バックエンドサーバーを外部から隔離することができます。
・ロードバランシング: リバースプロキシは複数のバックエンドサーバーにリクエストを分散させることができ、トラフィックを効率的に処理できます。
・キャッシング: リバースプロキシがレスポンスをキャッシュすることで、バックエンドサーバーの負荷を軽減し、クライアントに対するレスポンス時間を短縮できます。
・SSL終了: リバースプロキシがSSL/TLSの暗号化通信を処理し、バックエンドサーバーとの通信は平文で行うことができるため、バックエンドサーバーの負荷を軽減できます。