Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@momotaroukunn

AlmaLinux+Reactの環境構築

Last updated at Posted at 2024-10-16

AlmaLinux+Reactの環境構築

1. 事前準備
2. 投稿主の実装環境
3. 各ソフトウェア・ツールの説明(Node.js,npm,nvm,CreateReactApp,React)
4. 構築手順

1. 事前準備

今回この記事では、Reactに趣を置いて構築しています。

まず、インストールしたいReactのバージョンを確認しておいてください。
少しだけ説明すると、Reactのバージョンには安定版と安定版ではない最新版が存在するため、自分にあったバージョンをインストールするとよいです。
詳しくは、調べてみてください。
何でもいい場合はとりあえず、Reactの安定版の最新バージョンを調べておくと良い。
(2024/10/13 現在：Reactの安定版の最新バージョンは18.3.1です。)

2. 投稿主の実装環境

・AlmaLinux(9.2)
・nvm(0.39.3)
　└node.js(20.18.0)
　　└npm(10.8.2)
　　└npx(10.8.2)
・create-react-app(5.0.1)
　└ react(18.3.1)

3. 各ソフトウェア・ツールの説明(nvm,Node.js,npm,npx,CreateReactApp)

3-1. nvmとは

Node.jsのバージョンを簡単に管理するためのツールである。複数のNode.jsのバージョンをインストールして切り替えることができるため、開発環境やプロジェクトごとに異なるバージョンを使用することが可能になるもの。
そもそもReactは、Node.jsとnpmとの互換性が高いことからreactのバージョンに合わせたNode.jsとnpmをインストールする必要があります。
そのため、reactのバージョンとNode.jsとnpmのバージョンが合わない場合は、node.jsのインストール・アンインストールを手動で行わなければなりません。
その面倒な作業を回避するため、nvmというものを使用することでインストール・アンインストールを行うことなく、ツール上でバージョンを切り替えて使用することが可能になったもの。

3-2. Node.jsとは

Node.jsとは、サーバーサイドで稼働するJavaScript実行環境のことである。
Apacheやnginxなどのミドルウェアと混合して考えてしまいがちですが、あくまでNode.jsはHTTPサーバの構築が主な目的ではなく、バックエンド処理のための環境である。ではなぜ、HTTPサーバを構築できるかというと、標準ライブラリにHTTPサーバを作成してくれる機能が一部導入されているから。

3-3. npmとは

npmとは、Node.jsのパッケージ管理ツールである。
npmを使用することで、JavaScriptのライブラリやツールを簡単にインストールできるもの。
Node.jsをインストールすると自動的にインストールされます。
もっと言えば、ビルドやサーバ構築、javascriptのパッケージのインストール、更新、削除とかこの後出てくる「npx」もnpmの機能の一部です。名前が似ておりややこしいですよね。

3-4. npxとは

npmの機能の一部であり、コマンドの実行やJavaScriptパッケージのバージョンを指定ができるもの
例：「Create React App」のバージョンを指定してインストール＆実行をすることができる。

3-5. Create React Appとは

reactのインストール前にインストールするツールです。
Create React Appとは、
Reactアプリケーションを簡単に作成するための公式のツールです。
このCreate React Appがあるおかげで、WebpackやBabelの設定を手動でしなくとも設定されており構築が容易になっている点やReact周辺のツールが追加できたりなど構築を簡略化できるもの。

3-6. Reactとは

Facebookが開発したオープンソースのJavaScriptライブラリのこと。
SPAの開発に特化したフレームワーク。

4. 構築

4-1. nvm(Node.js(npm、npx))の構築

最新版のnvmをインストール

#2024/10/13現在：最新版
#nvm 0.39.7のバージョンをインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

以下の通りバージョンが表示されれば問題なく、インストールできています。

#バージョン確認
$ nvm -v
0.39.3

以下、nvmからNode.jsのバージョンを指定してインストール作業を行います。
その際、LTSと記載されているものがありますが、LTSとはNode.jsの安定バージョンのことを指します。
ここから自分が使用したいReactのバージョンに合わせてNode.jsをインストールする必要があります。

今回インストールするReactのバージョンは18.3.1です。
※Reactのバージョン18.3.1を実装したいとき、Node.jsのバージョンをv20.18.0を選択すれば正常に稼働したので、「投稿主の実装環境」通り手順を進めるものとする。

もし、Reactのバージョンを変更したいときは、Node.jsとのバージョンの相性を調べてください。

では、後続手順

#インストール可能なNode.jsのバージョンを一覧表示
$ nvm ls-remote
        v20.8.1
        v20.9.0   (LTS: Iron)
       v20.10.0   (LTS: Iron)
       v20.11.0   (LTS: Iron)
       v20.11.1   (LTS: Iron)
       v20.12.0   (LTS: Iron)
       v20.12.1   (LTS: Iron)
       v20.12.2   (LTS: Iron)
       v20.13.0   (LTS: Iron)
       v20.13.1   (LTS: Iron)
       v20.14.0   (LTS: Iron)
       v20.15.0   (LTS: Iron)
       v20.15.1   (LTS: Iron)
       v20.16.0   (LTS: Iron)
       v20.17.0   (LTS: Iron)
       v20.18.0   (Latest LTS: Iron)

今回、インストールするNode.jsのバージョンは20.18.0なので、
nvmからNode.jsの20.18.0のバージョンを指定してインストールする。

$ nvm install 20.18.0

Node.js 20.18.0のバージョンがインストールできていることを確認する。

$ nvm version node
v20.18.0

今回インストールするNode.jsのバージョンは、20.18.0の一つだけですが、今後Node.jsのバージョンを複数導入して運用したい場合はもう一度「nvm install 任意のバージョン」でインストール後、以下のコマンドを使用して切り替えてください。

#バージョン切替(前提としてNode.jsのインストールは[nvm install]により、完了していること)
$ nvm use 20.18.0

ここまでの時点でNode.jsとnpm及びnpxのインストールが完了しています。実は、npmとnpxは、Node.jsと一緒にインストールされます。

★★★番外編★★★
もし、npmやnpxのバージョンアップが個別で必要になった場合は、バージョンアップ自体は可能ですが投稿主はあまりおすすめしません。
理由は以下の通り。
nvmはNode.jsのバージョンを管理しているもので、Node.jsに追従してnpm及びnpxもインストールされています。そのため、個別でnpm及びnpxのインストールを行った場合、整合性がとれなくなるかもしれません。

この場合は、特別何かない限りnvmから思い切ってNode.jsのバージョンを変更したほうが早いと思います。同時にnpm及びnpxのバージョンも切り替わるため。
★★★

以下、npmのバージョンも確認します。

#Node.jsのバージョンを表示
$ node -v
v20.18.0

#npmのバージョンを表示
$ npm -v
10.8.2

#npxのバージョンを表示
$ npx -v
10.8.2

問題なく表示されたら正常にインストールされています。
後続に続く。

4-2. reactの構築

＜事前作業＞
作業ディレクトリに移動する。

※投稿主の場合、ホームディレクトリ直下にreactを構築しているため、個別で作業ディレクトリに移動する。

# reactの構築場所(任意)
$ cd

Reactの環境構築にはいくつか方法がありますが、今回は以下の方法でreactのインストールを実施する。

###手順###
①npxにより、Create React Appのインストール(バージョン指定:5.0.1)と
同時に、Reactの最新版(安定版ver)をインストールする。
　↓
②Reactの最新版(安定版ver)から今回インストールしたいReactのバージョン（18.3.1）に変更する。
############

前提の手順を踏まえ、後続の手順でインストールしていく。

create react appのインストール：

#Create React Appをインストール
$ #npx create-react-app my-app

#Create React Appをインストール(バージョンを指定してインストール)
$ npx create-react-app@5.0.0 my-app

インストールが完了したら最後に「Happy hacking!」と出力されていればOKです。
同時に、Create React Appのバージョンが5.0.0でreactの最新版(安定版ver)がインストールされています。
以下の作業でバージョンを確認。

$ npx create-react-app --version
5.0.1

バージョンが表示されれば問題なくインストールされています。

ディレクトリはmy-appを指定して作成したので、「my-app」というreactのプロジェクトが作成されているはずです。

#「my-app」ディレクトリの存在確認
ls -l

プロジェクトが存在していれば、後続の手順を実施する。

「②Reactの最新版(安定版ver)から今回インストールしたいReactのバージョン（18.3.1）に変更する。」を実施する。

#「my-app」ディレクトリに移動。
cd my-app

# 最新版のReactバージョンから18.3.1のreactバージョンに変更する。
npm install react@18.3.1 react-dom@18.3.1

エラーが出ていないことを確認したら後続手順へ進む。

最後にReactの起動確認をする。
起動するときは、先ほど作成したプロジェクト(my-app)ディレクトリ内でコマンドを投下してください。

#Reactを起動する。
#[Ctrl + C]
npm start

以下のメッセージが出力されていれば、Reactの起動に成功しています。
[Ctrl + C]で停止させられます。

Compiled successfully!

You can now view my-app in the browser.

  http://localhost:3000

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

webpack compiled successfully

ここまで読んでいただき、ありがとうございました。

次回、開発中(ローカルホスト3000番)のプロジェクトを外部公開してみたを記事にします。

以上

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?