質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

[Nginx, Webpack, React]/aaa/bbb のような深さが2次以上のパスにアクセスできない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 185

sezubo

score 4

Reactのルーティング周り、あるいはNginxの設定周りでハマってしまい、調べたのですがピンとくる情報がなかったので、質問させていただきます。
どうかよろしくお願いいたします。。。

前提・実現したいこと

Reactで見た目を作り、react-router-domでルーティングするアプリケーションを、webpackでビルドしてNginxで表示するようにしています。

例えば/user/editといったパスへのアクセスで、ユーザー編集画面を表示できるようにしたいのですが、現状できません。

/user/loginといったパスの深さが1次のものは期待通りのページが表示されますが、/user/editのような深さが2次以上のページはうまく表示されません。

コンポーネントのディレクトリ構成は以下のようになっています。

├── src
│   ├── App
│   │   ├── Footer
│   │   │   └── index.jsx
│   │   ├── Header
│   │   │   └── index.jsx
│   │   ├── Home
│   │   │   └── index.jsx
│   │   ├── Login
│   │   │   └── index.jsx
│   │   └── User
│   │       ├── Confirm
│   │       │   └── index.jsx
│   │       ├── Edit
│   │       │   └── index.jsx
│   │       └── index.jsx

react-router-dom"でルーティングを制御しているsrc/index.jsxは以下のようになっております。
パスとコンポーネントの対応付は、別で配列でもって、.map() でそれぞれルーティングを設定しています。

const routes = [
  {
    path: "/home",
    component: Home,
    name: "ホーム"
  },
  {
    path: "/user/edit",
    component: UserEdit,
    name: "プロフィール編集"
  },

(略)

                    {routes.map((route, index) => (
                      <Route
                        exaxt
                        key={index}
                        path={route.path}
                        pageName={route.name}
                        component={route.component}
                      />
                    ))}

Webpackの設定は以下です。
変な設定にはなっていないと思うのですが。。。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const Dotenv = require("dotenv-webpack");

const src = path.resolve(__dirname, "src");
const dist = path.resolve(__dirname, "dist");

module.exports = {
  entry: ["@babel/polyfill", src + "/index.jsx"],
  output: {
    path: dist,
    publicPath: "/",
    filename: "[name]-[hash].bundle.js"
  },
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "eslint-loader",
            options: {
              formatter: require("eslint/lib/cli-engine/formatters/stylish")
            }
          }
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: src + "/public/index.html",
      publicPath: "/",
      filename: "index.html"
    }),
    new Dotenv({
      path: "./.env"
    })
  ]
};

Nginxの設定は以下です。
ここも変なことはしていないと思っているのですが、なんとなくtry_files $uri $uri/ /index.html;のあたりがまずいのかなと思っていたりします。。。

server {
    listen       80;
    server_name  localhost;
    location / {
        root   /var/www/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

発生している問題・エラーメッセージ

エラーメッセージは発生せず、/user/editにアクセスすると、Userコンポーネントが表示されてしまいます。(UserEditコンポーネントが表示されてほしい)

どのようにすれば、/user/edit でUserEditコンポーネントを表示することができるでしょうか?
何卒よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる