VirtualBox6とCentOS7でAngular8の開発環境を構築する

環境

• Windows 10 Pro 1903
• Oracle VM VirtualBox 6.0.14 (2019/10/15)
• Oracle VM VirtualBox 6.0.14 Extension Pack
• CentOS Linux 7 (1908) (2019/09/17)

• Git 2.22.1 (IUS版)
• Google Chrome
• Oracle Java SE Development Kit 11.0.5
• Apache Tomcat 9.0.29 (2019/11/21)
• Apache 2.4.6 (2013/07/22)

• nvm v0.35.1 (2019/11/04)
• node v12.14.0 (npm v6.13.4) (2019/12/17)
• Angular CLI 8.3.21 (2019/12/20)
• Visual Studio Code 1.41.1 (2019/12/18)

• Eclipse IDE for Enterprise Java Developers 2019-12 R (4.14.0)
• Spring Tool Suite 4 (4.5.0) (2019/12/19)

目次

1. Oracle VM VirtualBoxをインストールする
   1. インストーラーを実行する
   2. 機能拡張パッケージをインストールする
2. CentOSをインストールする
   1. 仮想マシンの作成
   2. 仮想マシンの設定
   3. 仮想マシンの起動
   4. CentOSのインストール
   5. Guest Additionsのインストール
   6. VMのバックアップ
3. ソフトウェアをインストールする
   1. SELinux
   2. Git 2.22.1 (IUS版)
   3. Google Chrome
   4. Oracle Java SE Development Kit 11.0.5
   5. Apache Tomcat 9.0.29
   6. Apache 2.4.6
4. Angularの開発環境をインストールする
   1. nvm v0.35.1
   2. node v12.14.0 (npm v6.13.4)
   3. Angular CLI 8.3.21
   4. Visual Studio Code 1.41.1
5. Javaの開発環境をインストールする
   1. Eclipse IDE for Enterprise Java Developers 2019-12 R (4.14.0)
   2. Spring Tool Suite 4 (4.5.0)
6. VirtualBoxの環境を設定する
   1. VirtualBoxのホストOSとゲストOS間で使える共有フォルダ

ディレクトリ構成

/
+-home
|   +-mizuki
|       +-.nvm
|       |   +-versions
|       |       +-node
|       |           +-v12.14.0
|       |           +-v13.5.0
|       |
|       +-opt
|       |   +-eclipse-jee -> /home/mizuki/opt/eclipse-jee-201912
|       |   |
|       |   |-eclipse-jee-201912
|       |
|       +-workspace
|       |   +-angular
|       |   |   +-my-app
|       |   |
|       |   +-node_modules
|       |   |   +-@angular
|       |   |   +-@angular-devkit
|       |   |
|       |   |-package-lock.json
|       |
|       +-www
|           +-html
|               +-static
|                   |-index.html
|
+-media
|   +-sf_sharedfolder
|
+-opt
    |-apache-tomcat -> /opt/apache-tomcat-9.0.29
    |
    +-apache-tomcat-9.0.29
    |   +-bin
    |   |   |-startup.sh
    |   |   |-shutdown.sh
    |   |   |-setenv.sh
    |   |
    |   +-conf
    |       |-tomcat-users.xml
    |
    |-java -> /opt/oracle-jdk-11.0.5
    |
    +-oracle-jdk-11.0.5
        +-bin
            |-java
          

1. Oracle VM VirtualBoxをインストールする

1-1. インストーラーを実行する

VirtualBox-6.0.14-133895-Win.exe

1-2. 機能拡張パッケージをインストールする

インストーラーの実行が終わると拡張子の関連付けがされるのでダブルクリックで実行できる。

Oracle_VM_VirtualBox_Extension_Pack-6.0.14.vbox-extpack

2. CentOSをインストールする

2-1. 仮想マシンの作成

Oracle VM VirtualBox マネージャー > 仮想マシンメニュー > 新規

仮想マシンの作成 名前とオペレーティングシステム

名前

CentOS7-1908

マシンフォルダー

D:\var\virtualbox

タイプ

Linux

バージョン

Red Hat (64-bit)

仮想マシンの作成 メモリーサイズ

メモリーサイズ

8192 MB

仮想マシンの作成 ハードディスク

ハードディスク

仮想ハードディスクを作成する

仮想マシンの作成 ハードディスク 仮想ハードディスクの作成 ハードディスクのファイルタイプ

ハードディスクのファイルタイプ

VDI (VirtualBox Disk Image)

仮想マシンの作成 ハードディスク 仮想ハードディスクの作成 物理ハードディスクにあるストレージ

物理ハードディスクにあるストレージ

可変サイズ

仮想マシンの作成 ハードディスク 仮想ハードディスクの作成 ファイルの場所とサイズ

ファイルの場所

D:\var\virtualbox\CentOS7-1908\CentOS7-1908.vdi

サイズ

16.00 GB

2-2. 仮想マシンの設定

仮想マシン(CentOS7-1908) > 設定

ディスプレイ

スクリーン > ビデオメモリー

128 MB

2-3. 仮想マシンの起動

仮想マシン(CentOS7-1908) > 起動

起動ハードディスクを選択

起動ハードディスク

CentOS-7-x86_64-DVD-1908.iso

2-4. CentOSのインストール

画面をクリックするとマウスがキャプチャーされる。キーボードの右コントロールキー押下で戻せる。

インストール時に使用する言語

• 日本語 > 日本語(日本)

ソフトウェア > ソフトウェアの選択

ベース環境

開発およびクリエイティブワークステーション

選択した環境のアドオン

• その他の開発
• 開発ツール
• プラットフォーム開発
• セキュリティーツール
• システム管理ツール

システム > インストール先

• デフォルトのままにする。

インストールの開始

ユーザーの設定

• ROOTパスワード
• ユーザーの作成
  • このユーザーを管理者にする=sudoできる

インストールが完了したので再起動する。

初期セットアップ

• LICENSING

『設定の完了』ボタンを押す。

一般ユーザーのログイン

ようこそ

• 日本語

入力

• 日本語 (かな漢字)
  • Windowsキー + スペースキーで日本語入力に切り替えできる。

プライバシー

• 位置情報サービスはオフにする。

オンラインアカウント

• オンラインアカウントへの接続はスキップする。

準備完了

右上のアイコンからログアウトする。

ROOTユーザーのログイン

• 『アカウントが見つかりませんか？』から入る。

デスクトップ画面が表示されるまでは一般ユーザーと同じ設定にする。

アプリケーションメニュー > システムツール > 設定 > ネットワーク

• 有線をオンにして『＊』から自動接続にする。

アプリケーションメニュー > システムツール > ソフトウェアの更新

• パッケージの提供元を信用する。

更新が終わったら再起動する。

2-5. Guest Additionsのインストール

これが終わればマウスキャプチャされずに普通のアプリケーションのウィンドウのように扱える。

一般ユーザーでログインする。右コントロールキー押下でマウスキャプチャをやめる。

VirtualBoxのデバイスメニュー > Guest Additions CDイメージの挿入...

自動実行する。

終わったら右上のアイコンから電源オフにする。

2-6. VMのバックアップ

Oracle VM VirtualBox マネージャーを終了してVMのフォルダをコピーしてバックアップする。

D:\var\virtualbox\CentOS7-1908-201911130136-OSとGuestAdditionsまで完了

3. ソフトウェアをインストールする

3-1. SELinux

SELinuxの設定を警告のみに変更する。この変更を行わないと原因不明のエラーになることがある。

$ pwd
/etc/selinux

$ sudo vi config
        

# This file controls the state of SELinux on the system.
# SELINUX= can take one of these three values:
#     enforcing - SELinux security policy is enforced.
#     permissive - SELinux prints warnings instead of enforcing.
#     disabled - No SELinux policy is loaded.
SELINUX=enforcing
=>permissiveに変更する。
        

変更したらOSを再起動する。

変更されているか確認する。

$ getenforce
Permissive
        

参考

• CentOS7でユーザディレクトリへのApacheのアクセスが拒否される
• CentOS 6.5 で ユーザーディレクトリに public_html を作り、その中の html ファイルを Apache で公開するためには
• 【 getenforce 】コマンド／【 setenforce 】コマンド――SELinuxのモードを表示／一時的に変更する

3-2. Git 2.22.1 (IUS版)

Gitのバージョンが古いので新しいバージョンをインストールする。

$ git --version
git version 1.8.3.1
        

Gitのサイトでthe IUS Community Projectが勧められている。

Git - Downloads
https://git-scm.com/downloads
  Linux/Unix
    Download for Linux and Unix
    https://git-scm.com/download/linux
      Red Hat Enterprise Linux, Oracle Linux, CentOS, Scientific Linux, et al.
        RHEL and derivatives typically ship older versions of git.
        You can download a tarball and build from source, or use a 3rd-party repository such as the IUS Community Project to obtain a more recent version of git.
          IUS
          https://ius.io/
          

IUS版のRHEL/CentOS 7のSetupを行う。

$ sudo yum install https://repo.ius.io/ius-release-el7.rpm https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
        

DNFをインストールする。

IUS > More > Usage > DNF

$ sudo yum install dnf
        

Gitをインストールする。

IUS > Packages > [org:iusrepo topic:rpm git]検索 > [iusrepo/git222]

$ sudo dnf --allowerasing install git222

$ git --version
git version 2.22.1
        

3-3. Google Chrome

FirefoxブラウザでOracle account sign inのパスワードフィールドにカーソルを移動するとフリーズするので先にChromeをインストールする。

アプリケーション > お気に入り > Firefox
Firefoxブラウザで "chrome" を検索する。

ダウンロードページを開く。
  Chromeをダウンロードボタン押下
    64ビット .rpm (Fedora/openSUSE用)を選択
      同意してインストールボタン押下
        ファイルをダウンロードして保存する。
        google-chrome-stable_current_x86_64.rpm
          

rpmをインストールする。

$ pwd
/home/mizuki/ダウンロード
$ mv google-chrome-stable_current_x86_64.rpm /home/mizuki/src

$ pwd
/home/mizuki/src
$ sudo yum localinstall google-chrome-stable_current_x86_64.rpm
        

Google Chromeを起動する。

アプリケーション > インターネット > Google Chrome
          

参考

• How to Install Google Chrome Web Browser on CentOS 7
• Linux基本コマンドTips（50）：【 yum 】コマンド（応用編その4）――パッケージファイル（RPMファイル）を使ってインストールする

3-4. Oracle Java SE Development Kit 11.0.5

ブラウザでファイルをダウンロードする。

Java SE Development Kit 11 Downloads
https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html
  Java SE Development Kit 11.0.5
    Linux	171.62 MB jdk-11.0.5_linux-x64_bin.tar.gz
          

インストールしてシンボリックリンクを設定する。

$ pwd
/home/mizuki/ダウンロード
$ mv jdk-11.0.5_linux-x64_bin.tar.gz /home/mizuki/src

$ pwd
/home/mizuki/src
$ tar xvf jdk-11.0.5_linux-x64_bin.tar.gz
$ mv jdk-11.0.5 oracle-jdk-11.0.5
$ sudo mv oracle-jdk-11.0.5 /opt

$ pwd
/opt
$ sudo chown -R root:root oracle-jdk-11.0.5
$ sudo ln -s /opt/oracle-jdk-11.0.5 /opt/java
        

システムにインストールされているJavaを確認する。

$ java -version
openjdk version "1.8.0_232"
OpenJDK Runtime Environment (build 1.8.0_232-b09)
OpenJDK 64-Bit Server VM (build 25.232-b09, mixed mode)
        

ローカルにインストールしたJavaを確認する。

$ /opt/java/bin/java -version
java version "11.0.5" 2019-10-15 LTS
Java(TM) SE Runtime Environment 18.9 (build 11.0.5+10-LTS)
Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.5+10-LTS, mixed mode)
        

3-5. Apache Tomcat 9.0.29

ブラウザでファイルをダウンロードする。

Tomcat 9 Software Downloads
https://tomcat.apache.org/download-90.cgi
  9.0.29
    Binary Distributions
      Core
        tar.gz (pgp, sha512)
          apache-tomcat-9.0.29.tar.gz
          

インストールしてシンボリックリンクを設定する。

$ pwd
/home/mizuki/ダウンロード
$ mv apache-tomcat-9.0.29.tar.gz /home/mizuki/src

$ pwd
/home/mizuki/src
$ tar xvf apache-tomcat-9.0.29.tar.gz
$ sudo mv apache-tomcat-9.0.29 /opt

Tomcat用のユーザーを作成して所有者を変更する。
$ sudo useradd -s /sbin/nologin tomcat
$ sudo chown -R tomcat:tomcat /opt/apache-tomcat-9.0.29

$ sudo ln -s /opt/apache-tomcat-9.0.29 /opt/apache-tomcat
        

環境設定を行う。

Tomcat起動時に読み込まれる環境設定ファイルを作成する。
$ sudo vi /opt/apache-tomcat/bin/setenv.sh

以下を記述する。
JAVA_HOME=/opt/java
CATALINA_PID="$CATALINA_BASE/tomcat.pid"

権限設定と所有者の変更を行う。
$ sudo chmod 750 /opt/apache-tomcat/bin/setenv.sh
$ sudo chown tomcat:tomcat /opt/apache-tomcat/bin/setenv.sh

Tomcatのインストールディレクトリを環境変数に設定する。
$ sudo vi /etc/profile.d/tomcat.sh

以下を記述する。
export CATALINA_HOME=/opt/apache-tomcat
        

サービスの作成と登録を行う。

$ sudo vi /etc/systemd/system/tomcat.service

以下を記述する。
[Unit]
Description=Apache Tomcat 9
After=syslog.target network.target

[Service]
User=tomcat
Group=tomcat
Type=simple
PIDFile=/opt/apache-tomcat/tomcat.pid
RemainAfterExit=yes
SuccessExitStatus=143

ExecStart=/opt/apache-tomcat/bin/startup.sh
ExecStop=/opt/apache-tomcat/bin/shutdown.sh

[Install]
WantedBy=multi-user.target

権限設定を行う。
$ sudo chmod 755 /etc/systemd/system/tomcat.service

サービスを有効にする。(OS起動時にTomcatが起動する)
$ sudo systemctl enable tomcat
Created symlink from /etc/systemd/system/multi-user.target.wants/tomcat.service to /etc/systemd/system/tomcat.service.
        

メモ

• Type=oneshotだとTomcatがフォアグラウンドで動作するのでsystemctl startの制御が戻らない。
• systemctl stopすると終了コード143になる。(これは正常らしい)
• Type=simpleではExecReStartはunknownになる。

サービスを起動／終了する。

$ sudo systemctl start tomcat
$ sudo systemctl -l status tomcat
● tomcat.service - Apache Tomcat 9
   Loaded: loaded (/etc/systemd/system/tomcat.service; enabled; vendor preset: disabled)
   Active: active (running) since 月 2019-11-25 00:25:45 JST; 9s ago
 Main PID: 30017 (java)
    Tasks: 42
   CGroup: /system.slice/tomcat.service
           └─30017 /opt/java/bin/java -Djava.util.logging.config.file=/opt/apache-tomcat/conf/logging.properties -Djava.util.logging.manager=org.apache.juli.ClassLoaderLogManager -Djdk.tls.ephemeralDHKeySize=2048 -Djava.protocol.handler.pkgs=org.apache.catalina.webresources -Dorg.apache.catalina.security.SecurityListener.UMASK=0027 -Dignore.endorsed.dirs= -classpath /opt/apache-tomcat/bin/bootstrap.jar:/opt/apache-tomcat/bin/tomcat-juli.jar -Dcatalina.base=/opt/apache-tomcat -Dcatalina.home=/opt/apache-tomcat -Djava.io.tmpdir=/opt/apache-tomcat/temp org.apache.catalina.startup.Bootstrap start

11月 25 00:25:45 localhost.localdomain systemd[1]: Started Apache Tomcat 9.


$ sudo systemctl stop tomcat
$ sudo systemctl -l status tomcat
● tomcat.service - Apache Tomcat 9
   Loaded: loaded (/etc/systemd/system/tomcat.service; enabled; vendor preset: disabled)
   Active: inactive (dead) since 月 2019-11-25 00:30:25 JST; 7s ago
  Process: 30148 ExecStop=/opt/apache-tomcat/bin/shutdown.sh (code=exited, status=0/SUCCESS)
  Process: 30017 ExecStart=/opt/apache-tomcat/bin/startup.sh (code=exited, status=0/SUCCESS)
 Main PID: 30017 (code=exited, status=0/SUCCESS)

11月 25 00:25:45 localhost.localdomain systemd[1]: Started Apache Tomcat 9.
11月 25 00:30:23 localhost.localdomain systemd[1]: Stopping Apache Tomcat 9...
11月 25 00:30:23 localhost.localdomain shutdown.sh[30148]: NOTE: Picked up JDK_JAVA_OPTIONS:  --add-opens=java.base/java.lang=ALL-UNNAMED --add-opens=java.base/java.io=ALL-UNNAMED --add-opens=java.rmi/sun.rmi.transport=ALL-UNNAMED
11月 25 00:30:25 localhost.localdomain systemd[1]: Stopped Apache Tomcat 9.
        

Tomcatの管理画面のユーザーを登録する。

$ sudo vi /opt/apache-tomcat/conf/tomcat-users.xml

以下を最後に追記する。
<role rolename="manager-gui"/>
<user username="tomcat" password="tomcat" roles="manager-gui"/>
        

Tomcatの管理画面にログインできることを確認する。

$ sudo systemctl -l status tomcat
● tomcat.service - Apache Tomcat 9
   Loaded: loaded (/etc/systemd/system/tomcat.service; enabled; vendor preset: disabled)
   Active: inactive (dead) since 月 2019-11-25 00:30:25 JST; 22min ago
  Process: 30148 ExecStop=/opt/apache-tomcat/bin/shutdown.sh (code=exited, status=0/SUCCESS)
  Process: 30017 ExecStart=/opt/apache-tomcat/bin/startup.sh (code=exited, status=0/SUCCESS)
 Main PID: 30017 (code=exited, status=0/SUCCESS)

11月 25 00:25:45 localhost.localdomain systemd[1]: Started Apache Tomcat 9.
11月 25 00:30:23 localhost.localdomain systemd[1]: Stopping Apache Tomcat 9...
11月 25 00:30:23 localhost.localdomain shutdown.sh[30148]: NOTE: Picked up JDK_JAVA_OPTIONS:  --add-opens=java.base/java.lang=ALL-UNNAMED --add-opens=java.base/java.io=ALL-UNNAMED --add-opens=java.rmi/sun.rmi.transport=ALL-UNNAMED
11月 25 00:30:25 localhost.localdomain systemd[1]: Stopped Apache Tomcat 9.

$ sudo systemctl start tomcat

ブラウザでトップページを開く。
http://localhost:8080/
  Manager Appボタン押下
    ユーザー名とパスワード(tomcat/tomcat)を入力する。
        

参考

• Running The Apache Tomcat 9.0 Servlet/JSP Container
• ディレクトリへのシンボリックリンクを作成する
• Apache Tomcat 8 を CentOS 7 にインストールする手順
• CentOS 7 における systemd のファイル・フォルダ構成
• ユーザーの環境変数を設定するbashの設定ファイルと、カスタムプロンプトについて
• 10.6. SYSTEMD のユニットファイルの作成および変更
• Systemd メモ書き
• CentOS7にTomcat8をインストールして自動起動設定
• Services remain in failed state after stopped with systemctl

3-6. Apache 2.4.6

デフォルトでインストールされている。

$ httpd -v
Server version: Apache/2.4.6 (CentOS)
Server built:   Aug  8 2019 11:41:18
        

設定ファイルをバックアップする。

$ pwd
/etc/httpd/conf

$ sudo cp -a httpd.conf httpd.conf.bak
        

Apacheのドキュメントルートをユーザーディレクトリ配下に変更する。

$ sudo vi /etc/httpd/conf/httpd.conf
        

(1)
#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
#DocumentRoot "/var/www/html"
DocumentRoot "/home/mizuki/www/html"

(2)
#
# Relax access to content within /var/www.
#
#<Directory "/var/www">
<Directory "/home/mizuki/www">
    AllowOverride None
    # Allow open access:
    Require all granted
</Directory>

(3)
# Further relax access to the default document root:
#<Directory "/var/www/html">
<Directory "/home/mizuki/www/html">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options Indexes FollowSymLinks

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   Options FileInfo AuthConfig Limit
    #
    AllowOverride None

    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>
          

ApacheからTomcatに転送する設定を行う。

$ sudo vi /etc/httpd/conf.d/tomcat.conf
        

ProxyPass /static !
ProxyPass / ajp://localhost:8009/
          

• ${DocumentRoot}/static配下は転送しない。
• それ以外はTomcatに転送する。

Apacheのドキュメントルートのディレクトリを作成する。

$ pwd
/home/mizuki

$ mkdir www
$ mkdir www/html
$ mkdir www/html/static
        

Apacheがアクセスできるようにディレクトリの権限を変更(o+x)する。

$ ls -al /
drwxr-xr-x.   4 root root    34 11月 24 23:35 home

$ ls -al /home
drwx------. 20 mizuki mizuki 4096 11月 30 19:09 mizuki
$ chmod 701 /home/mizuki
$ ls -al /home
drwx-----x. 20 mizuki mizuki 4096 11月 30 19:09 mizuki

$ ls -al /home/mizuki
drwxrwxr-x.  3 mizuki mizuki   18 11月 30 20:25 www

$ ls -al /home/mizuki/www
drwxrwxr-x.  3 mizuki mizuki   20 11月 30 20:25 html

$ ls -al /home/mizuki/www/html
drwxrwxr-x. 2 mizuki mizuki 24 11月 30 20:25 static
        

動作確認用のファイルを作成する。

$ pwd
/home/mizuki/www/html/static

$ vi index.html
        

<!DOCTYPE html>
<html lang="ja">
  <head><title>Mizuki DocumentRoot</title></head>
  <body><p>It works!!!</p></body>
<html>
          

動作確認を行う。

$ sudo systemctl stop httpd
$ sudo systemctl stop tomcat
$ sudo systemctl start tomcat
$ sudo systemctl start httpd
        

ブラウザで表示する。
http://localhost/static/index.html
          

参考

• 【 cp 】コマンド――ファイルをコピーする
• CentOS 6.5 で ユーザーディレクトリに public_html を作り、その中の html ファイルを Apache で公開するためには
• Apache throws 403 Forbidden after moving DocumentRoot (CentOS 6.4)

4. Angularの開発環境をインストールする

4-1. nvm v0.35.1

nodeのバージョンを切り替えて環境構築できるようにバージョン管理を導入する。

インストールスクリプトを実行する。

$ pwd
/home/mizuki

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
        

~/.bashrcに書き込まれるので新しい端末を起動してインストールの成功を確認する。

Verify installation
https://github.com/nvm-sh/nvm#verify-installation
          

$ command -v nvm
nvm

$ nvm --version
0.35.1
        

参考

• Node Version Manager
• What is use of command: `command`?

4-2. node v12.14.0 (npm v6.13.4)

nvmを使ってnodeをインストールする。

利用可能なnodeのバージョンを調べる。

$ pwd
/home/mizuki

$ nvm ls-remote
v10.18.0   (Latest LTS: Dubnium)
v12.14.0   (Latest LTS: Erbium)
v13.5.0
        

バージョンを指定して安定版をインストールする。

$ pwd
/home/mizuki

$ nvm install 12.14.0
Downloading and installing node v12.14.0...
Downloading https://nodejs.org/dist/v12.14.0/node-v12.14.0-linux-x64.tar.xz...
######################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v12.14.0 (npm v6.13.4)
Creating default alias: default -> 12.14.0 (-> v12.14.0)
        

新しい端末で使用しているnodeのバージョンを確認する。

$ pwd
/home/mizuki

$ nvm use node
Now using node v12.14.0 (npm v6.13.4)

$ node -v
v12.14.0
        

バージョンを指定して開発版をインストールする。

$ pwd
/home/mizuki

$ nvm install 13.5.0
Downloading and installing node v13.5.0...
Downloading https://nodejs.org/dist/v13.5.0/node-v13.5.0-linux-x64.tar.xz...
######################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v13.5.0 (npm v6.13.4)
        

新しい端末で使用しているnodeのバージョンを確認する。

$ pwd
/home/mizuki

$ nvm use node
Now using node v13.5.0 (npm v6.13.4)

$ node -v
v13.5.0
        

インストール済みのバージョンを表示する。

$ pwd
/home/mizuki

$ nvm ls
        v12.14.0
->      v13.5.0
default -> 12.14.0 (-> v12.14.0)
node -> stable (-> v13.5.0) (default)
stable -> 13.5 (-> v13.5.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> v12.14.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.18.0 (-> N/A)
lts/erbium -> v12.14.0
        

使用するnodeのバージョンを "default" のaliasで指定されているものにする。

$ pwd
/home/mizuki

$ nvm use default
Now using node v12.14.0 (npm v6.13.4)

$ nvm ls
->      v12.14.0
        v13.5.0
default -> 12.14.0 (-> v12.14.0)
node -> stable (-> v13.5.0) (default)
stable -> 13.5 (-> v13.5.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> v12.14.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.18.0 (-> N/A)
lts/erbium -> v12.14.0

$ node -v
v12.14.0
        

参考

• Node Version Manager - Usage

4-3. Angular CLI 8.3.21

インストールできるバージョンの一覧を確認する。

$ pwd
/home/mizuki

$ npm info @angular/cli versions

[
'8.3.19',          '8.3.20',          '8.3.21'
]
        

バージョンを指定してローカルにインストールする。

$ pwd
/home/mizuki/workspace

$ npm install @angular/cli@8.3.21

> @angular/cli@8.3.21 postinstall /home/mizuki/workspace/node_modules/@angular/cli
> node ./bin/postinstall/script.js

? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. Yes

Thank you for sharing anonymous usage data. If you change your mind, the following
command will disable this feature entirely:

    ng analytics off

npm WARN saveError ENOENT: no such file or directory, open '/home/mizuki/workspace/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/mizuki/workspace/package.json'
npm WARN workspace No description
npm WARN workspace No repository field.
npm WARN workspace No README data
npm WARN workspace No license field.

+ @angular/cli@8.3.21
added 251 packages from 186 contributors and audited 2795 packages in 63.243s

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

found 0 vulnerabilities
        

ローカルにインストールするとパスが通っていない。

$ pwd
/home/mizuki/workspace

$ ng --version
bash: ng: コマンドが見つかりませんでした...
        

nodeの新しいコマンドnpxを使えばパスを指定しなくても使える。

$ pwd
/home/mizuki/workspace

$ npx ng --version

_                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
/ ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
            |___/


Angular CLI: 8.3.21
Node: 12.14.0
OS: linux x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.21
@angular-devkit/core         8.3.21
@angular-devkit/schematics   8.3.21
@angular/cli                 8.3.21
@schematics/angular          8.3.21
@schematics/update           0.803.21
rxjs                         6.4.0
        

サンプルアプリを実行して確認する。

$ pwd
/home/mizuki/workspace/angular

$ npx ng new my-app
? Would you like to add Angular routing? (y/N)
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]
  Stylus [ http://stylus-lang.com                                         ]

$ cd my-app

$ npx ng serve --open
ブラウザが起動して表示される。
ブラウザを閉じてCtrl+Cで終了する。
        

参考

• npm でインストール可能なパッケージのバージョンを調べる

4-4. Visual Studio Code 1.41.1

公式の手順でインストールを行う。

$ pwd
/home/mizuki

$ sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
$ sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
        

$ pwd
/home/mizuki

$ yum check-update
$ sudo yum install code
        

アプリケーションメニュー > アクティビティ > 検索ワード "code" から Visual Studio Code を起動する。アイコンを右クリックしてお気に入りに追加できる。

参考

• Visual Studio Code - Docs - SETUP - Linux - Installation - RHEL, Fedora, and CentOS based distributions

フォントを等幅の "Migu 1M" に変更する。

フォントのzipファイルをダウンロードして展開する。

$ pwd
/home/mizuki/src

$ unzip migu-1m-20150712.zip
Archive:  migu-1m-20150712.zip
   creating: migu-1m-20150712/
   creating: migu-1m-20150712/mplus-TESTFLIGHT-060/
  inflating: migu-1m-20150712/mplus-TESTFLIGHT-060/README_E  
  inflating: migu-1m-20150712/mplus-TESTFLIGHT-060/README_J  
  inflating: migu-1m-20150712/migu-1m-bold.ttf  
   creating: migu-1m-20150712/ipag00303/
  inflating: migu-1m-20150712/ipag00303/IPA_Font_License_Agreement_v1.0.txt  
  inflating: migu-1m-20150712/ipag00303/Readme_ipag00303.txt  
  inflating: migu-1m-20150712/migu-1m-regular.ttf  
  inflating: migu-1m-20150712/migu-README.txt  
        

フォントをインストールする。

アプリケーションメニュー > アクセサリ > ファイル を起動する。
  /home/mizuki/src/migu-1m-20150712 に移動する。
    migu-1m-regular.ttf
    migu-1m-bold.ttf
      右クリック > Fontsで開く > インストール
          

フォントを指定する。

File > Preferences > Settings
  Search settingsに "font" を入力する。
    Editor: Font Family
      'Migu 1M', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'
    Editor: Font Size
      18

  Search settingsに "whitespace" を入力する。
    Editor: Render Whitespace
      all

  Search settingsに "tab" を入力する。
    Editor: Tab Size
      2
          

参考

• Miguフォント
• Linux基本コマンドTips（35）：【 unzip 】コマンド――ZIPファイルからファイルを取り出す

5. Javaの開発環境をインストールする

5-1. Eclipse IDE for Enterprise Java Developers 2019-12 R (4.14.0)

Linux版のファイルをダウンロードする。

ダウンロードしたファイルを展開する。

$ pwd
/home/mizuki/ダウンロード

$ mv eclipse-jee-2019-12-R-linux-gtk-x86_64.tar.gz /home/mizuki/src

$ pwd
/home/mizuki/src

$ tar xvf eclipse-jee-2019-12-R-linux-gtk-x86_64.tar.gz
$ mv eclipse eclipse-jee-201912
$ mv eclipse-jee-201912 /home/mizuki/opt
        

シンボリックリンクを作成する。

$ pwd
/home/mizuki/opt

$ ln -s /home/mizuki/opt/eclipse-jee-201912 /home/mizuki/opt/eclipse-jee

$ ls -al
合計 4
drwxrwxr-x.  3 mizuki mizuki   51 12月 27 20:36 .
drwx-----x. 27 mizuki mizuki 4096 12月 27 20:33 ..
lrwxrwxrwx.  1 mizuki mizuki   35 12月 27 20:36 eclipse-jee -> /home/mizuki/opt/eclipse-jee-201912
drwxrwxr-x.  8 mizuki mizuki  191 12月 13 00:25 eclipse-jee-201912
        

Java VMを指定して起動する。

$ pwd
/home/mizuki/opt

$ /home/mizuki/opt/eclipse-jee/eclipse -vm /opt/java/bin/java

ワークスペースを指定する。
/home/mizuki/workspace/java
        

Eclipse全体の更新をインストールする。

Help > Check for Updates
          

EclipseのEGitの更新をインストールする。

Help > Install New Software...
  Add...
    Name: EGit
    Location: https://download.eclipse.org/egit/updates

Select Allしてインストールする。
バックグラウンドで実行されるのでRestartのダイアログが表示されるまで待つ。
          

参考

• The Eclipse Foundation
• EGit - The Eclipse Foundation

Eclipseを起動するショートカットを作成する。

GNOMEデスクトップメニューを編集するアプリケーションをインストールする。

アプリケーションメニュー > システムツール > ソフトウェア
  検索に "alacarte" を入力する。

  Menu editor for the GNOME desktop
  alacarte-3.11.91-1.el7

  チェックして『変更を適用』ボタン押下
          

ショートカットメニューを追加する。

アプリケーションメニュー > 諸ツール > メイン・メニュー
  左ペイン > プログラミング
    右ペイン
      新しいアイテム
        Launcher Propertiesダイアログ
          Name: Eclipse JavaEE
          Command: /home/mizuki/opt/eclipse-jee/eclipse
          Comment: 空欄
          [チェックしない] Launch in Terminal?

ここではコマンドの引数を追加できない。
アプリケーションメニューに追加される。
  アプリケーションメニュー > プログラミング > Eclipse JavaEE
          

メニューの設定ファイルを編集してコマンドに引数を追加する。終わったらOSを再起動する。

/home/mizuki/.local/share/applications/alacarte-made.desktop

[Desktop Entry]
Comment=
Terminal=false
Name=Eclipse JavaEE
Exec=/home/mizuki/opt/eclipse-jee/eclipse -vm /opt/java/bin/java
Type=Application
Icon=gnome-panel-launcher
          

メニューのEclipse JavaEEアイコンをお気に入りに追加する。

アプリケーションメニュー > アクティビティ > 検索ワード "eclipse"
  アイコンを右クリックしてお気に入りに追加する。
  左の縦バーでアイコンを上下移動できる。
          

参考

• Bug 1194145 - Alacarte disables OK key when there is an argument to a command
• freedesktop.org 規格のデスクトップファイルについてのメモ

フォントを等幅の "Migu 1M" に変更する。

Window > Preferences
  General
    Appearance
      Colors and Fonts
        Basic
          Text Font
            Edit
              Migu 1M Regular
              14
          

5-2. Spring Tool Suite 4 (4.5.0)

既存のEclipseにプラグインとしてインストールする。

Help > Install New Software...
  Add...
    Name: Spring Tools 4
    Location: https://download.springsource.com/release/TOOLS/sts4/update/e4.14/

Eclipseのバージョンに合わせてLocationを選択する。
Eclipse 2019-12は4.14.0となっている。

Select Allしてインストールする。
バックグラウンドで実行されるのでRestartのダイアログが表示されるまで待つ。
          

参考

• Spring Tools 4
• STS4
• Installation - Spring Tool Suite 4 (the Eclipse-based distribution)
• EclipseのMavenを実行するサンプル(Java)
• Building an Application with Spring Boot

6. VirtualBoxの環境を設定する

6-1. VirtualBoxのホストOSとゲストOS間で使える共有フォルダ

VMの電源をオフにして共有フォルダの設定ダイアログを表示する。

Oracle VM VirtualBox マネージャー > VMを選択(CentOS7-1908) > 設定
  共有フォルダー > 追加
    共有フォルダーの追加ダイアログ
      フォルダーのパス: D:\var\virtualbox\sharedfolder
      フォルダー名: sharedfolder
      [チェックしない] 読み込み専用
      [チェックする] 自動マウント
      マウントポイント: 空欄
          

VMを起動する。

デスクトップに共有フォルダーのアイコンが表示されている。光学ドライブのアイコンと重なっている場合がある。

共有フォルダーのマウント場所を確認する。

$ pwd
/media

$ ls -al
合計 0
drwxr-xr-x.  3 root root    29 12月 28 13:54 .
dr-xr-xr-x. 17 root root   224 12月 28 10:01 ..
drwxrwx---.  1 root vboxsf   0  9月 17 21:46 sf_sharedfolder
        

このままでは一般ユーザーでの読み書きができないので一般ユーザーをグループ(vboxsf)に追加する。

$ sudo gpasswd -a mizuki vboxsf
ユーザ mizuki をグループ vboxsf に追加
        

グループ(vboxsf)に追加したら一度ログアウトする。再度ログインすると書き込みができるようになっている。

参考

• Linux基本コマンドTips（72）：【 gpasswd 】コマンド――ユーザーが所属するグループを管理する