NGINXにNode.jsとReact.jsを連結する

みなさんこんにちは

本日のお題

前回作成した、HTTPS化した、NGINXのDockerゲストに、Node.js、React.jsの初期構築を行い、Webアプリを作る下準備を行っていきたい。

Docker起動準備

docker-compose.ymlファイルの編集

docker-compose.ymlファイルでDockerホストで8443で受けて→Dockerゲスト443に中継する設定とする。

[root@meet nginx]# cat docker-compose.yml
version: "3"services:
  nginx:
    image: nginx:latest    container_name: nginx
    ports:
      - "8443:443"
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf
      - /home/yukkuri/certificates/yukkuri.me.crt:/etc/nginx/conf.d/yukkuri.me.crt:Z
      - /home/yukkuri/certificates/yukkuri.me.key:/etc/nginx/conf.d/yukkuri.me.key:Z
      - ./html:/worker/jitsi-mgr
    working_dir: /worker
[root@meet nginx]#

Node.js用のコンフィグファイルの準備

Dockerゲスト内で動作予定のNGINXのコンフィグファイルを設定する。
設定としては、https://xxx.yyy/ にアクセスした際に、443→127.0.0.1:3000に中継する設定とする。

[root@meet nginx]# cat default.conf
server {
    listen       443 ssl;
    server_name  localhost;    ssl_certificate      /etc/nginx/conf.d/yukkuri.me.crt;
    ssl_certificate_key  /etc/nginx/conf.d/yukkuri.me.key;
    location / {        proxy_pass http://127.0.0.1:3000;
        root /jitsi-mgr;
    }
}
[root@meet nginx]#

Dockerの起動

[root@meet nginx]# docker-compose up -d
[+] Running 1/1
 ⠿ Container nginx  Started         7.6s
[root@meet nginx]#

DIRの準備

htmlはDockerゲスト内のReact.jsのテンプレートをDockerホストからアクセスできるようにするためのマウント先

[root@meet nginx]# pwd/opt/nginx
[root@meet nginx]# ls
default.conf  docker-compose.yml  Dockerfile  html  
[root@meet nginx]#

Dockerの起動

[root@meet nginx]# docker-compose exec nginx apt update
Get:1 http://security.debian.org/debian-security bullseye-security InRelease [44.1 kB]
Get:2 http://deb.debian.org/debian bullseye InRelease [116 kB]
Get:3 http://deb.debian.org/debian bullseye-updates InRelease [39.4 kB]
...
Reading state information... Done
All packages are up to date.
[root@meet nginx]#

Node.jsの導入

npmの導入

[root@meet nginx]# docker-compose exec nginx apt install npm
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
The following additional packages will be installed:
...
Do you want to continue? [Y/n] y
...
Processing triggers for libc-bin (2.31-13+deb11u2) ...
Processing triggers for libgdk-pixbuf-2.0-0:amd64 (2.42.2+dfsg-1) ...
[root@meet nginx]#

Node.jsの導入準備

Node.jsを導入する前に、VL管理アプリ（n）を導入する。

[root@meet nginx]# docker-compose exec nginx npm install -g n

added 1 package, and audited 2 packages in 1s

found 0 vulnerabilities
[root@meet nginx]#

最新のNode.jsの導入

nを利用して、Node.jsの最新版を導入します。

[root@meet nginx]# docker-compose exec nginx n latest
  installing : node-v17.4.0
       mkdir : /usr/local/n/versions/node/17.4.0
       fetch : https://nodejs.org/dist/v17.4.0/node-v17.4.0-linux-x64.tar.xz
   installed : v17.4.0 (with npm 8.3.1)

Note: the node command changed location and the old location may be remembered in your current shell.
         old : /usr/bin/node
         new : /usr/local/bin/node
If "node --version" shows the old version then start a new shell, or reset the location hash with:
hash -r  (for bash, zsh, ash, dash, and ksh)
rehash   (for csh and tcsh)
[root@meet nginx]#

導入アプリのVL確認

[root@meet nginx]# docker-compose exec nginx n --version
v8.0.2
[root@meet nginx]# docker-compose exec nginx node -v
v17.4.0
[root@meet nginx]# docker-compose exec nginx n list
node/17.4.0
[root@meet nginx]#

React.jsの導入

React.jsのテンプレート作成

jitsi-mgrがアプリ名。docker-compose.ymlで指定した、working_dir: /workerの下に、jitsi-mgrというディレクトリを作って、そこにReadc.jsのテンプレートファイルが格納される。

[root@meet nginx]# docker-compose exec nginx npx create-react-app jitsi-mgr
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in /worker/jitsi-mgr.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1363 packages in 2m

169 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

added 33 packages in 9s

169 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1396 packages in 4s

169 packages are looking for funding
  run `npm fund` for details

8 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
    at checkExecSyncError (node:child_process:828:11)
    at execSync (node:child_process:902:15)
    at tryGitCommit (/worker/jitsi-mgr/node_modules/react-scripts/scripts/init.js:62:5)
    at module.exports (/worker/jitsi-mgr/node_modules/react-scripts/scripts/init.js:350:25)
    at [eval]:3:14
    at Script.runInThisContext (node:vm:129:12)
    at Object.runInThisContext (node:vm:305:38)
    at node:internal/process/execution:75:19
    at [eval]-wrapper:6:22
    at evalScript (node:internal/process/execution:74:60) {
  status: 128,
  signal: null,
  output: [ null, null, null ],
  pid: 5278,
  stdout: null,
  stderr: null
}
Removing .git directory...

Success! Created jitsi-mgr at /worker/jitsi-mgr
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd jitsi-mgr
  npm start

Happy hacking!
[root@meet nginx]#

React.jsのテンプレートの確認

Dockerゲスト上にできた、React.jsのテンプレートファイルを、Dockerホスト上から参照できるか確認します。

[root@meet nginx]# ls ./html
node_modules  package.json  package-lock.json  public  README.md  src
[root@meet nginx]#

React.jsの起動

以下のコマンドを実行することで、DockerのゲストOS内で3000PORTでReact.jsのテンプレートアプリが起動します。
※インターネット8443→NginX（8443→443）→Node.js（443→3000）

[root@meet nginx]# docker-compose exec nginx sh -c "cd jitsi-mgr; npm start"
Compiled successfully!

You can now view jitsi-mgr in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.19.0.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

assets by path static/ 1.49 MiB
  asset static/js/bundle.js 1.48 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.92 KiB [emitted] 1 related asset
  asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main)
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 546 bytes [emitted]
runtime modules 31.3 KiB 15 modules
modules by path ./node_modules/ 1.35 MiB 99 modules
modules by path ./src/ 18 KiB
  modules by path ./src/*.css 8.82 KiB
    ./src/index.css 2.72 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css 1.37 KiB [built] [code generated]
    ./src/App.css 2.72 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css 2 KiB [built] [code generated]
  modules by path ./src/*.js 5.58 KiB
    ./src/index.js 1.75 KiB [built] [code generated]
    ./src/App.js 2.46 KiB [built] [code generated]
    ./src/reportWebVitals.js 1.37 KiB [built] [code generated]
  ./src/logo.svg 3.61 KiB [built] [code generated]
webpack 5.68.0 compiled successfully in 10939 ms

動作確認

ブラウザから接続確認していきます。

今回の課題

Node.jsの起動コマンドは、コンソール上の動作なので、バックグラウンドで動作させる必要がある。※docker-compose upではなく、docker-compose up -dのイメージ。
docker-compose.ymlファイルにNode.jsなどのインストールを自動化したい。docker-compose downするたびにやりなおしになるのは面倒である。
もっともこれは、Dockerの機能で、イメージを保存しておけばいいのかなと。

今後の予定

作成したテンプレートを改造して、Jitsiのログインユーザーを格納しているMySQLのコントロールを行いたい。
周回遅れながら、React.jsを学習していく。

今回の所要時間

「React.jsのテンプレート作成」のところで、警告が出ていたので、何とか出ないように結構調査したわけですが、有識者がいるわけでもなく、丸一日は悩んだかと。
結果的に、npxコマンドは、利用時のみで、利用後はモジュールをきれいにしてくれるコマンドということで、ずっと使うわけではないからいいかと判断としました。

結構、長期間、現場離れて顧客の話を聞く仕事をしていたので、いろいろわからないことがありますね。新しくなってる！
そうはいっても、環境変えていくにはこういった新しいこともやって行きたいですね。