こんにちは、現役エンジニアの inno_tech です。
Ubuntu上でNode.js Webアプリケーションの開発方法をお探しでしょうか?
本記事では、Ubuntu 20.04LTS上で動作確認しています。
Ubuntu環境の準備
Ubuntu環境の作り方は、すでに別の記事でまとめているのでそれぞれ参照してください。
①Ubuntu マシンを用意する方法 と ②WindowsのWSL2でUbuntuを利用する の 2パターンあります。
①Ubuntu マシンを用意する場合はこちら.
② WSL2上でUbuntu を利用する場合はこちら.
Node.jsのインストール
Ubuntu上でNode.jsアプリを開発するためにはNode.jsのインストールが必要です。
Ubuntu上にNode.jsをインストールする方法は、こちらの記事でまとめているので参照してください。
プロジェクトディレクトリの作成
Node.jsがインストール出来たら、次はプロジェクトを開発するディレクトリを作成します。
今回は「sample-app」というプロジェクトを例に説明します。ターミナルを起動し、ディレクトリを作成します。
# ディレクトリを移動
cd [作成したいディレクトリ]
# ディレクトリ作成(プロジェクト名のフォルダーを作成)
mkdir sample-app
npm管理プロジェクトとして初期化
Node.jsアプリは npm でパッケージ管理をする
Node.jsアプリでは、npm(node package manager) と呼ばれるパッケージ管理の仕組みを使います。
この仕組みを使うことで、外部ライブラリ(パッケージ)の管理を簡潔にし、他の開発者への開発環境の共有も簡単になります。
Node.jsをインストールすれば npmコマンドも使えるようになってるよ
npmコマンドによる初期化
npm init
というコマンドで package.json
というファイルを生成し、npm管理プロジェクトとして初期化します。
# プロジェクトディレクトリ
cd [プロジェクトディレクトリ]
# 現在のディレクトリを npm管理プロジェクト として初期化
npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
(中略)
# node.jsプロジェクトの設定 をしていく
package name: (sample-app) sample-app ## アプリケーション名 を入力
version: (1.0.0)
description: xxxx. ## アプリケーションの説明を記述
entry point: (index.js) server.js ## アプリケーションの開始点となるファイル(プロジェクトの方針に合わせて設定)
test command: ## 単体テスト用のコマンドを記述. (空白でOK)
git repository: ## git repository URL (空白でOK)
keywords: ## キーワード (空白でOK)
author: inno-tech-life. ## 作成者
license: (ISC) ## ライセンス(プロジェクトの方針に合わせて設定)
About to write to /[your project directory]/package.json:
# package.json の中身が表示される(確認用)
{
"name": "sample-app",
"version": "1.0.0",
"description": "xxxx.",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "inno-tech-life.",
"license": "ISC"
}
# 問題なければ yes と入力.
Is this OK? (yes) yes
# この時点のディレクトリ構造
[Project Dir]
└── package.json
ここまでで開発環境の準備が整いました。次は javascriptファイル を作成し、動作確認を行います。
エントリーポイントとなるJSファイルを作成
npm init
時に指定したエントリーポイント(プログラムの開始点)となるJavaScriptファイル server.js
を作成します。
プロジェクトディレクトリ直下にserver.js
という名前でファイルを作成し、以下のコードを記述します。
// ログを出力
console.log("初めてのnode.jsプロジェクト");
このファイルを実行するには、ターミナルから下記のように実行します。
# ディレクトリを移動
cd [Project Dir]
# server.js を実行
node ./server.js
# 実行結果
初めてのnode.jsプロジェクト
VSCodeを使用している場合、以下のように表示されます。
プログラムも準備できました。最後に、npm scripts を使いやすいようにカスタマイズする方法を説明します。
npmスクリプトのカスタマイズ
npm init
の実行後に生成されるpackage.json
内にはscripts
というキーがあります。このscriptsキーにコマンドを定義すると、npm run [コマンド名]
という形でスクリプトを実行することができます。
node ./server.js
という処理をstart-app
コマンドとして登録してみましょう。
{
"name": "sample-app",
"version": "1.0.0",
"description": "xxxx.",
"main": "server.js",
"scripts": {
"start-app": "node ./server.js" // ここを変更
},
"author": "inno-tech-life.",
"license": "ISC"
}
ターミナルからnpm run start-app
と実行すると、node ./server.js
を実行した結果と同じ結果が得られます。
cd [Project Dir]
# npm run [コマンド名]
npm run start-app
# 実行結果
> sample-app@1.0.0 start-app
> node ./server.js
初めてのnode.jsプロジェクト
これって何のために必要?
npmスクリプトの応用例
先ほどの例ではシンプルな内容でしたが、この npmスクリプトは 複数の処理を続けて記述したり、カンマで区切で複数個定義することも可能です。
したがって、実際のアプリ開発の場面では、環境変数を定義してからプログラムを実行する, 開発(デバッグ)時 と 本番時で実行コマンドを切り替える というように使われます。
{
"name": "sample-app",
"version": "1.0.0",
"description": "xxxx.",
"main": "server.js",
"scripts": {
// 環境変数を宣言してからプログラムを実行
// 開発用
"start-dev": "export NODE_ENV=development && node ./server.js",
// 本番用
"start-prod": "export NODE_ENV=production && node ./server.js",
},
"author": "inno-tech-life.",
"license": "ISC"
}
複雑な処理でもnpmスクリプトのコマンドだけ実行すればいいんだね、便利だなぁ。
以上で Node.jsアプリの開発環境 と 基本的なプログラムが完成しました。ここからReact や expressといったWebアプリケーションに必要な各種のフレームワークの使い方を学習していきましょう。
まとめ
今回のまとめです。
- Ubuntuの準備方法 と Node.jsのインストール方法, プロジェクトの作成方法を解説。
- npmスクリプトでは開発で使用する便利なコマンドを自分でカスタマイズ可能。
- 今回作成した開発環境を元に、各種フレームワークの学習を進めよう。
2021年の全国の本屋さんで最も売れた年間ベストセラー本が気になる方はこちら。
参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!
この記事がイイねと思ったら、Twitterフォロー か にほんブログ村のどちらかしてくれたら嬉しいよ!
コメント / ご要望