Debian11にAngular13の開発環境を構築する

2021年12月25日(土)

環境

ディレクトリ構成

/
+-etc
|   +-apache2
|   |   +-mods-avaliable
|   |   |   |-proxy_ajp.conf
|   |   |
|   |   +-sites-avaliable
|   |       |-angular.localhost.conf
|   |
|   |-hosts
|   |
|   +-systemd
|       +-system
|           |-tomcat.service
|
+-home
|   +-mizuki
|       +-.nvm
|       |   +-versions
|       |       +-node
|       |           +-v16.13.1
|       |
|       +-opt
|       |   +-eclipse
|       |       +-jee-2021-12
|       |
|       +-workspace
|           +-angular13
|           |   +-SampleProject
|           |
|           +-eclipse
|
+-media
|   +-sf_sharedfolder
|
+-opt
|   +-eclipse-temurin-jdk-11.0.13+8
|   |   +-bin
|   |       |-java
|   |
|   |-java -> /opt/eclipse-temurin-jdk-11.0.13+8
|   |
|   +-tomcat
|       +-conf
|           |-server.xml
|           |-tomcat-users.xml
|
+-var
    +-www
        +-angular.localhost
        +-html

1. Gitをインストールする

1-1. Gitをインストールする

コマンド

sudo apt update
sudo apt install git

1-2. インストールしたGitのバージョンを確認する

コマンド

git --version

実行結果

git version 2.30.2

1-3. Gitに名前とメールアドレスを設定する

コマンド

git config --global user.name "Fukumura Mizuki"
git config --global user.email "mizuki@debian.home"

1-4. Gitの設定を確認する

コマンド

git config --list

実行結果

user.name=Fukumura Mizuki
user.email=mizuki@debian.home

1-X. 参考になるサイト

2. Google Chromeをインストールする

2-1. Google Chromeをダウンロードする

コマンド

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

2-2. Google Chromeをインストールする

sudo apt install ./google-chrome-stable_current_amd64.deb

2-3. Google Chromeを起動する

デスクトップ > アクティビティ > Google Chrome

Google Chromeを起動する
Google Chromeを起動する
Google Chromeを起動する

2-X. 参考になるサイト

3. Eclipse Temurinをインストールする

3-1. Eclipse Temurinをダウンロードする

Adoptiumウェブサイト > Linux x64 > Temurin 11 (LTS)

Eclipse Temurinをダウンロードする

3-2. ダウンロードしたファイルを展開する

コマンド

cd $HOME/ダウンロード
tar xvf OpenJDK11U-jdk_x64_linux_hotspot_11.0.13_8.tar.gz

3-3. 展開したファイルを配置する

コマンド

mv jdk-11.0.13+8 eclipse-temurin-jdk-11.0.13+8
sudo mv eclipse-temurin-jdk-11.0.13+8 /opt
sudo chown -R root:root /opt/eclipse-temurin-jdk-11.0.13+8

3-4. シンボリックリンクを作成する

コマンド

sudo ln -s /opt/eclipse-temurin-jdk-11.0.13+8 /opt/java

3-5. バージョンを確認する

コマンド

/opt/java/bin/java --version

実行結果

openjdk 11.0.13 2021-10-19
OpenJDK Runtime Environment Temurin-11.0.13+8 (build 11.0.13+8)
OpenJDK 64-Bit Server VM Temurin-11.0.13+8 (build 11.0.13+8, mixed mode)

3-X. 参考になるサイト

4. Apache Tomcatをインストールする

4-1. Apache Tomcatのユーザーを作成する

コマンド

sudo groupadd tomcat
sudo useradd -s /bin/false -g tomcat -d /opt/tomcat tomcat

4-2. Apache Tomcatをダウンロードする

Apache Tomcatウェブサイト > Download > Tomcat 10 > 10.0.14 > Binary Distributions > Core > tar.gz

4-3. ダウンロードしたファイルを展開する

コマンド

cd $HOME/ダウンロード
tar xvf apache-tomcat-10.0.14.tar.gz

4-4. 展開したファイルを配置する

コマンド

mv apache-tomcat-10.0.14 tomcat
sudo mv tomcat /opt
sudo chown -R root:root /opt/tomcat

4-5. パーミッションを設定する

コマンド

cd /opt/tomcat

sudo chgrp -R tomcat /opt/tomcat

sudo chmod -R g+r conf
sudo chmod g+x conf

sudo chown -R tomcat webapps/ work/ temp/ logs/

4-6. systemdサービスのファイルを作成する

コマンド

sudo nano /etc/systemd/system/tomcat.service

ファイルの内容

[Unit]
Description=Apache Tomcat Web Application Container
After=network.target

[Service]
Type=forking

Environment=JAVA_HOME=/opt/java
Environment=CATALINA_PID=/opt/tomcat/temp/tomcat.pid
Environment=CATALINA_HOME=/opt/tomcat
Environment=CATALINA_BASE=/opt/tomcat
Environment='CATALINA_OPTS=-Xms512M -Xmx1024M -server -XX:+UseParallelGC'
Environment='JAVA_OPTS=-Djava.awt.headless=true -Djava.security.egd=file:/dev/./urandom'

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

User=tomcat
Group=tomcat
UMask=0007
RestartSec=10
Restart=always

[Install]
WantedBy=multi-user.target

4-7. systemdサービスからTomcatを起動する

コマンド

sudo systemctl daemon-reload

sudo systemctl start tomcat
sudo systemctl status tomcat

実行結果

● tomcat.service - Apache Tomcat Web Application Container
      Loaded: loaded (/etc/systemd/system/tomcat.service; disabled; vendor preset: enabled)
      Active: active (running) since Sat 2021-12-25 19:39:40 JST; 17s ago
     Process: 6188 ExecStart=/opt/tomcat/bin/startup.sh (code=exited, status=0/SUCCESS)
    Main PID: 6195 (java)
       Tasks: 19 (limit: 9494)
      Memory: 129.1M
         CPU: 2.428s
      CGroup: /system.slice/tomcat.service
             └─6195 /opt/java/bin/java -Djava.util.logging.config.file=/opt/tomcat/conf/logging.properties -Djava.util.logging.manage>

12月 25 19:39:40 debian systemd[1]: Starting Apache Tomcat Web Application Container...
12月 25 19:39:40 debian startup.sh[6188]: Tomcat started.
12月 25 19:39:40 debian systemd[1]: Started Apache Tomcat Web Application Container.

# CTRL+Cで終了する。

ブラウザでTomcatの管理画面にアクセスする。

http://localhost:8080
ブラウザでTomcatの管理画面にアクセスする

OS起動時にTomcatが起動するように設定する。

コマンド

sudo systemctl enable tomcat

実行結果

Created symlink /etc/systemd/system/multi-user.target.wants/tomcat.service → /etc/systemd/system/tomcat.service.

4-8. Tomcatの管理画面のユーザーを登録する

設定ファイルにユーザーとパスワードを記述する。

コマンド

sudo nano /opt/tomcat/conf/tomcat-users.xml

ファイルの内容

<tomcat-users>
  <user username="admin" password="password" roles="manager-gui"/>
</tomcat-users>

Tomcatを再起動する。

コマンド

sudo systemctl restart tomcat

ブラウザでTomcatの管理画面にアクセスする。

http://localhost:8080

Manager Appボタンを押してユーザーとパスワードを入力して管理画面を開く。

Manager Appボタンを押してユーザーとパスワードを入力して管理画面を開く

4-9. TomcatのAJP Connectorを有効にする

コマンド。設定ファイルをバックアップしてから開く。

sudo cp -p /opt/tomcat/conf/server.xml /opt/tomcat/conf/server.xml.bak
sudo nano /opt/tomcat/conf/server.xml

ファイルの内容。addressをIPv6のループバックアドレスからローカルループバックアドレスに変更する。secretを設定する。

<!-- Define an AJP 1.3 Connector on port 8009 -->
<!--
<Connector protocol="AJP/1.3"
           address="::1"
           port="8009"
           redirectPort="8443" />
-->
<Connector protocol="AJP/1.3"
           address="127.0.0.1"
           port="8009"
           redirectPort="8443"
           secret="ajp-secret-value" />

Tomcatを再起動する。

コマンド

sudo systemctl restart tomcat
sudo systemctl status tomcat

4-X. 参考になるサイト

5. Apache HTTP Serverをインストールする

5-1. Apache HTTP Serverをインストールする

コマンド

sudo apt update
sudo apt install apache2

5-2. 動作確認を行う

コマンド

sudo systemctl status apache2

実行結果

● apache2.service - The Apache HTTP Server
      Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor preset: enabled)
      Active: active (running) since Mon 2021-12-27 10:44:25 JST; 25min ago
        Docs: https://httpd.apache.org/docs/2.4/
    Main PID: 3318 (apache2)
       Tasks: 55 (limit: 9494)
      Memory: 10.5M
         CPU: 348ms
      CGroup: /system.slice/apache2.service
             ├─3318 /usr/sbin/apache2 -k start
             ├─3320 /usr/sbin/apache2 -k start
             └─3321 /usr/sbin/apache2 -k start

12月 27 10:44:24 debian systemd[1]: Starting The Apache HTTP Server...
12月 27 10:44:25 debian systemd[1]: Started The Apache HTTP Server.

ブラウザでデフォルトページを表示する。

ブラウザでデフォルトページを表示する

Apacheのバージョンは存在しないページを指定した場合のエラーページで確認できる。

5-3. Angularアプリケーションを配置するためのディレクトリを作成する

コマンド

sudo mkdir -p /var/www/angular.localhost
sudo chown -R $USER:$USER /var/www/angular.localhost

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

コマンド

nano /var/www/angular.localhost/index.html

ファイルの内容

<html>
    <head>
        <title>Welcome to Angular!</title>
    </head>
    <body>
        <h1>Success! The Angular is working!</h1>
    </body>
</html>

5-4. バーチャルホストの設定を行う

バーチャルホストの設定ファイルを新規に作成する。

コマンド。

sudo nano /etc/apache2/sites-available/angular.localhost.conf

ファイルの内容

<VirtualHost *:80>
    ServerAdmin admin@angular.localhost
    ServerName angular.localhost
    ServerAlias www.angular.localhost
    DocumentRoot /var/www/angular.localhost
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

hostsファイルにangular.localhostを追加する。

コマンド

sudo nano /etc/hosts

ファイルの内容。タブ区切りになっている。

127.0.0.1 <tab> localhost
127.0.1.1 <tab> debian.home <tab> debian

127.0.0.1 <tab> angular.localhost

# The following lines are desirable for IPv6 capable hosts
::1 <tab> localhost ip6-localhost ip6-loopback
ff02::1 <tab> ip6-allnodes
ff02::2 <tab> ip6-allrouters

動作確認を行う。

コマンド。新しいサイトの設定を有効にする。

sudo a2ensite angular.localhost.conf

実行結果

Enabling site angular.localhost.
To activate the new configuration, you need to run:
  systemctl reload apache2

コマンド。デフォルトのサイトの設定を無効にする。

sudo a2dissite 000-default.conf

実行結果

Site 000-default disabled.
To activate the new configuration, you need to run:
  systemctl reload apache2

コマンド。新しいサイトの設定を検証する。

sudo apache2ctl configtest

実行結果

Syntax OK

コマンド。Apacheを再起動する。

sudo systemctl restart apache2

ブラウザでangular.localhostを表示する。

ブラウザでangular.localhostを表示する

5-5. Tomcatへの転送設定を行う

コマンド。利用可能なモジュールを確認する。

cd /etc/apache2/mods-available
ls -al | grep proxy

実行結果

-rw-r--r-- 1 root root   822  8月  8  2020 proxy.conf
-rw-r--r-- 1 root root    62  8月  8  2020 proxy.load
-rw-r--r-- 1 root root    87  8月  8  2020 proxy_ajp.load

proxy_ajpの設定ファイルを新規に作成する。

コマンド

sudo nano /etc/apache2/mods-available/proxy_ajp.conf

ファイルの内容

# Webアプリケーションの名前が SampleWebApplication の場合
# http://localhost/SampleWebApplication/ へのリクエストをTomcatへ転送する。
<Location /SampleWebApplication/>
    ProxyPass ajp://localhost:8009/SampleWebApplication/ secret=ajp-secret-value
</Location>

コマンド。proxyモジュールを有効にする。

sudo a2enmod proxy

実行結果

Enabling module proxy.
To activate the new configuration, you need to run:
  systemctl restart apache2

コマンド。proxy_ajpモジュールを有効にする。

sudo a2enmod proxy_ajp

実行結果

Considering dependency proxy for proxy_ajp:
Module proxy already enabled
Enabling module proxy_ajp.
To activate the new configuration, you need to run:
  systemctl restart apache2

コマンド。Apacheを再起動する。

sudo systemctl restart apache2

5-6. TomcatとApacheの必要なポートが開いているかを確認する

ポートスキャナーをインストールする。

コマンド

sudo apt install nmap

ローカルループバックアドレスで開いているポートを確認する。

コマンド

nmap 127.0.0.1

実行結果

Starting Nmap 7.80 ( https://nmap.org ) at 2021-12-27 19:09 JST
Nmap scan report for localhost (127.0.0.1)
Host is up (0.000052s latency).
Not shown: 997 closed ports
PORT     STATE SERVICE
80/tcp   open  http
8009/tcp open  ajp13
8080/tcp open  http-proxy

Nmap done: 1 IP address (1 host up) scanned in 0.11 seconds

5-X. 参考になるサイト

6. Node Version Managerをインストールする

使用するNodeのバージョンを簡単に切り替えられるようになる。

6-1. Node Version Managerをインストールする

コマンド。Node Version Managerをインストールする。

cd /home/mizuki
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

新しい端末を起動するとnvmコマンドが有効になる。

コマンド。インストールしたNode Version Managerのバージョンを確認する。

nvm -v

実行結果

0.39.1

6-2. Nodeのバージョン16(LTS)をインストールする

コマンド。Nodeのバージョン16(LTS)をインストールする。

nvm install 16

コマンド。Nodeのバージョン16(LTS)を使用する。

nvm use 16

実行結果

Now using node v16.13.1 (npm v8.1.2)

コマンド。Nodeのバージョンを確認する。

node -v

実行結果

v16.13.1

6-X. 参考になるサイト

7. Angular CLIをインストールする

7-1. Angular CLIをインストールする

コマンド。Angular CLIのインストール可能なバージョンを確認する。

npm info @angular/cli versions

実行結果

[
  '12.2.13',         '12.2.14',         '13.0.0-next.0',   '13.0.0-next.1',
  '13.0.0-next.2',   '13.0.0-next.3',   '13.0.0-next.4',   '13.0.0-next.5',
  '13.0.0-next.6',   '13.0.0-next.7',   '13.0.0-next.8',   '13.0.0-next.9',
  '13.0.0-rc.0',     '13.0.0-rc.1',     '13.0.0-rc.2',     '13.0.0-rc.3',
  '13.0.0',          '13.0.1',          '13.0.2',          '13.0.3',
  '13.0.4',          '13.1.0-next.0',   '13.1.0-next.1',   '13.1.0-next.2',
  '13.1.0-next.3',   '13.1.0-rc.0',     '13.1.0',          '13.1.1',
  '13.1.2',          '13.2.0-next.0',   '13.2.0-next.1'
]

最新版をローカルにインストールする。

コマンド。最新版をローカルにインストールする。

cd /home/mizuki/workspace/angular13
npm install @angular/cli

コマンド。インストールしたバージョンを確認する。ローカルインストールの場合はインストールしたディレクトリ配下でnpxコマンドを付けて実行する。

npx ng version

実行結果

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

Angular CLI: 13.1.2
Node: 16.13.1
Package Manager: npm 8.1.2
OS: linux x64

Angular: undefined
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1301.2
@angular-devkit/core         13.1.2
@angular-devkit/schematics   13.1.2
@angular/cli                 13.1.2
@schematics/angular          13.1.2

7-2. プロジェクトを作成して動作確認を行う

コマンド

cd /home/mizuki/workspace/angular13

npx ng new SampleProject
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]

cd SampleProject
npx ng serve

# ブラウザで http://localhost:4200/ を開く。
# ブラウザを閉じてからCTRL+Cで終了する。
プロジェクトを作成して動作確認を行う

7-X. 参考になるサイト

8. 等幅フォントをインストールする

8-1. フォントをダウンロードする

公式サイトから等幅フォントのMigu 1Mのzipファイルをダウンロードする。

migu-1m-20200307.zip

8-2. フォントをインストールする

コマンド。zipファイルを展開する。

cd /home/mizuki/ダウンロード
unzip migu-1m-20200307.zip

デスクトップ > アクティビティ > ファイルを開く。zipファイルを展開したディレクトリ配下のmigu-1m-bold.ttfとmigu-1m-regular.ttfを右クリック > Fontsで開くからインストールを行う。

ファイル > 右クリック > Fontsを開く > インストール

参考になるサイト

9. Visual Studio Codeをインストールする

9-1. Visual Studio Codeをダウンロードする

公式サイトから.debファイルをダウンロードする。

9-2. Visual Studio Codeをインストールする

公式サイト > Docs > SETUP > Linux > Installation > Debian and Ubuntu based distributionsのコマンドを実行する。

コマンド

cd /home/mizuki/ダウンロード
sudo apt install ./code_1.63.2-1639562499_amd64.deb

デスクトップ > アクティビティから起動できる。

9-3. フォントを設定する

File > Preferences > Settings

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

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

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

9-4. 拡張機能をインストールする

参考になるサイト

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

10-1. Eclipse Installerをダウンロードする

公式サイト > Download > Get Eclipse IDE 2021-12 > Download Packages > Try the Eclipse Installer > Linux x86_64

10-2. Eclipse Installerをインストールする

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

cd /home/mizuki/ダウンロード
tar xvf eclipse-inst-jre-linux64.tar.gz

10-3. Eclipse IDEをインストールする

コマンド。インストーラーを起動する。

cd /home/mizuki/ダウンロード/eclipse-installer
./eclipse-inst

Eclipse IDE for Enterprise Java and Web Developersを選択する。

eclipseinstaller > Eclipse IDE for Enterprise java and Web Developersを選択する

Java VMとインストール先のディレクトリを指定する。

Java 11+ VM        : JRE17.0.1 - https://download.eclipse.org/justj/jres/17/updates/release/17.0.1
Installation Folder: /home/mizuki/opt/eclipse/jee-2021-12

[x] create start menu entry
[x] create desktop shortcut
eclipseinstaller > Java VMとインストール先のディレクトリを指定する

インストール後にインストーラーのLaunchボタンから実行するとEclipse IDE Launcherダイアログが小さく表示されて起動できない。ダイアログを閉じてデスクトップ > アクティビティから起動する。

デスクトップ > アクティビティから起動する

Workspaceは/home/mizuki/workspace/eclipseにする。

10-4. EGitをインストールする

公式サイト > Download > Installing the Latest Release > Main Update Siteを使ってインストールする。

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

Select Allで全てを選択してインストールする。

10-5. Spring Tools 4 (aka Spring Tool Suite 4)をインストールする

Eclipse Marketplaceからインストールする。

Help > Eclipse Marketplace
  Search
    Find: Spring Tools

    Spring Tools 4 (aka Spring Tool Suite 4) 4.13.0.RELEASE

10-6. JREを追加する

Window > Preferences
  Java
    Installed JREs
      Add...

      Standard VM
        JRE home: /opt/java
        JRE name: eclipse-temurin-jdk-11.0.13+8

追加したJRE(Java11)をデフォルトにする。

コンパイラの設定をJava11にする。

Window > Preferences
  Java
    Compiler
      JDK Compliance
        Compiler Compliance level: 11

10-7. フォントを設定する

Window > Preferences
  General
    Appearance
      Colors and Fonts

      Basic
        Text Font
          Edit...
            Migu 1M Regular
            サイズ: 24

10-X. 参考になるサイト