Tech Hotoke Blog

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

Vue×SpringでSPA作成6【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

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