@mrmapleleaf (Kaede Maruyama)posted at 2022-02-14

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

Q&A

Closed

解決したいこと

デプロイした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)

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

Herokuでのデプロイ時の状態

気になった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

ディレクトリ構成

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、画像の読み込み時のパスをビルド後のフルパスに変更して試しましたが、同じ様にエラーになってしまいました。

Are you sure you want to delete the question?