動画で学ぶJHipster (2) （インストール、プロジェクト生成、起動）

前回のJHipsterの紹介だけをしました。
今回はJHipsterのインストール、プロジェクト生成、起動を行います。

## 使用するビデオ
Get Started with JHipster 7
https://www.youtube.com/watch?v=6lf64CctDAQ
テキスト：https://github.com/mraible/jhipster7-demo

## 事前準備
Java 11, Node.js をインストールする。

<del>データベースも必要なのでなかったらインストールしておく。（自分の環境ではすでにMySQLが入ってた）</del>
＜＜
あとで調べて分かったけど、データベース選択時に、H2 with disk-based persistenceを選べばMySQLとかをインストールしておかなくても大丈夫らしい。動画では、*development* database には、H2 with disk-based persistenceを選択している。(また、動画では、*production* databaseにはPostgreSQLを選択している）

https://stackoverflow.com/questions/44571484/what-is-h2-with-disk-based-persistence-in-jhipster

# インストール
npmでJHipsterをインストールする。

```
npm i -g generator-jhipster@7.0.1
```

# プロジェクト生成

```
mkdir blog
cd blog
jhipster
```
`jhipster`を実行すると、以下のような画面が表示され・・・
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/750291b7-17a2-4b60-4cbe-8b9b72e0e422.png)
プロジェクト生成に関して、質問が２０個ぐらい来ます。
以下、質問と回答のコピペです。

回答は、下記以外は動画と同じにしました。

| 項目 | 動画 | 本記事|
|:-----------:|:------------:|:------------:|
| Production database| PostgreSQL | MySQL|
| Additional languages| Spanish| Japanese|

 
__? Which *type* of application would you like to create?__
Monolithic application (recommended for simple projects)

__? What is the base name of your application?__
blog

__? Do you want to make it reactive with Spring WebFlux?__
No

__? What is your default Java package name?__
org.jhipster.blog

__? Which *type* of authentication would you like to use?__
JWT authentication (stateless, with a token)

__? Which *type* of database would you like to use?__
SQL (H2, PostgreSQL, MySQL, MariaDB, Oracle, MSSQL)

__? Which *production* database would you like to use?__
MySQL

__? Which *development* database would you like to use?__
H2 with disk-based persistence

__? Which cache do you want to use? (Spring cache abstraction)__
Ehcache (local cache, for a single node)

__? Do you want to use Hibernate 2nd level cache?__
Yes

__? Would you like to use Maven or Gradle for building the backend?__
Maven

__? Do you want to use the JHipster Registry to configure, monitor and scale your application?__
No

__? Which other technologies would you like to use?__
何も選択しない。

__? Which *Framework* would you like to use for the client?__
Angular

__? Do you want to generate the admin UI?__
Yes

__? Would you like to use a Bootswatch theme (https://bootswatch.com/)?__
Default JHipster

__? Would you like to enable internationalization support?__
Yes

__? Please choose the native language of the application__
English

__? Please choose additional languages to install__
Japanese

__? Besides JUnit and Jest, which testing frameworks would you like to use?__
Cypress

__? Would you like to install other generators from the JHipster Marketplace?__
No




ここまでやると、JHipsterのプロジェクトが生成されます。

## （データベース接続の設定）
もし、*development* databaseをMySQLにした場合は、
`src/main/resources/config/application-dev.yml` の以下の部分を自分の環境に合うように設定する。
プロジェクト生成時にMySQLを選択したら下記のコードが生成されていました。（このusernameやpasswordを自分の環境に合わせて変更)

```application-dev.yml
datasource:
    type: com.zaxxer.hikari.HikariDataSource
    url: jdbc:mysql://localhost:3306/blog?useUnicode=true&characterEncoding=utf8&useSSL=false&useLegacyDatetimeCode=false&serverTimezone=UTC&createDatabaseIfNotExist=true
    username: root
    password:
```

# 起動
`./mvnw`を実行すると、ビルドして起動します。（ちょっと時間がかかります・・・）

結構待って、こんな感じの表示が出たらOKのようです。

```
----------------------------------------------------------
        Application 'blog' is running! Access URLs:
        Local:          http://localhost:8080/
        External:       http://172.28.128.1:8080/
        Profile(s):     [dev, api-docs]
----------------------------------------------------------
```

ブラウザで http://localhost:8080/ にアクセスすると、以下の画面が表示されます。

![9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/5852e3da-a74c-24a8-a425-eabbf0476450.png)

日本語版は、こんな感じになりました。
![10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284134/79744390-c237-7bc2-d3a6-3ff5877c040b.png)


# 今回のコード

`Initial version of blog generated by JHipster-7.0.1`まで。


https://github.com/sayuu-tf/learning_jhipster_3


(Development database をMySQLにした場合)
`DB(mysql)の設定`まで。

https://github.com/sayuu-tf/learning_jhipster_2

動画では、H2 with~を使っているので、次回からは、H2の方でやろうかなと。