search

masaya7 / museum_app

0 stars 0 forks source link

routesエラーが解消できません。 #29

Closed masaya7 closed 1 year ago

masaya7 commented 1 year ago

環境

rails7 ruby3.2.2

実現したいこと

routesエラーの解消 No route matches [GET] "/logout"　をDeleteで処理できるようにしたい

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

Routing Error
No route matches [GET] "/logout"

どの処理までうまく動いているのか

ログイン機能を実装しています。ログインはできています。

該当のソースコード

application.html.erb

<html>
  <head>
    <title>MusemuApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>

  <body>
    <%= render "shared/header" %>
    <div class="container">
      <% flash.each do |message_type, message| %>
        <div class="alert alert-<%= message_type %>"><%= message %></div>
      <% end %>
      <%= yield %>
      <%= debug(params) if Rails.env.development? %>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

app/assets/config/manifest.js

//= link_tree ../images
//= link_tree ../../../vendor/javascript .js
//= link_tree ../builds

app/assets/javascript/applicattion.js

//= link_tree ../images
//= link_tree ../../../vendor/javascript .js
//= link_tree ../builds

app/assets/stylesheet/application-bootstrap.scss

//= link_tree ../images
//= link_tree ../../../vendor/javascript .js
//= link_tree ../builds

app/assets/stylesheet/application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import "bootstrap";

@media screen and (min-width: 500px) {
   /*　画面サイズ 500px以上で適用　*/
   input {width:600px;}
   textarea {
     width:600px;
     height:300px;
   }
 }

@media screen and (max-width: 499px) {
   /*　画面サイズ 499pxまで適用　*/
   input {width:300px;}
   textarea {
     width:300px;
     height:200px;
   }
 }

 .btn {
   margin-top:20px;
 }

 a {
   text-decoration:none;
 }

 a:hover {
   color:red;
 }

 .badge a {
   color:white;
 }

package.json

{
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.14",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "esbuild": "^0.18.16",
    "jquery": "^3.7.0",
    "nodemon": "^3.0.1",
    "popper.js": "^1.16.1",
    "postcss": "^8.4.27",
    "postcss-cli": "^10.1.0",
    "sass": "^1.64.1"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  },
  "browserslist": [
    "defaults"
  ]
}

こちら、ブラウザ起動時のログになります。

% bin/dev
22:12:21 web.1  | started with pid 51942
22:12:21 js.1   | started with pid 51943
22:12:21 css.1  | started with pid 51944
22:12:22 js.1   | yarn run v1.22.19
22:12:22 css.1  | yarn run v1.22.19
22:12:22 css.1  | warning package.json: No license field
22:12:22 js.1   | warning package.json: No license field
22:12:22 css.1  | $ nodemon --watch ./app/assets/stylesheets/ --ext scss --exec "yarn build:css"
22:12:22 js.1   | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --watch
22:12:22 js.1   | [watch] build finished, watching for changes...
22:12:22 css.1  | [nodemon] 3.0.1
22:12:22 css.1  | [nodemon] to restart at any time, enter `rs`
22:12:22 css.1  | [nodemon] watching path(s): app/assets/stylesheets/**/*
22:12:22 css.1  | [nodemon] watching extensions: scss
22:12:22 css.1  | [nodemon] starting `yarn build:css`
22:12:23 css.1  | warning package.json: No license field
22:12:23 css.1  | $ sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules
22:12:26 css.1  | [nodemon] clean exit - waiting for changes before restart
22:12:27 web.1  | DEBUGGER: Debugger can attach via UNIX domain socket (/var/folders/jm/2s2t39653ws9p0n_nygtfw8h0000gn/T/ruby-debug-sock-501/ruby-debug-usuimasaya-51945)
22:12:28 web.1  | => Booting Puma
22:12:28 web.1  | => Rails 7.0.6 application starting in development 
22:12:28 web.1  | => Run `bin/rails server --help` for more startup options
22:12:29 web.1  | Puma starting in single mode...
22:12:29 web.1  | * Puma version: 5.6.6 (ruby 3.2.2-p53) ("Birdie's Version")
22:12:29 web.1  | *  Min threads: 5
22:12:29 web.1  | *  Max threads: 5
22:12:29 web.1  | *  Environment: development
22:12:29 web.1  | *          PID: 51945
22:12:29 web.1  | * Listening on http://127.0.0.1:3000
22:12:29 web.1  | * Listening on http://[::1]:3000
22:12:29 web.1  | Use Ctrl-C to stop
22:12:39 web.1  | Started GET "/" for ::1 at 2023-07-24 22:12:39 +0900
22:12:40 web.1  |   ActiveRecord::SchemaMigration Pluck (1.2ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
22:12:40 web.1  | Processing by UsersController#index as HTML
22:12:40 web.1  |   Rendering layout layouts/application.html.erb
22:12:40 web.1  |   Rendering users/index.html.erb within layouts/application
22:12:40 web.1  |   User Load (1.1ms)  SELECT "users".* FROM "users"
22:12:40 web.1  |   ↳ app/views/users/index.html.erb:3
22:12:40 web.1  |   Rendered users/index.html.erb within layouts/application (Duration: 34.2ms | Allocations: 5783)
22:12:40 web.1  |   User Load (0.5ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 2], ["LIMIT", 1]]
22:12:40 web.1  |   ↳ app/helpers/sessions_helper.rb:9:in `current_user'
22:12:40 web.1  |   Rendered shared/_header.html.erb (Duration: 23.9ms | Allocations: 4091)
22:12:40 web.1  |   Rendered layout layouts/application.html.erb (Duration: 295.0ms | Allocations: 41199)
22:12:40 web.1  | Completed 200 OK in 356ms (Views: 306.1ms | ActiveRecord: 2.7ms | Allocations: 48620)
22:12:40 web.1  | 
22:12:40 web.1  | 
22:12:42 web.1  | Started GET "/logout" for ::1 at 2023-07-24 22:12:42 +0900
22:12:42 web.1  |   
22:12:42 web.1  | ActionController::RoutingError (No route matches [GET] "/logout"):

エラーから考えられる原因

26 にてroutesエラーが解消できたため、バンドル導入によるエラーだと考えています。

rails7より仕様変更でimportmapによってjavascriptのバンドルをするようになった。 このことへの対応ができていない。 アセットパイプラインに関して理解不足により正しい処置がイメージできていない。

　試みたこと

28 にまとめたサイトを参照してjsbundling-rails``cssbundling-railsの導入を試みた

教本にてアセットパイプライン復習