Tech Hotoke Blog

IT観音とは私のことです。

Vue×SpringでSPA作成9 - 1【AWSにアプリケーションのデプロイ】

f:id:TechHotoke:20211226002024p:plain

まえがき

こちらの記事の続編です。

techhotoke.hatenablog.com

目的

VueとSpringで作成したプロジェクトの構築手順の備忘録。 備忘録のため、詳細な説明を省略している部分があります。

前提

  • 基本的なJavaの知識やSpring、Vueの知識があること。
  • AWSに関する基本的な知識があること
  • ネットワークに関する基本的な知識があること

環境

  • Java 11
  • Spring Boot2.5.6
  • Gradle 7.1.1
  • Vue2.6
  • IDE:InteliJ
  • AWS(EC2,RDS,ELBなど)

構成

f:id:TechHotoke:20220130145022j:plain

やること

導入

  • 踏み台サーバー経由でEC2インスタンスにログインする
  • Javaのバージョンを一応確認しておく→ openjdk 11.0.13 2021-10-19 LTS
  • sudo yum install tomcatコマンドを実行してみる
============================================================================================================================================================================================================
 Package                                                         アーキテクチャー                      バージョン                                           リポジトリー                               容量
============================================================================================================================================================================================================
インストール中:
 tomcat                                                          noarch                                7.0.76-10.amzn2.0.2                                  amzn2-core                                 92 k
//以下省略

yum経由ではTomcat7系しかインストールできない

  • Tomcatの公式を見てみる

f:id:TechHotoke:20220114071024p:plain

参考:Apache Tomcat® - Which Version Do I Want?

最新は10系で、Javaのバージョン的には互換はありそうですが、

Please note that although we offer downloads and documentation of older releases, such as Apache Tomcat 7.x, we strongly encourage users to use the latest stable version of Apache Tomcat whenever possible. We recognize that upgrading across major versions may not be a trivial task, and some support is still offered on the mailing list for users of old versions. However, because of the community-driven support approach, the older your version, fewer people will be interested or able to support you.

とのことで、古いバージョンは非推奨なので、極力安定したバージョンを使用したく、前の記事までアプリケーションを動かしていたSping内包のTomcatのバージョンが9系だったので今回はそちらに合わせて行きたいと思います。

そして親切なことにtomcat installコマンドを実行すると下記のような文言が。。。

tomcat is available in Amazon Linux Extra topics "tomcat8.5" and "tomcat9"

To use, run
# sudo amazon-linux-extras install :topic:
  • sudo amazon-linux-extras install tomcat9 -yコマンドを実行します

  • インストールが完了したら、systemctl status tomcatでステータスを確認

● tomcat.service - Apache Tomcat Web Application Container
   Loaded: loaded (/usr/lib/systemd/system/tomcat.service; disabled; vendor preset: disabled)
   Active: inactive (dead)
  • sudo systemctl start tomcatコマンドを実行※管理者権限でないと実行できないはずなので注意

  • systemctl status tomcatを再度実行すると添付画像のようにサーバーが起動していることが確認できる f:id:TechHotoke:20220117105655p:plain

  • ここでtomcatの場所を一応確認しておきます。sudo su -コマンドなどで管理者権限に移行したのち、ルートディレクトリに移動

  • find . | grep tomcatコマンドで検索してみると大量に出てきます

  • find . | grep tomcat | webappsでさらに絞り込むと(webappsはインストールされたTomcatにしか存在しないはずなので)、下記のようにusr/share配下にいることが分かります。

./var/lib/tomcat/webapps
./usr/share/tomcat/webapps
  • varとかtmpとかは一時ファイルや変数なので一旦無視して、実態がusr/share配下にありそうなので、そちらに移動します。

  • tomcatディレクト上でls -laを実行すると以下のように構成されているかと思います。

total 4
drwxrwxr-x  3 root root   91 Jan 17 01:54 .
drwxr-xr-x 99 root root   4096 Jan 13 22:18 ..
drwxr-xr-x  2 root root    102 Jan 13 22:18 bin
lrwxrwxrwx  1 root root   11 Jan 13 22:18 conf -> /etc/tomcat
lrwxrwxrwx  1 root root   22 Jan 13 22:18 lib -> /usr/share/java/tomcat
lrwxrwxrwx  1 root root   15 Jan 13 22:18 logs -> /var/log/tomcat
lrwxrwxrwx  1 root root   22 Jan 13 22:18 temp -> /var/cache/tomcat/temp
lrwxrwxrwx  1 root root   23 Jan 13 22:18 webapps -> /var/lib/tomcat/webapps
lrwxrwxrwx  1 root root   22 Jan 13 22:18 work -> /var/cache/tomcat/work
  • -> の右辺はシンボリックリンクが設定されているみたいです。権限も全開放されていますが、一旦このまま行きます。

  • sudo useradd -s /sbin/nologin tomcatコマンドでtomcatの実行ユーザーを作成します

  • ルートディレクトリに移動し、sudo chown -R tomcat:tomcat ./usr/share/を実行して所有権を変更

  • ls -l ./usr/share/tomcatコマンドを実行して所有者とグループがtomcatに変更されていることを確認

drwxr-xr-x 2 tomcat tomcat 102  1月 13 22:18 bin
lrwxrwxrwx 1 tomcat tomcat  11  1月 13 22:18 conf -> /etc/tomcat
lrwxrwxrwx 1 tomcat tomcat  22  1月 13 22:18 lib -> /usr/share/java/tomcat
lrwxrwxrwx 1 tomcat tomcat  15  1月 13 22:18 logs -> /var/log/tomcat
lrwxrwxrwx 1 tomcat tomcat  22  1月 13 22:18 temp -> /var/cache/tomcat/temp
lrwxrwxrwx 1 tomcat tomcat  23  1月 13 22:18 webapps -> /var/lib/tomcat/webapps
lrwxrwxrwx 1 tomcat tomcat  22  1月 13 22:18 work -> /var/cache/tomcat/work
  • 続いて、Tomcat自動起動設定を行います

  • /usr/lib/systemd/system/tomcat.serviceというファイルが作成されていることを確認。存在しない場合は以下を参考に作成してください。

# Systemd unit file for default tomcat
#
# To create clones of this service:
# DO NOTHING, use tomcat@.service instead.

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

[Service]
Type=simple
EnvironmentFile=/etc/tomcat/tomcat.conf
Environment="NAME="
EnvironmentFile=-/etc/sysconfig/tomcat
ExecStart=/usr/libexec/tomcat/server start
SuccessExitStatus=143
User=tomcat

[Install]
WantedBy=multi-user.target
  • systemctl enable tomcat.serviceコマンドを実行し、Loaded: loadedに続く 箇所がenbledに変更されていることを確認
Loaded: loaded (/usr/lib/systemd/system/tomcat.service; enabled(←コレ); vendor preset: disabled)
  • アプリケーションを./gradlew buildコマンドでビルドします。

  • build/libs配下にjarなりwarなりが生成されていることを確認

  • sudo cp TMS-0.0.1-SNAPSHOT.war /usr/share/tomcat/webapps/コマンドでtomcatの配下に引っ越しします。(mvでも可です)

  • ls -a /usr/share/tomcat/webapps/でwebapps配下に任意のファイルが格納されていることを確認できればOKです。

  • tomcatを起動し、warが展開されていることを確認

TMS-0.0.1-SNAPSHOT  TMS-0.0.1-SNAPSHOT.war
  • webapps配下にROOTディレクトリを作成し、ROOTディレクトリ配下に動作確認用で適当にindex.htmlなどのファイルを作成します。
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <H1>Hello Tomcat!</H1>
</body>
</html>
  • 例のごとくELBのDNS名:8080/にアクセスし、添付画像のような画面が返ってこれば一旦Okです。 f:id:TechHotoke:20220117185551p:plain

  • 続いて、TMS-0.0.1-SNAPSHOT/frontend(アプリケーションのルートパス)をURLに追加してアプリケーションの画面を表示さてみます。 f:id:TechHotoke:20220117190046p:plain

  • なんでだよぉ!!!...明日以降はこちらのエラー解消に取り組みます。長くなったので、一旦こちらの記事はここまでにして別記事にまとめます。ここまでお付き合い頂きましてありがとうございます。

参考