LoginSignup
mrmapleleaf
@mrmapleleaf (Kaede Maruyama)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

HerokuにデプロイしたアプリケーションにCSSが反映されない

Q&AClosed
JavaCSSHerokuJavaEEWebアプリケーション

解決したいこと

デプロイしたwebアプリケーションにCSS、画像アイコンを反映させたい。

皆様こんにちは。
現在、javaとtomcatを使って簡単なwebアプリを開発しています。
形になった為、初めてHerokuを利用して公開まで漕ぎ着けましたが
CSSと画像アイコンが反映されていませんでした。
ローカルの環境で実行した際には、どちらも反映されていた為、herokuでビルドした際に、見ているパスがおかしくなってしまったのではないかと予想していますが、手詰まりになってしまったため、質問させていただきました。

ご教授いただけますと幸いです。よろしくお願い致します。
さらに必要な情報がございましたら、連絡いただけますと幸いです。

使用している開発環境情報

●macOS monterey v12.2
●Eclipse Neon 4.6.3
●tomcat8
●Java1.8
●Maven3.3.9/1.7.0(EMBEDDED)

ローカルでの実行時のイメージ

Image from Gyazo

Herokuでのデプロイ時の状態

Image from Gyazo

気になったherokuでのログ

at=info method=GET path="/" host=accountnamerandomizer.herokuapp.com request_id=15a39a73-97e9-4dd6-9776-f1c2c67512b6 fwd="27.83.232.91" dyno=web.1 connect=0ms service=2226ms status=200 bytes=1819 protocol=https
at=info method=GET path="/css/ranc.css" host=accountnamerandomizer.herokuapp.com request_id=800ba284-8403-47b0-a64c-b62440d7ae7b fwd="27.83.232.91" dyno=web.1 connect=0ms service=16ms status=200 bytes=1744 protocol=https
at=info method=GET path="/images/titleLogo.png" host=accountnamerandomizer.herokuapp.com request_id=4776f184-b003-4710-842c-7586109481b9 fwd="27.83.232.91" dyno=web.1 connect=0ms service=6ms status=200 bytes=1744 protocol=https

ディレクトリ構成

Image from Gyazo

Toppage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="./css/ranc.css">
        <title>アカウント名つけるくん</title>
    </head>
    <body>
    <div id="header">
        <img class="logo" alt="ロゴ" src="./images/titleLogo.png">
        <h1>アカウント名つけるくん</h1>
        <span id="beta">β版</span>
    </div>
    <div id="mainContent1">
        <p>こんにちは！このサービスは入力された内容からSNSなどで使うアカウント名をテキトーに作ってくれるサービスです。<br>
        下記の内容を入力してください。全ての項目は必須入力となります。</p>

        <c:if test="${errorList != null}">
            <div class="errorMsg">
                <span class="errorTitle">入力内容エラー</span>
                <c:forEach var="error" items="${errorList}">
                   ● <c:out value="${error}"></c:out><br>
                </c:forEach>
            </div>
        </c:if>

        <div class="form">
        <form action="./Result" method="post">
            <h3>入力内容</h3>
            <div class="lastName">
                姓<span class="annotation">※ローマ字で入力</span><br><input type="text" name="lastName" size="40" value="${AccountInfo.firstName}"/><br>
            </div>
            <div class="firstName">
                名<span class="annotation">※ローマ字で入力</span><br><input type="text" name="firstName" size="40" value="${AccountInfo.lastName}"/><br>
            </div>
            <div class="birthDate">
                生年月日<br><input type="date" name="birthDate" value="${AccountInfo.birthDate}"/><br>
            </div>
            <div class="button">
                <button type="submit">アカウント名作成！</button>
            </div>
        </form>
        </div>
    </div>
    <footer>
        by Mr.MapleLeaf
    </footer>
    </body>
</html>

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/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>random_account_name_creater</groupId>
  <artifactId>random_account_name_creater</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
    <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>
  <build>
    <sourceDirectory>src</sourceDirectory>
    <plugins>
    <plugin>
    <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.5.1</version>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
    </plugin>
    <plugin>
    <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.0.0</version>
        <configuration>
          <warSourceDirectory>WebContent</warSourceDirectory>
        </configuration>
    </plugin>
          <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-dependency-plugin</artifactId>
            <executions>
                <execution>
                    <phase>package</phase>
                    <goals><goal>copy</goal></goals>
                    <configuration>
                        <artifactItems>
                            <artifactItem>
                                <groupId>com.heroku</groupId>
                                <artifactId>webapp-runner</artifactId>
                                <version>9.0.41.0</version>
                                <destFileName>webapp-runner.jar</destFileName>
                            </artifactItem>
                        </artifactItems>
                    </configuration>
                </execution>
            </executions>
        </plugin>
  </plugins>
  </build>
  <dependencies>
      <dependency>
          <groupId>org.apache.taglibs</groupId>
          <artifactId>taglibs-standard-impl</artifactId>
          <version>1.2.5</version>
      </dependency>
      <dependency>
          <groupId>javax.servlet.jsp.jstl</groupId>
          <artifactId>javax.servlet.jsp.jstl-api</artifactId>
          <version>1.2.1</version>
      </dependency>
            <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>javax.servlet-api</artifactId>
          <version>4.0.1</version>
          <scope>provided</scope>
      </dependency>
  </dependencies>
</project>

自分で試したこと

jsp側のcss、画像の読み込み時のパスをビルド後のフルパスに変更して試しましたが、同じ様にエラーになってしまいました。

0

1Answer

narita1980
@narita1980

Herokuを利用して公開されたということですが、そちらのURLを教えていただくことは可能でしょうか？

1

Comments

  2. @narita1980

    to @mrmapleleaf　さん
    URLありがとうございます。

    以下は例ですが、変な感じでマッピングされちゃってますね。。。
    https://accountnamerandomizer.herokuapp.com/css/ranc.css

    webapp-runner.jar
    というファイルが生成されて、それをherokuへアップロードされてるかと思いますが
    そのファイル内に梱包されてるweb.xmlファイルの中身を共有頂けますか？

  3. @mrmapleleaf

    Questioner
    webapp-runner.jarは生成されているのですが、eclipse上から開くことができなかったため、WEB-INF内のweb.xmlであると判断いたしました。以下、ファイルの内容になります。（デコンパイルが必要？）
    開発時にちゃんと確認していなかったのですがデフォルト状態のままになっている様です...

    ```
    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
    <display-name>random_account_name_creater</display-name>
    <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>
    </web-app>
    ```

  4. @mrmapleleaf

    Questioner
    @narita1980 さん
    やはりnarita1980 さんの読み通り、web.xmlを以下の様に変更したら、herokuにデプライ後にCSSと画像が反映される様になりました！ご協力いただき本当にありがとうございました！

    <修正版>
    https://accountnamerandomizer02.herokuapp.com/

    ```
    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
    <display-name>random_account_name_creater</display-name>
    <welcome-file-list>
    <welcome-file>Toppage.jsp</welcome-file>
    </welcome-file-list>

    <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.png</url-pattern>
    </servlet-mapping>
    </web-app>
    ```
    以下のサイトを参考にしました。
    http://kousei42.s246.xrea.com/wiki/index.cgi?page=%23011.CSS%A4%CE%B8%FA%A4%AB%A4%BB%CA%FD%A4%CE%A5%B3%A5%C4

    ただ、servlet-mappingを追加したことによって、どういった動きでCSS、画像が反映される様になったのかが認識が甘い状態です。参考にできるサイトや知識など何かご存知でしたらご教授いただけますと幸いです。よろしくお願い致します。

  6. @mrmapleleaf

    Questioner
    to @narita1980さん
    参考になるサイトを教えていただきありがとうございます！
    .jarファイルの件、知りませんでした... 勉強になりました。
    本当にありがとうございました！

Your answer might help someone💌

LoginSign Up

Popular Questions