【IT】nvmのバージョンアップとViteの導入（Ubuntu 22.04 LTS)

皆さま
こんにちは

本日は、少し前に
Ubuntu にNode.js用に導入した
nvm（Node Version Manager）をバージョンアップと
ReactのフロントエンドツールのViteを導入します。

まず、nvmのバージョンを確認します。
少しだけ古いです。

$ nvm --version
0.35.3

nvmをバージョンアップします。

$ cd ~/.nvm

$ git pull origin master
remote: Enumerating objects: 1342, done.
remote: Counting objects: 100% (1342/1342), done.
remote: Compressing objects: 100% (462/462), done.
remote: Total 1270 (delta 884), reused 1139 (delta 769), pack-reused 0
Receiving objects: 100% (1270/1270), 533.87 KiB | 3.92 MiB/s, done.
Resolving deltas: 100% (884/884), completed with 60 local objects.
From https://github.com/nvm-sh/nvm
 * branch            master     -> FETCH_HEAD
Updating 258938e..edacf82
Fast-forward
 .editorconfig                                           |   10 +-
 .github/SECURITY.md                                     |    3 +
 .github/workflows/latest-npm.yml                        |   81 ++
 .github/workflows/lint.yml                              |   77 ++
 　　　・
　　　　　・
　　　　　・

$ source ~/.nvm/nvm.sh

バージョンを確認します。

$ nvm --version
0.39.3

nodeのv18をインストールします。

$ nvm install 18.13.0
Downloading and installing node v18.13.0...
Downloading https://nodejs.org/dist/v18.13.0/node-v18.13.0-linux-x64.tar.xz...
################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v18.13.0 (npm v8.19.3)

nodeでv18を使う様に指定します。

$ nvm use v18.13.0
Now using node v18.13.0 (npm v8.19.3)

$ nvm list
       v12.21.0
->     v18.13.0
         system
default -> v12.21.0
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v18.13.0) (default)
stable -> 18.13 (-> v18.13.0) (default)
lts/* -> lts/hydrogen (-> v18.13.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.21.2 (-> N/A)
lts/gallium -> v16.19.0 (-> N/A)
lts/hydrogen -> v18.13.0

$ node -v
v18.13.0

viteを導入します。

$ mkdir ~/react-dev01

$ cd ~/react-dev01

$ npm init vite
Need to install the following packages:
  create-vite@4.0.0
Ok to proceed? (y) y
✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /home/testreact/react-dev01/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

＄　vite-project

$ npm install

added 82 packages, and audited 83 packages in 12s

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

found 0 vulnerabilities

vite を起動します。

$ npm run dev

 VITE v4.0.4  ready in 1055 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
  

導入したサーバはリモートサーバのため、外部からアクセスできる様に設定します。

プロジェクトフォルダー内のvite.config.jsに以下を加えます。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {                         //→追加
	host: true                  //→追加
  }                                 //→追加
})

再びviteを起動します。

外部よりUbuntuへブラウザーでアクセスできるか確認します。

無事外部より表示されました。

では