【Maven】初めての挑戦!アプリ作成〜herokuにデプロイまでの道のり〜

Maven10 プログラミング
スポンサーリンク

この記事ではエクリプスを使ってMavenプロジェクト】の作成方法を紹介します。

そして、簡単なMavenプロジェクトを作成した後はheroku】にデプロイしたいと思います。

  • Mavenプロジェクトの作成方法がわからない….
  • Herokuを使って自分で作ったアプリをインターネット上に公開したい!

そんな方の役に立てばいいなと思います。

ちなみに今回作成するプログラムは以下のようなすごく簡単なシンプルなもので、手順通りやればこのようなものが作成できます。

サンプルを見る

それでは最後までご覧ください。

環境

Pleiades All in Oneでエクリプスをインストールしていてeclipseのバージョンは「4.8.0」

開発言語は「Java」

Pleiades All in Oneをインストールする

インストール方法はこちらで紹介しています。

Mavenプロジェクトの作成

Maven10

今回Mavenで作るアーキタイプは【maven-archetype-webapp】というものを使います。

それでは見ていきましょう!

まずは、メニューバーの「ファイル」から「Mavenプロジェクト」を選択します。

Maven1

デフォルト・ワークスペース・ロケーションの使用」にチェックされてるのを確認して「次へ

Maven2

 

maven-archetype-webapp」を選択

Maven3

 

グループid」「アーティファクトid」は任意。今回は両方とも「mvnapptest」にします。入力出来たら「完了」を押して終了です。 Maven4

 

以下のようなフォルダ構造になると思います。

Maven5

各種設定

次に、「JREシステムライブラリーの変更」、「プロジェクト・ファセットの変更」、「pom.xmlにコードを追加」これらの設定を行います。これを行わないとプロジェクトがうまく実行できなかったり、エラーになると思います。

それでは一つずつ見ていきましょう。

JREシステムライブラリーの変更

JERシステム・ライブラリー」を右クリック「プロパティ」→「JavaSE-1.8 (java8)」を選択

Maven6

 

プロジェクト・ファセットの変更

mvnapptest」(プロジェクト)で右クリック「プロパティ」→「プロジェクト・ファセット」→Javaのバージョンを1.8に設定します。

Maven7

 

pom.xmlにコードを追加

pom.xmlファイルを開き、「概要」を開きます。

更にプロパティの「作成」で以下の文を記述します。

  • java.version : 1.8
  • maven.compiler.source:1.8
  • maven.compiler.target:1.8

Maven8

 

次に、Servlet APIの設定をします。以下のサイトから「Java Servlet API 4.0.1」(2020年7月時点で最新)の「Maven」のコードをコピーしてpom.xmlに貼り付けます。

Maven8

貼り付ける場所は<dependencies>~</dependencies>の中に貼り付けます。

Maven9

これでサーブレットが使えるようになりました。

以上で最初にやらなきゃいけない設定は終了です。次はサーブレットとJSPの作成をしていきましょう。

簡単なアプリを作成

最初に紹介したサンプルアプリを作る方法を紹介します。アプリを作るには「サーブレット」と「JSP」を使います。

サーブレットとは、Javaのコードを記述し、データベースとの接続やブラウザからの指示に対して処理を行うためのものです。

JSPとは、基本的にはブラウザの見た目を作成するもので、HTMLのようなものですがJavaのコードも記述できます。

この2つを使ってアプリを作っていきます。実際にファイルの作り方やプログラムは下記で紹介しているので1つずつ見ていきましょう。

サーブレット

サーブレットは「Javaリソース」の中の「src/main/java」フォルダに作成します。
しかし、まだ「src/main/java」フォルダがないので作成しなければなりません。

作成の方法は「デプロイ済リソース」の下に「src」フォルダがあると思います。その中に「main」フォルダがあるのでそこに「java」フォルダを作成します。

◉「main」フォルダの上で右クリック → 新規 → フォルダ → フォルダ名を「java」にします。

ついでに「src/test/java」も作っておきましょう。

デプロイ済みリソース
src
| _main
|    |_java ←作成する
|    |_resource
|_test ←作成する
 |_java ←作成する

すると「Javaリソース」の下に「src/main/java」フォルダが作成されるのでそこにサーブレットを作成します。

今回は「testパッケージを作成してその中に「Test.java」ファイルを作成します。

testパッケージの作成方法
src/main/java」ファイルの上で右クリック → 新規 → パッケージ → 名前の所に「test」と入力して → 完了

Test.javaファイルの作成方法
今作成した「test」パッケージの上で右クリック → 新規 → クラス → 名前の所に「Test」と入力 → 完了 ※.javaの拡張子は記述しなくて大丈夫です。

これでサーブレットの準備ができました、Test.javaファイル名の中身はまだ何もしなくて大丈夫です。

フォルダ構造は以下のようになります。

Javaリソース
 |_src/main/java ←自動で作成される
   |_test
     |_Test.java

 

JSP

次はJSPファイルを作成していきましょう。

JSPは「main」フォルダの中に「webapp」フォルダがあるのでここに作成していきます。

webapp」フォルダを開くとすでに「index.jsp」ファイルがあると思いますが、新しくファイルを作る時はまずフォルダを作成してからJSPファイルを作成したほうがいいと思います。

今回は「test」フォルダを作成し、その中に「test.jsp」ファイルを作成します。

testフォルダの作成方法
webapp」フォルダの上で右クリック → 新規 → フォルダ → フォルダ名を「test」と入力 → 完了

test.japファイルの作成方法
上で作成した「test」フォルダの上で右クリック → 新規 → ファイル → ファイル名を「test.jsp」と入力 ※拡張子まで入力してください → 完了

test.jspのファイルの中身はまだ何もしなくて大丈夫です。

フォルダ構造は以下のようになります。

webapp
   |_test ←作成する(フォルダ)
   |   |_test.jsp
   |_index.jsp
サーブレットとJSPのファイルが作成できたらプログラムを記述しましょう。
サーブレットとJSPの中身(プログラム)は以下のサイトのコードをコピーして各ファイルに貼り付けてください
※コードを貼り付けるときはもともとあるコードを消すか上書きしてください

Mavenプロジェクトの実行

上のサイトからコードをコピーして各ファイルに貼り付けたらプロジェクトを実行してみましょう。

プロジェクト(mvnapptest)」で右クリック →「実行」→「サーバーで実行」すると「サーバーの選択画面」になります。

そこで「Tomcatv8.5サーバー」を選択して「常にこのサーバーを使用」にチェックを入れ「完了」を押すとプロラムが実行されます。(次回からはサーバーの選択はないはずです)

Maven11

プロジェクトを実行すると以下のように表示されると思います。

test_appプログラムへ」というリンクをクリックすると以下の画像のページに遷移します。

test_app1

このプログラムはラジオボタンで選択されたものが英語で表示されるという簡単なプログラムです。
最初に「デプロイできました!」と表示されていますが実はまだデプロイできていません。。。

これは自分のパソコンでしか見れないので次は、このプログラムをインターネット上に公開して誰でも見れるようにする方法を紹介します。

herokuにデプロイ

上で作った簡単なプログラムを今度はインターネット上に公開するやり方を紹介したいと思います。

デプロイする方法は「Heroku」を使います。

Herokuにデプロイする為にはさらに新しく「Procfile」ファイルと「system.properties」ファイルを作成し、「pom.xml」にコードを追加する必要があります。

その方法とデプロイする為の手順は以下の記事で紹介しています。

更にHerokuで無料で使えるデータベース「PostgerSQL」の接続方法も紹介していますのでご覧ください。

まとめ

以上、Mavenプロジェクトの作成の方法〜サーブレット・JSPの作成〜実行。

そして最後にHerokuへのデプロイの方法を紹介しました。

Mavenプロジェクトの作成は無事できましたでしょうか?

Pleiades All in Oneをインストールしたバージョンとかが違ったら各所変更が必要な所もあると思います。

うまくいかなかったら見直してみましょう。

プログラミングをもっと勉強したいと思った方は 【何から勉強すべき?】を解決!プログラミング勉強順序〜java〜 から独学で勉強できます。

もっと手っ取り早く技術を身につけたい方は以下のサイトをご覧下さい

↓↓↓

以上、最後まで読んで頂きありがとうございました。