TechHotoke’s diary

日々の学びについて記事としてまとめてます。

Vue×SpringでSPA作成⑨【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
  • IDESTS
  • AWS(EC2,RDS,ELBなど)

やること

構成

なぜTomcatを導入するのか?

導入

  • 踏み台サーバー経由で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をURLに追加してアプリケーションの画面を表示さてみます。 f:id:TechHotoke:20220117190046p:plain

  • なんでだよぉ!!!...明日以降はこちらのエラー解消に取り組みます。

参考

Vue×SpringでSPA作成⑧【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
  • IDESTS
  • AWS(EC2,RDS,ELBなど)

やること

  • RDSへDBサーバーを移行する

やらないこと

構成

f:id:TechHotoke:20220110141231p:plain

なぜRDSに移行するのか?

  • 現状の構成では、Webサーバーの台数を増やしたいという要望が出てきた場合にDBサーバーもWebサーバーと同じだけ複製されてしまうから
  • その場合、リクエストによってアクセスできるDBが変わる可能性がありデータの生合成が取れなくなるから

RDSとは?

  • マネージドなデータサービス f:id:TechHotoke:20220111230112p:plain

  • 以下のRDBMSが使用可能 f:id:TechHotoke:20220111225721p:plain

  • DBのバージョンはAWSが提供しているものしか選択できない

  • DBインスタンスのスペックに上限がある

  • DBインスタンスのOSにはログインできない

    • パラメータグループとオプショングループによって設定をある程度変更することは可能
  • DBインスタンスの起動中でもストレージを増やすことが可能(減らすことは不可能)

  • マルチAZ配置を簡単に実現できる

  • リードレプリカ(読み取り専用DB)を使用することでDBインスタンスの負荷を低減することが可能

  • サブネットはパブリックにも配置可能(推奨はプライベート)

  • 自動的にバックアップを取得する(トランザクションログ+スナップショット)

    AmazonAuroraについて

  • MySQLとPostgre SQLと互換性のあるRDBMS
  • 処理能力が高く、MySQLの5倍、PostgreSQLの3倍
  • 障害体制に優れている(3つのAZに6つのデータをコピーする)

構築

  • VPCに新規のセキュリティグループを作成

    • インバウンドルールのソースにweb-appを選択。アウトバウンドルールは不要のため削除。 f:id:TechHotoke:20220111231538p:plain
  • RDSに移動

  • RDSにサブネットグループの新規作成(サブネットがわかりづらいので注意。privateサブネットを選択すること) f:id:TechHotoke:20220111231843p:plain

  • パラメータグループの作成 f:id:TechHotoke:20220111232144p:plain

  • RDSの作成

    • MySQLを選択
    • 今回は無料利用枠を使用
    • 接続する VPCを選択し、サブネットグループに上記で作成したものを選択
    • 追加設定の欄で、上記で作成したパラメータグループを選択
  • 踏み台サーバー経由でインスタンスにログインし、mysql -u admin -p -h [エンドポイント] コマンドでMySQLサーバーにログインする

  • `CREATE USER <User名> IDENTIFIED BY <パスワード>でユーザー作成

  • CREATE DATABASE <DB名>でDB作成

  • GRANT ALL PRIVILEGES ONコマンドで権限の付与を行う

  • RDSからログアウトし、mysqldump -u root -p TempleTaskManager > tms-db_20220113.sql コマンドを実行してEC2インスタンスのDBからデータをダンプする(下記のようにSQLファイルが生成されていればOKです) f:id:TechHotoke:20220113065732p:plain

  • mysql -u tmsAdmin -p -h templetaskmanager.cbjux39qgfk7.ap-northeast-1.rds.amazonaws.com TempleTaskManager < tms-db_20220113.sql;にてRDS のDBにデータをインポートする

  • mysql -u tmsAdmin -p -h templetaskmanager.cbjux39qgfk7.ap-northeast-1.rds.amazonaws.com TempleTaskManager;でRDS のDBにログインし、SHOW TABLESコマンドでテーブルが生成されていることを確認 f:id:TechHotoke:20220113070230p:plain

  • 念の為、SELECT文でデータも確認しておく

  • 確認ができたら、MySQLからログアウトし、DBの接続先(application.properties)をRDSのエンドポイントに変更する pring.datasource.url=jdbc:mysql://[エンドポイント]:[DBポート]/[DB名]

  • ELBのDNS名を利用してアプリケーションのURLにアクセスし、画面が正常に表示されればOk f:id:TechHotoke:20220113071938p:plain

  • sudo systemctl stop mysqldを実行し、EC2で起動しているMySQLを停止する

  • sudo systemctl status mysqldを実行し、statusがinactiveになっていることを確認

  • サーバー自動起動の設定をしていたので、そちらもsudo systemctl disable mysqldを実行して無効化しておきます(Removed symlinkとターミナルに表示されていればOKです)

  • sudo systemctl is-enabled mysqldを実行し、disableと表示されれば完了です

今回はここまでとなります。 お付き合い頂きありがとうございます。

Vue×SpringでSPA作成⑦【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
  • IDESTS
  • AWS(EC2)

やること

  • 踏み台サーバーの構築
  • AWIの取得
  • NATGatewayの作成
  • ELBの作成

やらないこと

構成

f:id:TechHotoke:20220103064131p:plain

踏み台サーバーの作成

踏み台サーバーとは?

  • プライベートサブネットに配置したサーバーにアクセスするための手法 メリット
  • 外部から各サーバーに直接アクセスできないので、セキュリティの向上につながる
  • 外部通信に対するアクセス制御の対象を踏み台サーバーに限定できるため運用負荷を軽減できる デメリット
  • サーバーが一台増えるので管理コストが上がる

構築

  • EC2インスタンスをpublic-subnet-aに新たに作成(手順省略)
  • ElasticIPアドレスを新規作成し、上記手順で作成したEC2インスタンスに関連づける
  • 既存のセキュリティグループのSSH接続で割り当てられているIPアドレスを上記で作成したものに変更する
  • ここまで設定したら、確認として既存のEC2インスタンスに直接ログインできないことを確認する
  • SSH ポートフォワーディングを使って踏み台サーバーを経由してWebサーバーにログインする
  • 新規ウィンドウでターミナルを開き、ssh -i ~/.ssh/tms-dev-keypair.pem ec2-user@localhost -p 10022コマンドでWebサーバーにアクセスする
  • lsコマンドなどアプリケーションのソースが存在することを確認できたら完了 f:id:TechHotoke:20220103154439p:plain
SSH ポートフォワーディングとは?

SSHコネクション上で任意のポートへの通信を特定ポートへ転送する機能です。これはSSHの機能で、sshコマンドにポートを転送するオプションがデフォルトで備わっています。異なるサーバー間でセキュリティやネットワークの設定によって直接アクセスができない場合に利用されます。

代表的な2つのSSHポートフォワーディング

  • ローカルポートフォワード: クライアントユーザーや稼働するソフトウェアから見た、自らのコンピュータまたは端末 リモートホスト…ローカルのクライアントから見た、ネットワークで接続する先のコンピュータまたは端末 サーバーを中継して、クライアントのポートをリモートホストのリモートポートに転送します。

ssh -L {port}:{remotehost}:{remoteport} {server}

  • リモートポートフォワード: クライアント…ユーザーや稼働するソフトウェアから見た、自らのコンピュータまたは端末 リモートホスト…クライアントから接続するホストから見た、ネットワークで接続する先のコンピュータまたは端末 クライアントを中継して、サーバーのポートをリモートホストのリモートポートに転送します。

ssh -R {port}:{remotehost}:{remoteport} {server}

パブリックサブネットに配置されているEC2インスタンスを別サブネットに移行する

今回はAMIを作成して、そこからEC2インスタンス立ち上げていきます。

AMIとは?

  • ソフトウェア構成 (オペレーティングシステムアプリケーションサーバー、アプリケーションなど) を記録したテンプレート。EC2の元となるイメージ的なもの
  • 独自でカスタムしたAMIを書き出し、それを利用することで、冗長構成の構築、復旧作業などが比較的簡単に行える

AMIの作成

  • 該当のWebサーバーからイメージを作成を選択 f:id:TechHotoke:20220103155442p:plain
  • 適当な名前とタグをつけて(現在日時を入れると後々混乱しなくて良いです)作成
  • リンクをクリック
  • イメージからインスタンスを起動を選択
  • Protected-aのサブネットに配置
  • 既存のセキュリティグループからweb-appを選択
  • インスタンスを作成
  • 作成したインスタンスに踏み台サーバーの作成で行ったことと同じ設定を施す
  • Webサーバーにアクセスできることを確認する
  • Webサーバーにアクセスしたら、下記コマンドなどを使って外部のネットワークに接続できなくなっていることを確認する wget https://ja.wordpress.org/latest-ja.tar.gz
  • 処理が行われずタイムアウトすると思われるので、そうなれば完了です

添付画像のようなWARNINGが発生したので、対処方法をまとめておきます

f:id:TechHotoke:20220104164438p:plain

  • SSHでは初回接続時に接続先ホストの公開鍵を保存しておき、次回接続時にホスト鍵を比較して前回と同じホストに接続したかを確認するような仕組みになっています。そのため、IPアドレスの振り直しやOS再インストールなどでホスト鍵が変わってしまった場合、エラーメッセージが出てSSH接続が失敗してしまいます。
  • 中間者攻撃対策に備わっている機能だと思います

中間者攻撃とは二者間の通信を特別なソフトウェアなどの不正な手段を用いて傍受、盗聴して内容を取得するといったもの

  • 対処

    • $HOME/.ssh/known_hostsの該当行を削除する

    • またはssh-keygenコマンドの-Rオプションで消すこともできるらしいです

      $ ssh-keygen -R example.com

    • 次のような形式でホスト名に加えてポート番号を指定することもできます。[]はシェルのワイルドカード文字ですので、クォーティングは必須です

      $ ssh-keygen -R '[example.com]:10022'

NATゲートウェイの作成

STSのエラーが発生し、あまりにもイライラしたのでInteliJに乗り換えました。なのでここからInteliJを使用して開発していきます。

NATゲートウェイとは?

  • NAT(Network Address Transration):プライベートIPアドレスグローバルIPアドレスに変換する技術
  • インターネットからプライベートサブネットへのアクセスはできなくなる f:id:TechHotoke:20220105171442p:plain
  • NATGateWayはAWSが提供するNATの機能を実現するためのサービス
  • サブネットの設定、ElasticIPアドレスの設定によってNATの機能を簡単に実現することが可能 f:id:TechHotoke:20220105171909p:plain
  • ベストプラクティスとしては、異なるアベイラビリティゾーンごとに NATGateWayを設置して、冗長構成を実現する(NATGateWayが設置されたアベイラビリティゾーンに障害が発生した場合のセーフティネットとして) f:id:TechHotoke:20220105172508p:plain

構築

NATゲートウェイ

  • VPCを検索
  • ナビゲーションペインからNATゲートウェイを選択
  • NATゲートウェイを作成ボタンを押下
  • public-aサブネットを選択する(protectedにしないように注意)

NATゲートウェイ用のサブネットを作成する

  • ルートテーブルを作成
  • ルートテーブルにルート0.0.0.0/0、NAtゲートウェイを選択して作成
  • protectedサブネットの関連づけを行う f:id:TechHotoke:20220105174327p:plain
  • 踏み台サーバー経由でインスタンスにログインする
  • wget https://ja.wordpress.org/latest-ja.tar.gzコマンドなどを実行してインターネットにアクセスできることを確認 f:id:TechHotoke:20220105184006p:plain

ELBの作成

ELBとは?

  • 負荷分散のサービス。ロードバランサーの役割を担うサービス
  • ELBは自動でスケーリングされる
  • ひとつのELBを設置することで、アベイラビリティーゾーンごとにELBが配置されているような構成になる
  • ELBの種類 f:id:TechHotoke:20220106075349p:plain
    • ALB:アプリケーション層で使用。パスベースルーティングを行う(URL含まれるパスに応じて接続するサーバーを切り替える)
    • NLB: トランスポート層で使用。Webサーバー以外の負荷分散に使われる。
    • CLB:旧世代なので使用は非推奨
ELBについて
  • インターネット向けと内部
    • インターネット向け:インターネットから通信が可能
    • 内部:インターネットから通信不可
    • 後から変更できないので注意
  • リスナー
    • どのような通信を受付け、どこに転送するかの設定
    • パスベースルーティングはこの転送先の設定で行うことができる
  • アベイラビリティゾーンとサブネット
    • インターネット向けを選択した場合はパブリックサブネットに配置しないと通信できないので注意
    • 自動でスケールアウトした場合にサブネットのIPアドレスを使用する(ベストプラクティスはサブネットに最低8つのI Pアドレスを作成しておくこと)
  • セキュリティグループ
  • ターゲットグループ
    • 負荷分散の大賞サーバーをまとめたグループ
  • ヘルスチェック f:id:TechHotoke:20220106152330p:plain
  • スティッキーセッション
    • 同じユーザーからきたリクエストを同じターゲット(サーバー)に転送する
    • クッキーを使用して、同じターゲットに転送する

構築

  • ELBを検索し、機能からロードバランサーを選択
  • ロードバランサーを作成を選択
  • Application Loadbalancerを選択
  • Internet向けを選択(記事執筆時では、UIが英語な感じになっていたので、画像を添付します) f:id:TechHotoke:20220106161807p:plain
  • 該当のVPCを選択
  • セキュリティグループを新規作成(HTTP通信ポート80と8080[おそらくTomcatの接続で使うので]をインバウンドルールに設定) f:id:TechHotoke:20220106161930p:plain
  • public-subnet-a及びcをMappingする f:id:TechHotoke:20220106162148p:plain
  • HTTPポート80/8080をリスナーに追加
  • ターゲットグループを新規作成し、適当な名称をつけてデフォルト設定のままターゲットの作成に進む
  • web-app-protectedをターゲットに選択して作成
  • 画像のようにセッションの維持設定を行う f:id:TechHotoke:20220106170940p:plain
  • ロードバランサー作成画面に戻り、リスナーのfoward先に作成したターゲットを選択
  • ロードバランサーの作成を選択
  • 踏み台サーバ経由でインスタンスにログインした状態で、./gradlew bootRunを実行してアプリケーションを起動
  • ロードバランサーに割り当てられたDNSとアプリケーションのポート番号でアクセス
  • こうなった。Damn... f:id:TechHotoke:20220106182628p:plain

502BadGatewayの対処

  • 公式が主にこのような原因が考えられると教えてくれてます(親切)

f:id:TechHotoke:20220106184215p:plain

引用: Application Load Balancer のトラブルシューティング - Elastic Load Balancing

まずはEC2に原因があるのかALBに原因があるのか切り分けたいので、ALBのログを取得できるようにしていきたいと思います。

ALBのアクセスログを有効化して、 f:id:TechHotoke:20220106185849p:plain

S3の添付画像のパスの形式でログが保存されているので、そちらをダウンロードします f:id:TechHotoke:20220109224648p:plain

ログには以下のような情報が記載されているようです。

http 
2022-01-09T13:33:03.219781Z 
app/tms-dev-alb-public/af018ae04d93b735 
14.11.32.1:16804 
10.0.10.54:80 
-1 
-1 
-1 
502 
- 
637 
1077 
"GET http://tms-dev-alb-public-1362974723.ap-northeast-1.elb.amazonaws.com:8080/favicon.ico HTTP/1.1" 
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36" 
- 
- 
arn:aws:elasticloadbalancing:ap-northeast-1:187609072069:targetgroup/tms-dev-tg-public/f25101ace9787ef1 
"Root=1-61dae40f-4edfd59f2cd80e0a78d44d6c"
"-"
"-" 
0 
2022-01-09T13:33:03.192000Z 
"forward" 
"-" 
"-" 
"10.0.10.54:80" 
"-" 
"-" 
"-"

f:id:TechHotoke:20220109232859j:plain

ログを見ると、ロードバランサーが502を返し、ターゲットからの応答が無いようなので、ロードバランサーの問題ということが分かりました。 また、バックエンドからではなく、ELBから502が返ってきていることが分かりました。

つまり、ELBのどこかしらの設定に問題がありそうなので、探してみると

セキュリティグループはpublicなので問題なさそう。

f:id:TechHotoke:20220110121252p:plain

ターゲットグループはHTTP80番ポートを受けて、ターゲットには対象のprotectedサブネットに配置したEC2インスタンスが指定されているので問題なさそう(EC2インスタンス接続の際に80ポートは使わないので削除しました)

f:id:TechHotoke:20220110121600p:plain

リスナーのポートを確認すると。。。8080が登録されていなかったので、8080を以下のように追加。

f:id:TechHotoke:20220110121156p:plain

ELBのDNS名:ポート/アプリケーションのルートパスでアクセスすると、アクセスできました!

f:id:TechHotoke:20220110121637p:plain

今回はここまでとなります。

お付き合い頂きありがとうございます。 次回はDBをRDSに移行していきます。

EC2インスタンスにHTTP接続しようとしたらできなかったのでなんとかした。

f:id:TechHotoke:20220101162410p:plain

利用サービス

  • VPC
  • EC2
  • CloudWatch

現状

  • セキュリティグループは8080ポート(今回接続するアプリケーションのポート)に対して、全ての通信を許可

f:id:TechHotoke:20220101144039p:plain

f:id:TechHotoke:20220101144140p:plain

  • 割り当てられているサブネットはパブリックなインターネットに公開されている

f:id:TechHotoke:20220101144436p:plain

  • SSH接続は行えている

対応

VPCフローログでログを確認する

VPC フローログとは

VPC のネットワークインターフェイスとの間で行き来する IP トラフィックに関する情報をキャプチャできるようにする機能です。フローログデータは Amazon CloudWatch Logs または Amazon S3 に発行できます。 引用:

VPC フローログ - Amazon Virtual Private Cloud

今回はCloudWatchにログを出力するようにしていきたいと思います。

  • ナビゲーションペインからCloudWacthを選択
  • ロググループを作成
  • 適当な命名とタグ付けを行う
  • 監視対象とするVPCに移動
  • フローログタブから、フローログを作成ボタンを押下
  • 適当な名称などをつける
  • IAM ROLEを選択する際に新規作成する(補完で表示されるロールの設定値を見てみるとlogsに対する許可が無いっぽいので一応)

以下公式から引用。これらが最低限必要な権限

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Action": [
        "logs:CreateLogGroup",
        "logs:CreateLogStream",
        "logs:PutLogEvents",
        "logs:DescribeLogGroups",
        "logs:DescribeLogStreams"
      ],
      "Effect": "Allow",
      "Resource": "*"
    }
  ]
}   

デフォルトの補完で出てくるのは以下のロール JSONを確認すると権限が無いか、部分的に許可されているっぽいのが分かる f:id:TechHotoke:20220101153100p:plain

  • タグなど必要な情報を追加したら作成
  • EC2にSSHでアクセスしておく
  • 添付画像のようにロググループに対してログが生成される f:id:TechHotoke:20220101154153p:plain

ログの検証

  • REJECTされている通信があったので、フィルタリングを行う
  • 10.0.0.20ポートにアクセスしようとしているのが原因っぽい f:id:TechHotoke:20220101155933p:plain
  • 10.0.0.20はEC2インスタンスに割り当てられているプライベートIPアドレスということを確認
  • 再度インスタンスを再起動し、EC2にアクセス
  • 繋がった。。。

モヤっと解決 何が原因だったのでしょう・・・ とりあえず、 VPCのフローログを検証することでデバッグできるそうなので、その方法の備忘録として。

Vue×SpringでSPA作成⑥【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
  • IDESTS
  • AWS(EC2)

やること

やらないこと

  • RDSの導入
  • Tomcatのインストール

構成

f:id:TechHotoke:20220103062427p:plain

事前準備

  • 一旦現状作成したfrontendのソースをJavaのstatic配下に格納する
  • gradle buildを実行
  • Buildが成功したことを確認し、8080ポートで想定通りの画面が表示されることを確認する

f:id:TechHotoke:20211224065325p:plain f:id:TechHotoke:20211224065344p:plain

  • git hub にpushする

AWSの設定

techhotoke.hatenablog.com

techhotoke.hatenablog.com

過去の記事で作成したVPCとEC2インスタンスを使っていきます。(OSはAmazon Linux2)

  • EC2にSSH接続した状態で、sudo yum update -yを実行。(Macユーザーはターミナル、WindowsユーザーはTeratermなどをお使いください)

ja.osdn.net

  • EC2にsudo yum install git -yを実行してgitをインストールする

  • 対象のgit hubリポジトリからcloneを行う

  • デフォルトでホームディレクトリにいるはずなので、User直下にcloneしたプロジェクトが存在する(はず)

f:id:TechHotoke:20211224070832p:plain

f:id:TechHotoke:20211224071020p:plain

  • sudo amazon-linux-extras install java-openjdk11 -yを実行してJavaをinstallする

  • java -versionJavaがインストールされていることを確認

  • ./gradlew buildを実行

失敗しました(笑)

f:id:TechHotoke:20211224073054p:plain

  • build.gradleにnpm installを実行するTaskが残されたままだったので、一旦そちらをコメントアウトして再度ビルド

f:id:TechHotoke:20211224073208p:plain

MySQLのインストール

  • sudo yum install -y https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpmyumリポジトリを取得する

  • yum install -y mysql-serverを実行

  • mysql --versionで存在確認

  • sudo systemctl start mysqldでサーバーの起動

  • systemctl status mysqldでStatusがActiveになっていることを確認

f:id:TechHotoke:20211224074708p:plain

  • sudo grep 'temporary password' /var/log/mysqld.logで初期パスワードを確認

  • mysql -u root -pで先ほどのパスワードを使ってアクセスが出来ることを確認して一旦ログアウト

  • mysql_secure_installationで設定を変更し、rootユーザーのパスワードなどを変更する

  • 変更したパスワードで再度ログインできることを確認

  • exitコマンドでMySQLからログアウト

  • sudo systemctl enable mysqldを実行して自動起動設定を行う

  • systemctl is-enabled mysqldを実行してenabledが表示されれば設定完了

  • `CREATE USER <User名> IDENTIFIED BY <パスワード>でユーザー作成

  • CREATE DATABASE <DB名>でDB作成

  • GRANT ALL PRIVILEGES ONコマンドで権限の付与を行う

  • 認証の機構が組み込まれているアプリケーションをデプロイするので一旦必要なテーブルを作成して必要なユーザーのデータのみINSERTしておく

アプリケーションのデプロイ

  • EC2にインストールしたMySQLに設定したユーザー名、パスワードでアクセスできるようにapplication.properties(またはyml)ファイルの設定値を書き換える
  • IPアドレスlocalhostになっていると思うので、EC2のパブリックIPアドレスに書き変える
  • アプリケーションのルートディレクトリで./gradlew buildを実行する(git cloneするのを忘れずに)
  • ビルドが成功したら、~/build/libs直下にjarなりwarなりが生成されていることを確認
  • 今回はSpringに内包されているTomcatを一旦使用してアプリケーションを動かしていくので、アプリケーションのルートディレクトリに移動して./gradlew bootRunでアプリケーションを起動します
  • 起動を確認したら、EC2のElasticIPアドレスとTomcatのポート番号(たぶん8080になってると思いますが一応確認を)を使ってアクセスする

    アクセスが弾かれたので、以下の記事に対応をまとめましたので参考まで(モヤっと解決されたので、よくわからないですが・・・)

techhotoke.hatenablog.com

  • インスタンスに関連づけられたElasticIPアドレスと、アプリケーションを動かしているTomcatのポート番号にアクセスして画面が表示されれば完了です。 f:id:TechHotoke:20220103055748p:plain

f:id:TechHotoke:20220103055807p:plain

今回はここまでです。 お付き合い頂きありがとうございます。

AWS入門【Amazon EC2】

f:id:TechHotoke:20211219010249p:plain

目的

AWS学習の備忘録。

備忘録のため、詳細な説明を省略している部分があります。

前提

ネットワークの基本的な知識があること。

ゴール

EC2インスタンスを作成し、SSH接続を行う

環境

Amazon EC2(Elastic Compute Cloud)とは

  • AWS上に仮想サーバを作るサービス
  • 仮想サーバーはインスタンスという単位で管理される
  • セキュリティグループという仮想ファイアウォールをアタッチすることでインバウンド・アウトバウンドの通信を制御できる
  • キーペアの設定
  • 料金は従量課金
  • インスタンスを終了すると元に戻すことはできない(停止と区別する必要がある)

Amazon AMI

インスタンスタイプ

t2.micro

Amazon EBS

  • Amazon EC2のデータを保存するブロックストレージ
    • ブロックストレージとは

      データをブロックと呼ばれる単位で保存するストレージの種類の1つです。ブロックストレージを管理するシステムは、データを保存する際にはブロック単位に切り分け、データを読み出す際には切り分けたブロックから元のデータを復元します。ブロックストレージのメリットとしては高速にデータを取得できることが挙げられます。 一般的にブロックストレージはサーバーなどから切り離され、FC(Fiber Channel)やFCoE(Fiber Channel over Ethernet)、iSCSI(Internet Small Computer System Interface)などで構築されたネットワークで接続します。このようにサーバーとストレージを接続するネットワークを特にSAN(Storage Area Network)と呼びます。このようにサーバーとストレージを切り離すことで、ストレージを複数のサーバーで共有して利用することが可能になり、ストレージの効率的な運用や拡張性の確保など、さまざまなメリットを得られます。

引用:

ブロックストレージとは?意味・定義 | ITトレンド用語 | NTTコミュニケーションズ

  • インターネットを経由してEC2にアクセスする
  • 同じアベイラビリティゾーンのEC2にしかアクセスできない
  • デタッチ・アタッチが自由
  • ボリュームタイプ f:id:TechHotoke:20211219225009p:plain

EC2インスタンスの作成

キーペアの作成

  • コンソールからEC2を検索
  • キーペアを作成ボタンを押下
  • 添付画像のように入力 f:id:TechHotoke:20211219230117p:plain
  • キーペアを作成
  • ダウンロードされた秘密鍵を.ssh配下に移動しておく mv tms-dev-keypair.pem ./ssh

ElasticIPの取得

  • ElasticIPアドレスの割り当てボタンを押下
  • タグのみ作成 f:id:TechHotoke:20211221000448p:plain
  • 割り当てボタン押下

EC2インスタンスの構築

  • インスタンスを起動ボタンを押下
  • AmazonLinux2を選択
  • インスタンスタイプはt2.microを選択
  • ネットワークに該当の VPCを選択
  • サブネットにpublic-aのサブネットを選択
  • ストレージはデフォルトのまま
  • タグを以下の通り追加 f:id:TechHotoke:20211221001113p:plain
  • 任意のセキュリティグループ名を付与
  • SSHIPアドレスをマイIPに変更
  • HTTPを許可する(設定はデフォルト)
  • keypairを選択
  • インスタンスの作成

Elastic IPアドレスの関連付け

SSH接続確認

  • 秘密鍵の権限を狭めるchmod 400 ~/.ssh/tms-dev-keypair.pem
  • ssh接続のコマンドを実行ssh -i ~/.ssh/tms-dev-keypair.pem ec2-user@54.95.153.46
    • ホストにはElasticIPアドレスを指定しています。
  • ログイン完了 f:id:TechHotoke:20211221005506p:plain
  • 起動中のインスタンスを停止して終わり(終了にしないように注意)

今回はここまでとなります。 お付き合いいただきありがとうございます。

AWS入門【Amazon VPC】

f:id:TechHotoke:20211219010249p:plain

目的

AWS学習の備忘録。

備忘録のため、詳細な説明を省略している部分があります。

前提

ネットワークの基本的な知識があること。

ゴール

添付画像の構成を実現すること。 f:id:TechHotoke:20211219010045j:plain

Amazon VPC(Amazon Virtual Private Cloud)とは

  • AWSアカウント内に構築できる仮想ネットワーク
  • 各リージョンごとに指定
  • VPCで使用するIPアドレスはCIDRブロック形式で指定する(/16が推奨:CIDRブロックを後から変更できないため)
  • プライベートIPアドレスの仕様が推奨
  • インターネットゲートウェイVPCが外部のネットワークと接続するために必要となるAWSコンポーネント
  • ルートテーブル:サブネットごとに通信経路を決定する機能

    セキュリティグループ

  • サーバー単位で適用
  • 許可をIN/OUTで設定
  • ステートフルなファイアウォールのこと

    ネットワークACL

  • サブネット単位で適用
  • 許可/拒否をIN/OUTで設定
  • ステートレスなファイアウォールのこと f:id:TechHotoke:20211219001221p:plain

VPCの作成

  1. コンソールからVPCを選択
  2. VPCを選択ボタンを押下
  3. 名前タグに適当な名前を入力(今回はプロジェクト名-環境名-リソース名-リソースの識別子の形式で作成します)
  4. IPv4CIDRに/16を指定 f:id:TechHotoke:20211219002820p:plain
  5. タグにProjectとDevelopmentを追加
  6. VPCを作成を押下

サブネットの作成

  1. サブネットを選択ボタンを押下
  2. VPC IDに先ほど作成したVPCを選択
  3. 添付画像のように入力 f:id:TechHotoke:20211219003404p:plain
  4. タグは同上
  5. その他のサブネットを作成する f:id:TechHotoke:20211219004002p:plain

インターネットゲートウェイの設定

  1. インターネットゲートウェイを作成ボタンを押下
  2. 名前タグに適当なものを入力(今回はtms-dev-igw-web)
  3. 作成
  4. VPCへアタッチを選択
  5. 該当のVPCを選択しアタッチ

ルートテーブルの作成

  1. ルートテーブルを作成ボタンを押下
  2. 名前タグに適当なものを入力(今回はtms-dev-route-public)
  3. 該当のVPCを選択
  4. ルートテーブルを作成
  5. 作成したルートテーブルのルートタブを選択
  6. 添付画像のように入力 f:id:TechHotoke:20211219005015p:plain
  7. 変更を保存
  8. サブネットの関連づけタブからサブネットの関連づけを編集ボタンを押下
  9. public VPCにチェックを入れる
  10. 関連づけを保存