Casual Developers Notes

初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。エンジニアもデザイナーも技術と英語を身に着けて海外に飛び立とう！

You are here: Home / Archives for 技術 Tips & Tutorials

By Leave a Comment

動かして分かる! SpringFrameworkのIoCの方法およびDIの使い方

動かして分かる! SpringFrameworkのIoCの方法およびDIの使い方

JavaやKotlinでWebアプリケーションを作るのであればSpringFrameworkを利用するのが一般的であり、SpringFrameworkと言えばDIコンテナの代表格です。今回は、SpringFrameworkの初学者向けにIOCとDI方法をまとめて紹介します。

はじめに

DI(Dependency Injection)とは、日本語では「依存性注入」と訳されているため初学者には意味不明ですが、要はクラス同士を疎結合で利用する手法です。合わせて、ありのままのクラスを表したPOJO(Plain Old Java Object)という言葉もあります。大昔のEJB全盛期は密結合で実装せざるを得なかったらしく、Plain Oldというあたりは歴史を物語っているようですね。現在ではDIを使うことで各クラス間は疎結合に保たれるので、POJOをそのまま組み合わせて利用するのが普通です。SpringFrameworkのIoC(Inversion of Control)、日本語では「制御の逆転」ですが、要はDIの利用方法と捉えれば良いと思います。DIの利用方法は、登場した2003年当時はXMLによる方法しか提供されていませんでしたが、現在ではアノテーションが主流となっています。とはいっても、おそらく現場レベルで最も多く使われているのはXMLとアノテーションのハイブリッドでしょう。アノテーションは便利ですが、XMLには柔軟性があります。

今回は、SpringFrameworkのDIの利用方法(「IoC方法」と表記)およびDIの使い方をまとめて紹介します。

前提

以下がインストールされている前提で進めます。

  • Java10
  • Maven3

細かいバージョンは「環境」を参照して下さい。

サンプルアプリケーションを作る

まずはMavenで雛形を作成し、DIするためだけに拡張したHelloWorldのサンプルアプリケーションを作ります。

$ mvn -B archetype:generate \
> -DarchetypeGroupId=org.apache.maven.archetypes \
> -DgroupId=com.example.project \
> -DartifactId=spring-di-sample-app
$ cd spring-di-sample-app/
$ tree
.
├── pom.xml
└── src
    ├── main
    │   └── java
    │       └── com
    │           └── example
    │               └── project
    │                   └── App.java
    └── test
        └── java
            └── com
                └── example
                    └── project
                        └── AppTest.java
$ rm src/main/java/com/example/project/App.java
$ rm src/test/java/com/example/project/AppTest.java
...(IDEで編集)...
$ tree
.
├── pom.xml
├── spring-di-sample-app.iml
└── src
    ├── main
    │   ├── java
    │   │   └── com
    │   │       └── example
    │   │           └── project
    │   │               ├── SampleApp.java
    │   │               ├── domain
    │   │               │   ├── HelloWorld.java
    │   │               │   └── HelloWorldImpl.java
    │   │               └── service
    │   │                   ├── EnglishGreetingServiceImpl.java
    │   │                   ├── JapaneseGreetingServiceImpl.java
    │   │                   └── WorldGreetingService.java
    │   └── resources
    └── test
        └── java
            └── com
                └── example
                    └── project

それぞれのソースコードは以下です。

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.example.project</groupId>
  <artifactId>spring-di-sample-app</artifactId>
  <packaging>jar</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>spring-di-sample-app</name>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>10</java.version>
    <spring.version>5.0.7.RELEASE</spring.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.7.0</version>
        <configuration>
          <target>${java.version}</target>
          <source>${java.version}</source>
          <release>${java.version}</release>
        </configuration>
      </plugin>
    </plugins>
  </build>

</project>

HelloWorld.java

package com.example.project.domain;

public interface HelloWorld {

  public String expression();

}

HelloWorldImpl.java

package com.example.project.domain;

import com.example.project.service.WorldGreetingService;
import java.time.LocalDateTime;

public class HelloWorldImpl implements HelloWorld {

  private WorldGreetingService greetingService;

  public HelloWorldImpl(WorldGreetingService greetingService) {
    this.greetingService = greetingService;
  }

  @Override
  public String expression() {
    LocalDateTime dateTime = LocalDateTime.now();
    int hour = dateTime.getHour();

    String expression;
    if (hour >= 4 && hour <= 9) {
      expression = greetingService.morningGreeting();
    } else if (hour >= 10 && hour <= 17) {
      expression = greetingService.afternoonGreeting();
    } else {
      expression = greetingService.eveningGreeting();
    }

    return expression;

  }

}

WorldGreetingService.java

package com.example.project.service;

public interface WorldGreetingService {

  public String morningGreeting();

  public String afternoonGreeting();

  public String eveningGreeting();

}

EnglishGreetingServiceImpl.java

package com.example.project.service;

public class EnglishGreetingServiceImpl implements WorldGreetingService {

  private String targetName;

  public EnglishGreetingServiceImpl(String targetName) {
    this.targetName = targetName;
  }

  @Override
  public String morningGreeting() {
    return "Good morning, " + targetName + ".";
  }

  @Override
  public String afternoonGreeting() {
    return "Hello, " + targetName + ".";
  }

  @Override
  public String eveningGreeting() {
    return "Good evening, " + targetName + ".";
  }
}

JapaneseGreetingServiceImpl.java

package com.example.project.service;

public class JapaneseGreetingServiceImpl implements WorldGreetingService {

  private String targetName;

  public JapaneseGreetingServiceImpl(String targetName) {
    this.targetName = targetName;
  }

  @Override
  public String morningGreeting() {
    return "おはよう、 " + targetName + "。";
  }

  @Override
  public String afternoonGreeting() {
    return "こんにちは、 " + targetName + "。";
  }

  @Override
  public String eveningGreeting() {
    return "こんばんは、 " + targetName + "。";
  }
}

XMLのIoC方法

XMLのIoCは、Spring用のbeans.xmlを作成し、その設定をApplicationContextに読み込んで実現します。

ファイルパスによるXMLファイルの設定

プロジェクトフォルダ直下に「beans.xml」ファイルを作成します。

Ioc 1

「beans.xml」は以下のようにします。

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd">

  <bean name="helloworld" class="com.example.project.domain.HelloWorldImpl">
    <constructor-arg ref="englishGreeting"></constructor-arg>
  </bean>

  <bean name="englishGreeting"
    class="com.example.project.service.EnglishGreetingServiceImpl">
    <constructor-arg name="targetName" value="World"></constructor-arg>
  </bean>

  <bean name="japaneseGreeting"
    class="com.example.project.service.JapaneseGreetingServiceImpl">
    <constructor-arg name="targetName" value="世界"></constructor-arg>
  </bean>

</beans>

メインクラス「SampleApp.java」は以下のようにします。「FileSystemXmlApplicationContext」を使用することで、プロジェクトフォルダ配下のパスにあるSpringのXMLファイルを使用できます。

package com.example.project;

import com.example.project.domain.HelloWorld;
import org.springframework.context.ConfigurableApplicationContext;
import org.springframework.context.support.FileSystemXmlApplicationContext;

public class SampleApp {

  public static void main(String[] args) {
    final ConfigurableApplicationContext context = new FileSystemXmlApplicationContext("beans.xml");

    final HelloWorld helloWorld = (HelloWorld) context.getBean("helloworld");
    System.out.println(helloWorld.expression());

    context.close();
  }

}

実行してみましょう。

$ mvn clean install
$ mvn exec:java -Dexec.mainClass="com.example.project.SampleApp"
...
Good evening, World.
...

正しく動きました。

クラスパスによるXMLファイルの設定

resourcesフォルダに「beans.xml」ファイルを移動します。

Ioc 2

メインクラス「SampleApp.java」は以下のよう修正します。「ConfigurableApplicationContext」を使用することで、クラスパスのあるresources配下にあるSpringのXMLファイルを使用できます。

package com.example.project;

import com.example.project.domain.HelloWorld;
import org.springframework.context.ConfigurableApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

public class SampleApp {

  public static void main(String[] args) {
    final ConfigurableApplicationContext context = new ClassPathXmlApplicationContext("beans.xml");

    final HelloWorld helloWorld = (HelloWorld) context.getBean("helloworld");
    System.out.println(helloWorld.expression());

    context.close();
  }

}

実行してみましょう。

$ mvn clean install
$ mvn exec:java -Dexec.mainClass="com.example.project.SampleApp"
...
Good evening, World.
...

先程と同じく正しく動きました。

XMLのDIの使い方

コンストラクタ・インジェクション

コンストラクタを利用してDIする方法で、すでにサンプルアプリケーションはコンストラクタ・インジェクションで実装しています。DIするフィールドをコンストラクタで定義し、beans.xmlでconstructor-argにより設定します。

HelloWorldImpl.java(抜粋)

package com.example.project.domain;
...
public class HelloWorldImpl implements HelloWorld {

  private WorldGreetingService greetingService;

  public HelloWorldImpl(WorldGreetingService greetingService) {
    this.greetingService = greetingService;
  }
...

EnglishGreetingServiceImpl.java(抜粋)

package com.example.project.service;

public class EnglishGreetingServiceImpl implements WorldGreetingService {

  private String targetName;

  public EnglishGreetingServiceImpl(String targetName) {
    this.targetName = targetName;
  }
...
}

JapaneseGreetingServiceImpl.java(抜粋)

package com.example.project.service;

public class JapaneseGreetingServiceImpl implements WorldGreetingService {

  private String targetName;

  public JapaneseGreetingServiceImpl(String targetName) {
    this.targetName = targetName;
  }
...
}

beans.xml(再掲)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd">

  <bean name="helloworld" class="com.example.project.domain.HelloWorldImpl">
    <constructor-arg ref="englishGreeting"></constructor-arg>
  </bean>

  <bean name="englishGreeting"
    class="com.example.project.service.EnglishGreetingServiceImpl">
    <constructor-arg name="targetName" value="World"></constructor-arg>
  </bean>

  <bean name="japaneseGreeting"
    class="com.example.project.service.JapaneseGreetingServiceImpl">
    <constructor-arg name="targetName" value="世界"></constructor-arg>
  </bean>

</beans>

セッター・インジェクション

DIするフィールドをセッターで定義し、beans.xmlでpropertyにより設定します。先程のコンストラクタをセッターに書き直してみましょう。

HelloWorldImpl.java(修正後)

package com.example.project.domain;

import com.example.project.service.WorldGreetingService;
import java.time.LocalDateTime;

public class HelloWorldImpl implements HelloWorld {

  private WorldGreetingService greetingService;

  public void setGreetingService(WorldGreetingService greetingService) {
    this.greetingService = greetingService;
  }

  @Override
  public String expression() {
    LocalDateTime dateTime = LocalDateTime.now();
    int hour = dateTime.getHour();

    String expression;
    if (hour >= 4 && hour <= 9) {
      expression = greetingService.morningGreeting();
    } else if (hour >= 10 && hour <= 17) {
      expression = greetingService.afternoonGreeting();
    } else {
      expression = greetingService.eveningGreeting();
    }

    return expression;

  }

}

EnglishGreetingServiceImpl.java(修正後)

package com.example.project.service;

public class EnglishGreetingServiceImpl implements WorldGreetingService {

  private String targetName;

  public void setTargetName(String targetName) {
    this.targetName = targetName;
  }

  @Override
  public String morningGreeting() {
    return "Good morning, " + targetName + ".";
  }

  @Override
  public String afternoonGreeting() {
    return "Hello, " + targetName + ".";
  }

  @Override
  public String eveningGreeting() {
    return "Good evening, " + targetName + ".";
  }
}

JapaneseGreetingServiceImpl.java(修正後)

package com.example.project.service;

public class JapaneseGreetingServiceImpl implements WorldGreetingService {

  private String targetName;

  public void setTargetName(String targetName) {
    this.targetName = targetName;
  }

  @Override
  public String morningGreeting() {
    return "おはよう、 " + targetName + "。";
  }

  @Override
  public String afternoonGreeting() {
    return "こんにちは、 " + targetName + "。";
  }

  @Override
  public String eveningGreeting() {
    return "こんばんは、 " + targetName + "。";
  }
}

beans.xml(修正後)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd">

  <bean name="helloworld" class="com.example.project.domain.HelloWorldImpl">
    <property name="greetingService" ref="japaneseGreeting"></property>
  </bean>

  <bean name="englishGreeting"
    class="com.example.project.service.EnglishGreetingServiceImpl">
    <property name="targetName" value="World"></property>
  </bean>

  <bean name="japaneseGreeting"
    class="com.example.project.service.JapaneseGreetingServiceImpl">
    <property name="targetName" value="世界"></property>
  </bean>

</beans>

実行してみましょう。

$ mvn clean install
$ mvn exec:java -Dexec.mainClass="com.example.project.SampleApp"
...
こんにちは、 世界。
...

正しく動きました。

どちらを使うべきか？

基本的にコンストラクタ・インジェクションを使うのが良いです。理由は、コンストラクタでDIした場合、DIした値はイミュータブルになり、安全に扱えるためです。ただし、コンストラクタの引数が多い場合や必須ではないオプション値は、セッター・インジェクションや、init-methodまたはdefault-init-methodによる初期化、@PostConstructによる初期化などを検討するとよいでしょう。

アノテーションのIoC方法

アノテーションのIoCは、beans.xmlの設定変更またはアノテーションのみによって有効化できます。

XMLファイルによる設定(Autowiredのみ)

徐々にXMLからアノテーションへ修正していきましょう。まずは、「annotation-config」を有効化して、beans.xmlのrefで結合していたクラスをAutowiredで結合するように修正します。

beans.xml(修正後)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:context="http://www.springframework.org/schema/context"
  xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd">

  <context:annotation-config/>

  <bean name="helloworld" class="com.example.project.domain.HelloWorldImpl">
  </bean>

  <bean name="englishGreeting"
    class="com.example.project.service.EnglishGreetingServiceImpl">
  </bean>

  <bean name="japaneseGreeting"
    class="com.example.project.service.JapaneseGreetingServiceImpl">
  </bean>

</beans>

HelloWorldImpl.java(修正後)

セッターを削除し、@Autowiredを追加します。refの代わりに@Qualifierで対象を指定しています。

package com.example.project.domain;

import com.example.project.service.WorldGreetingService;
import java.time.LocalDateTime;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;

public class HelloWorldImpl implements HelloWorld {

  @Autowired
  @Qualifier("englishGreeting")
  private WorldGreetingService greetingService;

  @Override
  public String expression() {
    LocalDateTime dateTime = LocalDateTime.now();
    int hour = dateTime.getHour();

    String expression;
    if (hour >= 4 && hour <= 9) {
      expression = greetingService.morningGreeting();
    } else if (hour >= 10 && hour <= 17) {
      expression = greetingService.afternoonGreeting();
    } else {
      expression = greetingService.eveningGreeting();
    }

    return expression;

  }

}

EnglishGreetingServiceImpl.java(修正後)

beans.xmlで設定していた値はひとまず＠Valueで設定します。

package com.example.project.service;

import org.springframework.beans.factory.annotation.Value;

public class EnglishGreetingServiceImpl implements WorldGreetingService {

  @Value("Annotation")
  private String targetName;

  @Override
  public String morningGreeting() {
    return "Good morning, " + targetName + ".";
  }

  @Override
  public String afternoonGreeting() {
    return "Hello, " + targetName + ".";
  }

  @Override
  public String eveningGreeting() {
    return "Good evening, " + targetName + ".";
  }
}

JapaneseGreetingServiceImpl.java(修正後)

package com.example.project.service;

import org.springframework.beans.factory.annotation.Value;

public class JapaneseGreetingServiceImpl implements WorldGreetingService {

  @Value("アノテーション")
  private String targetName;

  @Override
  public String morningGreeting() {
    return "おはよう、 " + targetName + "。";
  }

  @Override
  public String afternoonGreeting() {
    return "こんにちは、 " + targetName + "。";
  }

  @Override
  public String eveningGreeting() {
    return "こんばんは、 " + targetName + "。";
  }
}

実行してみましょう。

$ mvn clean install
$ mvn exec:java -Dexec.mainClass="com.example.project.SampleApp"
...
Hello, Annotation.
...

ちゃんと動きますね。

XMLファイルによる設定(コンポーネントスキャン)

続いて、beans.xmlに「component-scan」を設定して、コンポーネントスキャンを有効化します。

beans.xml(修正後)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:context="http://www.springframework.org/schema/context"
  xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd">

  <context:component-scan base-package="com.example.project"/>

</beans>

Beanはコンポーネントスキャンによって生成されるので、もはや定義すら不要になりました。

HelloWorldImpl.java(抜粋)

@Componentを追加しただけです。

package com.example.project.domain;

import com.example.project.service.WorldGreetingService;
import java.time.LocalDateTime;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Component;

@Component("helloworld")
public class HelloWorldImpl implements HelloWorld {

  @Autowired
  @Qualifier("japaneseGreeting")
  private WorldGreetingService greetingService;
...
}

EnglishGreetingServiceImpl.java(抜粋)

@Componentを追加しただけです。

package com.example.project.service;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

@Component("englishGreeting")
public class EnglishGreetingServiceImpl implements WorldGreetingService {
...
}

JapaneseGreetingServiceImpl.java(抜粋)

@Componentを追加しただけです。

package com.example.project.service;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

@Component("japaneseGreeting")
public class JapaneseGreetingServiceImpl implements WorldGreetingService {
...
}

実行してみましょう。

$ mvn clean install
$ mvn exec:java -Dexec.mainClass="com.example.project.SampleApp"
...
こんにちは、 アノテーション。
...

OKです。

アノテーションによる設定

いよいよ設定ファイルを全てアノテーションに修正します。

まずは、beans.xmlを削除しましょう。

$ rm src/main/resources/beans.xml

そして、IDEで必要なファイルを追加すると以下のようになります。

Ioc 3

それぞれのソースコードは以下のようになります。

EnglishGreetingServiceImpl.java(修正後)

@Componentを削除します。

package com.example.project.service;

public class EnglishGreetingServiceImpl implements WorldGreetingService {

  private String targetName;

  public EnglishGreetingServiceImpl(String targetName) {
    this.targetName = targetName;
  }

  @Override
  public String morningGreeting() {
    return "Good morning, " + targetName + ".";
  }

  @Override
  public String afternoonGreeting() {
    return "Hello, " + targetName + ".";
  }

  @Override
  public String eveningGreeting() {
    return "Good evening, " + targetName + ".";
  }
}

English.java(新規作成)

WorldGreetingServiceを実装したクラスを区別するためにアノテーションを追加します。

package com.example.project.service;

import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
import org.springframework.beans.factory.annotation.Qualifier;

@Target({ElementType.FIELD, ElementType.PARAMETER, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
@Qualifier
public @interface English {

}

JapaneseGreetingServiceImpl.java(修正後)

@Componentを削除します。

package com.example.project.service;

public class JapaneseGreetingServiceImpl implements WorldGreetingService {

  private String targetName;

  public JapaneseGreetingServiceImpl(String targetName) {
    this.targetName = targetName;
  }

  @Override
  public String morningGreeting() {
    return "おはよう、 " + targetName + "。";
  }

  @Override
  public String afternoonGreeting() {
    return "こんにちは、 " + targetName + "。";
  }

  @Override
  public String eveningGreeting() {
    return "こんばんは、 " + targetName + "。";
  }
}

Japanese.java(新規作成)

WorldGreetingServiceを実装したクラスを区別するためにアノテーションを追加します。

package com.example.project.service;

import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
import org.springframework.beans.factory.annotation.Qualifier;

@Target({ElementType.FIELD, ElementType.PARAMETER, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
@Qualifier
public @interface Japanese {

}

app.properties(新規作成)

もともとbeams.xmlで設定した値をプロパティに切り出します。

greeting.name.english=Spring's World
greeting.name.japanese=Springの世界

AppConfig.java(新規作成)

これがbeams.xmlの代わりになるクラスです。

package com.example.project.config;

import com.example.project.service.English;
import com.example.project.service.EnglishGreetingServiceImpl;
import com.example.project.service.Japanese;
import com.example.project.service.JapaneseGreetingServiceImpl;
import com.example.project.service.WorldGreetingService;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;

@Configuration
@ComponentScan(basePackages = "com.example.project")
@PropertySource("classpath:config/app.properties")
public class AppConfig {

  @Value("${greeting.name.english}")
  private String englishTargetName;

  @Value("${greeting.name.japanese}")
  private String japaneseTargetName;

  @Bean
  @English
  public WorldGreetingService englishGreetingService() {
    return new EnglishGreetingServiceImpl(englishTargetName);
  }

  @Bean
  @Japanese
  public WorldGreetingService japaneseGreetingService() {
    return new JapaneseGreetingServiceImpl(japaneseTargetName);
  }

}

HelloWorldImpl.java(修正後)

@Componentを追加します。@JapaneseアノテーションでJapaneseGreetingSerivceを指定してインジェクションしています。

package com.example.project.domain;

import com.example.project.service.Japanese;
import com.example.project.service.WorldGreetingService;
import java.time.LocalDateTime;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

@Component("helloworld")
public class HelloWorldImpl implements HelloWorld {

  @Autowired
  @Japanese
  private WorldGreetingService greetingService;

  @Override
  public String expression() {
    LocalDateTime dateTime = LocalDateTime.now();
    int hour = dateTime.getHour();

    String expression;
    if (hour >= 4 && hour <= 9) {
      expression = greetingService.morningGreeting();
    } else if (hour >= 10 && hour <= 17) {
      expression = greetingService.afternoonGreeting();
    } else {
      expression = greetingService.eveningGreeting();
    }

    return expression;

  }

}

SampleApp.java(修正後)

「AnnotationConfigApplicationContext」により、クラスで定義した設定を読み込むようにしています。

package com.example.project;

import com.example.project.config.AppConfig;
import com.example.project.domain.HelloWorld;
import org.springframework.context.ConfigurableApplicationContext;
import org.springframework.context.annotation.AnnotationConfigApplicationContext;

public class SampleApp {

  public static void main(String[] args) {
    final ConfigurableApplicationContext context = new AnnotationConfigApplicationContext(
        AppConfig.class);

    final HelloWorld helloWorld = (HelloWorld) context.getBean("helloworld");
    System.out.println(helloWorld.expression());

    context.close();
  }

}

修正が完了したので実行してみましょう。

$ mvn clean install
$ mvn exec:java -Dexec.mainClass="com.example.project.SampleApp"
...
こんにちは、 Springの世界。
...

うまくいきました。これでbeans.xmlから完全にアノテーションに移行できました。

アノテーションのDIの使い方

最後に、アノテーションのDIのパターンを見ていきましょう。

フィールド・インジェクション

先程の作ったHelloWorldImpl.javaはフィールド・インジェクションを利用しています。

HelloWorldImpl.java(抜粋)

package com.example.project.domain;
...
@Component("helloworld")
public class HelloWorldImpl implements HelloWorld {

  @Autowired
  @Japanese
  private WorldGreetingService greetingService;
...
}

この方法はフィールドに@Autowiredを指定するだけで利用できます。ただし、後述しますが、アンチパターンです。

コンストラクタ・インジェクション

続いて、コンストラクタを追加して、インジェクションするように修正しましょう。

HelloWorldImpl.java(修正後)

package com.example.project.domain;

import com.example.project.service.Japanese;
import com.example.project.service.WorldGreetingService;
import java.time.LocalDateTime;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

@Component("helloworld")
public class HelloWorldImpl implements HelloWorld {

  private WorldGreetingService greetingService;

  @Autowired
  public HelloWorldImpl(@Japanese WorldGreetingService greetingService) {
    this.greetingService = greetingService;
  }

  @Override
  public String expression() {
    LocalDateTime dateTime = LocalDateTime.now();
    int hour = dateTime.getHour();

    String expression;
    if (hour >= 4 && hour <= 9) {
      expression = greetingService.morningGreeting();
    } else if (hour >= 10 && hour <= 17) {
      expression = greetingService.afternoonGreeting();
    } else {
      expression = greetingService.eveningGreeting();
    }

    return expression;

  }

}

実行してみましょう。

$ mvn clean install
$ mvn exec:java -Dexec.mainClass="com.example.project.SampleApp"
...
こんにちは、 Springの世界。
...

OKです。

セッター・インジェクション

コンストラクタを削除し、セッターを追加してインジェクションするように修正しましょう。

HelloWorldImpl.java(修正後)

package com.example.project.domain;

import com.example.project.service.English;
import com.example.project.service.WorldGreetingService;
import java.time.LocalDateTime;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

@Component("helloworld")
public class HelloWorldImpl implements HelloWorld {

  private WorldGreetingService greetingService;

  @Autowired
  public void setGreetingService(@English WorldGreetingService greetingService) {
    this.greetingService = greetingService;
  }

  @Override
  public String expression() {
    LocalDateTime dateTime = LocalDateTime.now();
    int hour = dateTime.getHour();

    String expression;
    if (hour >= 4 && hour <= 9) {
      expression = greetingService.morningGreeting();
    } else if (hour >= 10 && hour <= 17) {
      expression = greetingService.afternoonGreeting();
    } else {
      expression = greetingService.eveningGreeting();
    }

    return expression;

  }

}

実行してみましょう。

$ mvn clean install
$ mvn exec:java -Dexec.mainClass="com.example.project.SampleApp"
...
Hello, Spring's World.
...

完璧ですね。

どちらを使うべきか？

基本的にはコンストラクタ・インジェクションを使うのが良いです。理由はXMLのDIの使い方で説明したことと同じです。また、フィールド・インジェクションは絶対に使うべきではありません。Springチームが公式に使わないことを勧めています。まともにテストした事がある人なら分かることですが、フィールド・インジェクションした箇所の単体テストをしようとした場合、リフレクションを使うはめになります。うんざりです。加えて、よく言われているのは、一つのクラスに多くのDIを気づかずに書いてしまい、Single Responsibility Principle(単一責務の原則)に知らないうちに違反していることがあります。要はコンストラクタやセッターはコーディングする時の良い意味で目印になっているという話です。結論としては、迷わずにコンストラクタ・インジェクションを使う、と覚えておきましょう。

最後に

いかがでしたか？SpringFrameworkを学習する時に最初に理解すべきなのはDIです。方法を整理して使いこなせるようにしましょう。それでは。

環境

  • JDK: openjdk 10.0.1 2018-04-17
  • Maven: Apache Maven 3.5.3
  • SpringFramework: 5.0.7.RELEASE

By Leave a Comment

Amazon S3で静的コンテンツを独自ドメインでSSL化してホスティングする方法(S3 + CloudFront + Route53 + ACM)

Amazon S3で静的コンテンツを独自ドメインでSSL化してホスティングする方法(S3 + CloudFront + Route53 + ACM)

静的サイトを作ったら、それをホスティングする必要があります。個人の趣味サイトなら簡単で無料の方法はGithub Pagesですが、もう少し真面目に静的コンテンツを管理してホスティングしたいのであればAmazon S3は有力な選択肢になります。今回は、S3で静的コンテンツを独自ドメインでSSL化してホスティングする方法を紹介します。

はじめに

今回はReactで作った静的コンテンツをAmazon S3でホスティングする方法を紹介します。それだけでは物足りないので、独自ドメイン対応、SSL化までやっていきます。それでは、始めましょう。

前提

この記事を楽しむには以下が必要です。

  • NodeJSがインストール済みであること
  • AWS CLIがインストール済みであること
  • ドメインを取得済みであること

静的サイトの作成

まずはホスティングする静的サイトを作ります。

準備

Reactでちゃちゃっとサンプルサイトを作ることにしましょう。

$ npm install -g create-react-app
$ create-react-app my-website
$ cd my-website/

静的サイトの作成

今回はReactアプリケーションを作ることが目的ではないので、App.jsの画面に表示される文字を変更するだけにします。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Hosting a React Welcom Page on S3</h1>
        </header>
        <p className="App-intro">
          Amazon S3 is easy stuff for hosting a static website.
        </p>
      </div>
    );
  }
}

export default App;

はい、完成です。

S3バケットの作成と静的サイトのデプロイ

次にS3バケットに作ったサンプルサイトをデプロイしましょう。

S3バケットの作成

S3バケットはAWSコンソールから作ってもよいのですが、AWS CLIから作ってみましょう。

$ aws s3 ls
$ aws s3 mb s3://mywebsite-hosting
make_bucket: mywebsite-hosting
$ aws s3 ls
2018-07-07 11:00:52 mywebsite-hosting

ビルドしてデプロイ

$ yarn build
$ ls
README.md     build/        node_modules/ package.json  public/       src/          yarn.lock
$ aws s3 sync build s3://mywebsite-hosting
$ aws s3 website s3://mywebsite-hosting --index-document index.html

AWSコンソールでS3バケットを確認してみましょう。

S3 2

作成したS3バケット上にビルドしたファイルが全てアップロードされています。

S3 0

作成したS3バケットがホスティングされています。

S3バケットのポリシー設定

S3バケットにアップロードしたファイルはデフォルトではアクセスが許可されていないので、誰でも見れるようにポリシーを変更します。

S3 1

今回は以下のポリシーを設定しました。S3のポリシーはジェネレーターサイトを使うことでGUIで作成できます。

{
    "Version": "2012-10-17",
    "Id": "Policy1530901313146",
    "Statement": [
        {
            "Sid": "Stmt1530901311070",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mywebsite-hosting/*"
        }
    ]
}

表示できるか確認します。AWSのS3のコンソールから、エンドポイントを確認します。

S3 3

エンドポイントをブラウザで開きます。

S3 4

サンプルサイトがホスティングされていることが確認できました。

独自ドメインの設定

次に、ホスティングしているサンプルサイトに独自ドメインを設定しましょう。

Route53に独自ドメインを登録する

AWSのRoute53のコンソールから、「Hosted zones -> Create Hosted Zone」を選択し、「Domain Name」に取得済みのドメイン名を入力し、「Create」をクリックします。

Route53 1

作成されたHosted zoneのNSレコードのValueをDNSに設定します。

Route53 2

DNSの例として、ムームードメインの場合は、以下のように設定し、「ネームサーバ設定変更」をクリックします。

Mumu 3

CloudFrontでエンドポイントとドメインを紐付ける

AWSのCloudFrontのコンソールから、「Create Distribution」をクリックします。

Cf 1

今回は静的サイトを扱うので、Webの「Get Started」をクリックします。

Cf 2

「Origin Domain Name」にS3バケットのエンドポイントのURL(今回の場合は「http://mywebsite-hosting.s3-website-us-east-1.amazonaws.com/」)を入力します。すると、自動的に「Origin ID」が設定されます。

Cf 3

ファイルを圧縮して配信したい場合は「Compress Objects Automatically」を「Yes」にします。

Cf 5

「Price Class」には配信するロケーションを指定します。日本も配信する場合は「Use All Edge Locations」を選択します。「Alternate Domain Names」にはドメイン名を入力します。

Cf 5

「Default Root Object」には「index.html」と入力します。そして、「Create Distribution」をクリックします。

Cf 6

「Status」が「Deployed」になればCloudFrontの設定は完了です。

Cf 7

Route53にCloudFrontを紐付ける

AWSのRoute53のコンソールから、「Create Record Set」をクリックします。今回はサブドメインを利用しないので、Nameは空にします。そして、「Alias」に「Yes」を選択し、「Alias Target」に先程作成したCloudFrontのDistributionの設定を選択します。「Create」をクリックします。

Route53 5

以下のようにAレコードが追加されました。

Route53 6

これで独自ドメインでサンプルサイトが表示できるようになりました。

無料でSSL化

それでは無料でSSLに対応しましょう。

AWS Certificate Manager(ACM)で無料のSSL証明書を発行する

AWSのCertificate Managerのコンソールから、「Request a certificate」をクリックします。

Acm 1

「Domain name」にドメイン名またはサブドメイン名を入力し、「Next」をクリックします。

Acm 2

「DNS validation」を選択し、「Review」をクリックします。

Acm 3

「Confirm and request」をクリックします。

Acm 4

「Continue」をクリックします。

Acm 5

このままだとStatusが「Pending validation」のままなので、「Create record in Route 53」からバリデーション用のレコードを追加します。

Acm 7

「Create」をクリックします。

Acm 8

以下のようにSUCCESSが表示されたら、Route53に設定されていることを確認します。

Acm 9

以下のようにAWSのRoute53のコンソールにバリデーション用のCNAMEレコードが追加されていることが確認できます。

Route53 7

しばらく待つと、AWSのCertificate Managerのコンソールから、以下のように「Status」が「Issued」になり、SSL証明書の発行が完了します。

Acm 10

CloudFrontにSSL証明書を設定する

AWSのCloudFrontのコンソールから、対象のDistributionを選択します。

Cf 8

「General」を選択し、「Edit」をクリックします。

Cf 9

「SSL Certificate -> Custom SSL Certificate」を選択し、先程の発行したSSL証明書を選択します。「Yes, Edit」をクリックします。

Cf 10
Cf 11
Cf 12

以下のように「SSL Certificate」にSSL証明書が設定されていることを確認します。

Cf 13

これでSSL証明書の設定は完了です。

HTTPをHTTPSにリダイレクトするように設定する

SSL化されたのでHTTPSのみにしてもよいのですが、ユーザーがブラウザにHTTPでURLを入力する場合もありえるので、HTTPで入力された場合にHTTPSにリダイレクトするように設定します。

「Behaviors」を選択し、デフォルトのBehaviorを選択して「Edit」をクリックします。

Cf 21

「Viewer Protocol Policy」に「Redirect HTTP to HTTPS」を選択して、「Yes, Edit」をクリックします。

Cf 22
Cf 23

以下のように「Viewer Protocol Policy」が「Redirect HTTP to HTTPS」に変更されていることを確認します。

Cf 24

しばらくして「Status」が「Deployed」になれば、上記の設定変更の反映は完了です。

Cf 25

動作確認

最後にブラウザに独自ドメインのURLを入力してみましょう。

Hosting

SSLで正しく表示されました。

おまけ

CloudFrontのキャッシュ削除の方法

S3バケットを更新した後にコンテンツをすぐに反映させるにはCloudFrontのキャッシュを削除する必要があります。AWS CLIを使って以下のようにキャッシュを削除できます。

$ yarn build
$ aws s3 sync build s3://mywebsite-hosting
$ curl -I https://yourdomain.com/
...
x-cache: Hit from cloudfront
...
$ aws cloudfront list-distributions --output text --query 'DistributionList.Items[*].[Id]'
EKZEZML5DJ0UB
$ aws cloudfront get-distribution --output json --id EKZEZML5DJ0UB
$ aws cloudfront create-invalidation --distribution-id EKZEZML5DJ0UB --paths '/index.html'
$ aws cloudfront get-invalidation --distribution-id EKZEZML5DJ0UB --id IP17L4GZGHHAK --output text --query 'Invalidation.Status'
Completed
$ curl -I https://yourdomain.com/
...
x-cache: Miss from cloudfront
...

もちろんAWSのCloudFrontのコンソールからも同様の操作ができます。その場合は、「Create Invalidation」をクリックします。

Cf 31

そして、削除したい「Object Paths」を入力して、「Invalidate」をクリックします。

Cf 32

これでキャッシュクリアも完了です。

コンテンツを配信するドメインを指定する方法

画像や動画などのリンクは他のWebサイトに貼られても表示されてしまいます。それを防ぎたい場合は以下のようにS3バケットのポリシーにコンディションを指定することで、表示するドメインを限定できます。

{
    "Version": "2012-10-17",
    "Id": "Policy1530901313146",
    "Statement": [
        {
            "Sid": "Stmt1530901311070",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mywebsite-hosting/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "http://yourdomain.com/*"
                }
            }
        }
    ]
}

S3とCloudFrontのCORSの対応方法

CORS(Cross-Origin Resource Sharing)はオリジンサーバ以外からデータを取得する仕組みですが、S3とCloudFrontの両方を利用している場合は両方共対応する必要があります。

S3のCORS対応

対象のS3バケットを選び、「Permissions -> CORS configuration」から、以下のようにXMLを設定し、「Save」すればOKです。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

S3 cors

CloudFrontのCORS対応

対象のDistributionを選んで、「Behaviors」タブからデフォルトのBehaviorを選んで「Edit」します。

Cf cors 1

「Cache Based on Selected」から「Whitelist」を選択します。

Cf cors 2

「Whitelist Headers」に「Origin」を選択して「Add >>」します。

Cf cors 3

後は保存して、変更が反映されれば完了です。

AWSコンソールを英語表記にする方法

この記事ではAWSコンソールは英語表記になっています。デフォルトでは日本語表記になっていると思うので、AWSコンソールのフッターから、「English (US)」を選択すれば英語表記にできます。

Aws footer

英語表記にするメリットは、日本語表記にした場合にAWSのUI変更についていくのが大変なのでそれを回避できる点と、何か問題があった時にググることを簡単にする点です。なので、よほど英語アレルギーがある人以外は英語表記にすることをおすすめします。

最後に

いかがでしたか？これでS3上に静的コンテンツを独自ドメインで公開できるようになったと思います。サーバーサイドを作らないのであれば、この方法で十分ですね。それでは。

環境

  • NodeJS: v10.5.0
  • create-react-app: 1.5.2
  • AWS CLI: aws-cli/1.15.40 Python/3.6.5 Darwin/17.6.0 botocore/1.10.40

By Leave a Comment

API-Gatewayからのレスポンスが502でログに「Unable to import module ‘src/handler’: Error」と出ていた場合の対処法

API-Gatewayからのレスポンスが502でログに「Unable to import module ‘src/handler’: Error」と出ていた場合の対処法

Serverlessフレームワークを用いてAPI-GatewayとLambdaの構成でサーバーレスなAPIを作成した場合に、curlをしてみると502となってエラーになってしまう場合があります。今回はその対処法を紹介します。

前提

前提として、Serverlessフレームワークを使ってAPI-Gateway、Lambda、DynamoDBの構成とし、ローカルでのテストが完了しているものとします。Serverlessフレームワークは使っていなくてもよいですが、ローカルですら動いていない場合は、対処法の「その他の可能性」を参考にして下さい。

発生しているエラー

以下のエラーが発生している場合です。

Unable to import module 'src/handler': Error

「src/handler」の場所は適宜読み替えてください。

再現

例えば、Itemのテーブルがあり、それを取得するgetItems関数がある場合を想定します。Item.jsはテーブルのモデルで、handler.js内にgetItems関数が書かれています。

それらがローカルで動くことを確認し、AWS上にデプロイした後、curlでAPIを呼び出します。

$ tree src/
src/
├── models
│   └── Item.js
└── handler.js
$ cat serverless.yml
...
functions:
  getItems:
    handler: src/handler.getItems
    events:
      - http:
          method: get
          path: items
          private: true
...
$ sls deploy -s prod
$ curl -v -H 'x-api-key:XXXXXXXXXX' https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/prod/items | jq
...
< HTTP/2 502
...
{
  "message": "Internal server error"
}
$ sls logs -f getItems --stage prod
...
Unable to import module 'src/handler': Error
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/var/task/src/models/Item.js:1:78)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
...

テーブルが空であれば空のレスポンスが返ってくるはずですが、502でInternal server errorが返ってきてしまった場合が問題です。関数のログを確認してみると今回のエラーが表示されてしまっています。

サーバーレスなアプリケーション開発の初心者がよく遭遇する事象なので、今回はこのエラーの対処法を紹介します。

対処法

NPMパッケージの確認

実はかなり単純な答えなのですが、このエラーが出ている場合の原因は単なるNPMパッケージの漏れです。今回の「再現」の場合を考えてみましょう。エラー内容をよく見てみると「at Object. (/var/task/src/models/Item.js:1:78)」と書かれており、これはItem.js内でエラーがあることを示しています。おそらくItem.js内でrequireしているパッケージがpackage.jsonファイル内のdependenciesから漏れている可能性があります。

こういった事象はパッケージをいろいろいじっていると出るのですが、ひとまずローカルのnode_modulesを削除して、yarn installしてパッケージを入れ直してみましょう。すると、ローカルでも漏れいてるパッケージを発見できます。

その他の可能性

ほとんどの人はすでに問題を解決したと思いますが、より初心者向けにその他の起こりうる原因を紹介します。以下です。

  • ディレクトリのパスとserverless.ymlのhandlerのパスが一致しているか？ -> Serverlessフレームワークでzipファイルを作成した場合「サービス名.zip」というファイルが作成されますが、それを解凍した時に「サービス名」ディレクトリ配下からパスがスタートしている必要があります。今回の「再現」のserverless.ymlのhandlerを確認してみて下さい。
  • レスポンスのフォーマットは適切か？ -> statusCode、headers、bodyというJSONフォーマットである必要があります。

最後に

いかがでしたか？サーバーレスなアプリケーションを作っているとよく発生する事象なので、焦らず対応しましょう。それでは。