Spring Boot + Angular + MongoDB Rest API Tutorialをやってみた

はじめに

IT企業在籍6年目にして、開発経験がびっくりするほどないため、何か自分で作ってみたいんですけど、どういうものがいいですかねーと各方面に相談していたところ（悲しいことにアイデアはない）、ある方から「こういうのはいかがですか？」と教えていただきました。

Spring Boot + Angular + MongoDB Rest API Tutorial

英語のサイトで、2017年と少し古いのですが、
フロントエンド、バックエンド、データベースというアプリの基礎の基礎がなんとなくですがわかります。
自分はWebアプリを作ったことがないので、やっていて「こういう作業しないといけないのか」とわかっていくのが楽しかったです（大規模だとまた違うのかもしれませんが）

備忘＆今後同じことを試してみる人がいたら（いるのか？）役に立つかなぁと思い、残しておきます。

環境

* macOS Catalina * Eclipse Version: 2020-09 (4.17.0)

手順1. Projectをつくる

[Spring Initialzr](https://start.spring.io/)を用いて、Spring Bootアプリケーションのひな型を作成しました。 多少画面が変わっていますが、手順通りにやれば特に問題ないと思います。

（参考）Spring Initializrでアプリケーションのひな型を作成する

手順2. MongoDBを設定する

ローカルにMongoDBを設定しました。 MongoDB公式の手順通りにできます。 私はmacOSなので、brew使って行っています。

本当は、AWSのEC2にMongoDBをインストールして接続したかったのですが、
インストールまではできたものの、接続はできませんでした…誰か教えてください（泣）
公式手順：https://docs.mongodb.com/manual/tutorial/install-mongodb-on-amazon/

手順3. ToDoモデルの作成

アノテーション（@NotBlunk、@Size）でエラー。 調べたところ、pox.xmlに以下を入れると解決。

pom.xml

@Sizeの場合：
        <dependency>
           <groupId>javax.validation</groupId>
          <artifactId>validation-api</artifactId>
          <version>1.1.0.Final</version>
        </dependency>


@NotBlankの場合：
        <dependency>
          <groupId>org.glassfish</groupId>
          <artifactId>javax.el</artifactId>
          <version>3.0.1-b09</version>
        </dependency>

手順4. Controllerの作成

@GetMappingの    Sort sortByCreatedAtDesc = new Sort(Sort.Direction.DESC, "createdAt"); で、エラーが出るので    Sort sortByCreatedAtDesc = Sort.by(Sort.Direction.DESC, "createdAt"); にする。

Javaのビルドには、手順通りにMavenを使用。
Homebrewを入れているので、brew install mavenで実施。
普通にBUILD FAILUREになり、以降を参照にしてPATHなどもろもろを修正。
maven超入門：https://qiita.com/tarosa0001/items/e5667cfa857529900216

ビルド成功後、localhost:8080を見てみると、
以下のようなエラーページ（が見つからないよ、という意味のページ）が見える。
この時点ではフロントエンドを作っていないので、このままでOK。

手順5. Controllerの作成

Angularはnode.jsを利用するため、node.jsをインストールする。 Homebrewを使用してのインストールは手順通りに。 （参考）[Angular CLI 環境作成方法（Mac環境）](https://qiita.com/koronpo/items/cc7d3a1aabb7900e1e8e) エラーが発生した際には、以下のQiitaに助けていただきました。 （参考）[HomebrewでNode.jsをインストール＋エラーの解決方法](https://qiita.com/Dozle/items/dcb2d3e389f592a3398a)

手順6. 各種修正

以降のステップは、元サイトの手順のままでも大きなエラーがなかったため省略。 1. appを稼働させる 2. AppComponentのテンプレートを変える 3. Todoクラスを作成する（todo.ts） 4. TodoListComponentを作成する（todo-list.component.ts） ・手順通りにHttpModuleを使用すること（最新版ではHttpClientModuleを推奨されている） 5. TodoListComponentのテンプレートを作成する 6. styles.cssに追加する

一個だけ、
（参考）AngularでCan't resolve 'rxjs/add/operator/toPromise'と言われた時の対処法
が起こりました。

手順7. いよいよ！

Angluar、SpringBoot、MongoDBを起動させたところ、無事機能しました。 

手順8. おわりに

最初は手順7のときにすんなり機能してくれず、色々調べて結局原因がわからないので、一度全部ストップして、MongoDB、SpringBoot、Angularと起動させたらうまくいきました。

なんとなくではありますが、フレームワークを使うことの意味とか、フロントエンド・バックエンド・データベースのそれぞれの接続の方法とかわかったので、作ってよかったと思います。
これからも習うより慣れろで色々作ってみたいと思っています。